How to create react app

21.08.202221.08.2022 admin 0 Comments how, how to made, как, как сделать, как создать, совими руками

How to create react app

Getting Started

This page is an overview of the React documentation and related resources.

React is a JavaScript library for building user interfaces. Learn what React is all about on our homepage or in the tutorial.

React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.

If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen, CodeSandbox, or Stackblitz.

If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we’d only recommend using this for simple demos.

Add React to a Website

You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

Create a New React App

When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up!

As your application grows, you might want to consider a more integrated setup. There are several JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem. Learn how.

People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you’ll find this section helpful.

Like any unfamiliar technology, React does have a learning curve. With practice and some patience, you will get the hang of it.

The React homepage contains a few small React examples with a live editor. Even if you don’t know anything about React yet, try changing their code and see how it affects the result.

React for Beginners

If you feel that the React documentation goes at a faster pace than you’re comfortable with, check out this overview of React by Tania Rascia. It introduces the most important React concepts in a detailed, beginner-friendly way. Once you’re done, give the documentation another try!

React for Designers

If you’re coming from a design background, these resources are a great place to get started.

The React documentation assumes some familiarity with programming in the JavaScript language. You don’t have to be an expert, but it’s harder to learn both React and JavaScript at the same time.

We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.

Whenever you get confused by something in JavaScript, MDN and javascript.info are great websites to check. There are also community support forums where you can ask for help.

If you prefer to learn by doing, check out our practical tutorial. In this tutorial, we build a tic-tac-toe game in React. You might be tempted to skip it because you’re not into building games — but give it a chance. The techniques you’ll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a much deeper understanding.

If you prefer to learn concepts step by step, our guide to main concepts is the best place to start. Every next chapter in it builds on the knowledge introduced in the previous chapters so you won’t miss anything as you go along.

Thinking in React

Many React users credit reading Thinking in React as the moment React finally “clicked” for them. It’s probably the oldest React walkthrough but it’s still just as relevant.

Sometimes people find third-party books and video courses more helpful than the official documentation. We maintain a list of commonly recommended resources, some of which are free.

Once you’re comfortable with the main concepts and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like context and refs.

This documentation section is useful when you want to learn more details about a particular React API. For example, React.Component API reference can provide you with details on how setState() works, and what different lifecycle methods are useful for.

Glossary and FAQ

The glossary contains an overview of the most common terms you’ll see in the React documentation. There is also a FAQ section dedicated to short questions and answers about common topics, including making AJAX requests, component state, and file structure.

The React blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted there first.

You can also follow the @reactjs account on Twitter, but you won’t miss anything essential if you only read the blog.

Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the CHANGELOG.md file in the React repository, as well as on the Releases page.

This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a separate page. Note that documentation for past versions is snapshotted at the time of the release, and isn’t being continuously updated.

If something is missing in the documentation or if you found some part confusing, please file an issue for the documentation repository with your suggestions for improvement, or tweet at the @reactjs account. We love hearing from you!

Getting started with React

In this article we will say hello to React. We’ll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app — learning a bit about how React works in the process.

Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.

React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in your application are related to JavaScript or to the more specific domain of React.

To set up a local React development environment, create a start app, and understand the basics of how it works

Hello React

As its official tagline states, React is a library for building user interfaces. React is not a framework – it’s not even exclusive to the web. It’s used with other libraries to render to certain environments. For instance, React Native can be used to build mobile applications.

To build for the web, developers use React in tandem with ReactDOM. React and ReactDOM are often discussed in the same spaces as — and utilized to solve the same problems as — other true web development frameworks. When we refer to React as a «framework», we’re working with that colloquial understanding.

React’s primary goal is to minimize the bugs that occur when developers are building UIs. It does this through the use of components — self-contained, logical pieces of code that describe a portion of the user interface. These components can be composed together to create a full UI, and React abstracts away much of the rendering work, leaving you to concentrate on the UI design.

Use cases

Unlike the other frameworks covered in this module, React does not enforce strict rules around code conventions or file organization. This allows teams to set conventions that work best for them, and to adopt React in any way they would like to. React can handle a single button, a few pieces of an interface, or an app’s entire user interface.

While React can be used for small pieces of an interface, it’s not as easy to «drop into» an application as a library like jQuery, or even a framework like Vue — it is more approachable when you build your entire app with React.

In addition, many of the developer-experience benefits of a React app, such as writing interfaces with JSX, require a compilation process. Adding a compiler like Babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. React arguably has a heavy tooling requirement, but it can be learned.

This article is going to focus on the use case of using React to render the entire user interface of an application, using tooling provided by Facebook’s own create-react-app tool.

How does React use JavaScript?

React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript’s syntax so that HTML-like code can live alongside it. For example:

This heading constant is known as a JSX expression. React can use it to render that

Suppose we wanted to wrap our heading in a tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:

Note: The parentheses in the previous snippet aren’t unique to JSX, and don’t have any effect on your application. They’re a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:

However, this looks kind of awkward, because the tag that starts the expression is not indented to the same position as its corresponding closing tag.

Of course, your browser can’t read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:

It’s possible to skip the compilation step and use React.createElement() to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, modern front-end development almost always involves a build process anyway — you have to downlevel modern syntax to be compatible with older browsers, and you may want to minify your code to optimize loading performance. Popular tooling like Babel already comes with JSX support out-of-the-box, so you don’t have to configure compilation yourself unless you want to.

Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you’re comfortable with it, however, it will allow you to build user interfaces more quickly and intuitively, and allow others to better understand your codebase at a glance.

To read more about JSX, check out the React team’s JSX In Depth article.

Setting up your first React app

There are many ways to use React, but we’re going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.

How to Build a React Project with Create React App in 10 Steps

The package Create React App makes creating and developing React apps a breeze.

It is one of the easiest ways to spin up a new React project and is an ideal choice to use for your own personal projects as well as for serious, large-scale applications.

We’re going to cover, step-by-step, how to use all of the major features of Create React App to quickly and easily build your own React projects.

Throughout this guide, I’ve also included a lot of helpful tips I’ve learned through building apps with Create React App to make your workflow even easier.

Let’s get started.

Want to learn how to create impressive, production-ready apps with React using Create React App? Check out The React Bootcamp.

Tools You Will Need:

Step 1. How to Install Create React App

To use Create React App, we first need to open our terminal or command line on our computer.

npx gives us the ability to use the create-react-app package without having to first install it on our computer, which is very convenient.

Using npx also ensures that we are using latest version of Create React App to create our project:

Once we run this command, a folder named «my-react-app» will be created where we specified on our computer and all of the packages it requires will be automatically installed.

Note: Creating a new React app with create-react-app will usually take 2-3 minutes, sometimes more.

Create React App also gives us some templates to use for specific types of React projects.

For example, if we wanted to create a React project that used the tool TypeScript, we could use a template for that instead of having to install TypeScript manually.

To create a React app that uses TypeScript, we can use the Create React App TypeScript template:

Step 2. Reviewing the Project Structure

Once our project files have been created and our dependencies have been installed, our project structure should look like this:

What are each of these files and folders for?

Step 3. How to Run your React Project

Once you have dragged your project into your code editor, you can open up your terminal (in VSCode, go to View > Terminal).

To start your React project, you can simply run:

When we run our project, a new browser tab will automatically open on our computer’s default browser to view our app.

The development server will start up on localhost:3000 and, right away, we can see the starting home page for our app.

Where is our app content coming from?

It’s coming from the App.js file within the src folder. If we head over to that file, we can start making changes to our app code.

In particular, let’s remove the p and a tags, and add an h1 element with the name of our app, «React Posts Sharer»:

When you save by using Command/Ctrl + S, you will see our page immediately update to look like this:

What is great about the development server is that it automatically refreshes to reflect our changes. There is no need to manually refresh the browser.

Note: The only time you may need to refresh the browser when working with Create React App is when you have an error.

Step 4. How to Run Tests with the React Testing Library

Create React App makes it very simple to test your React app.

It includes all of the packages you need to run tests using the React Testing Library ( @testing-library/react ).

A basic test is included in the file App.test.js in src. It tests that our App component successfully displays a link with the text «learn react».

We can run our tests with the command:

If we run this, however, our test will fail.

This is because we no longer have a link element, but a title element. To make our test pass we want to get a title element with the text «React Posts Sharer».

Once we run our test again, we see that it passes:

Note: When run the test command, you do not need to start and stop it manually. If you have a failing test, you can jump into your app code, fix your error, and once you hit save, all tests will automatically re-run.

Step 5. How to Change the App’s Meta Data

How does our project work? We can see how by going to the index.js file.

The package ReactDOM renders our application (specifically the App component and every component within it), by attaching it to a HTML element with an id value of ‘root’.

The entire React app is attached to this HTML page using the div with the id of root you see above.

We don’t need to change anything within the body tags. However, it is useful to change the metadata in the head tags, to tell users and search engines about our specific app.

We can see that it includes meta tags for a title, description, and favicon image (the little icon in the browser tab).

You’ll also see several other tags like theme-color, apple-touch-icon and manifest. These are useful if users want to add your application to their device or computer’s home screen.

In our case, we can change the title to our app name and the description to suit the app we’re making:

Step 6. How to Work with Images and Other Assets

If we look at our App component, we see that we are using an img element.

What’s interesting is that we are importing a file from our src folder, as if it was a variable being exported from that file.

We can import image files and other static assets directly into our React components. This feature comes from Create React App’s webpack configuration.

Instead of including static assets directly within our src folder, we also have the option to include them in our public folder.

If we move our logo.svg file from src to public, instead of importing our file by using the import syntax, we can write the following:

What is convenient about Create React App is that we do not need to use an img element at all to display this svg.

We can import this svg as a component using the following syntax:

What is happening here? We can import the svg file as a ReactComponent and then rename it to whatever name we like using the as keyword.

In other words, we can use our imported svg just like we would a regular component.

Svg files have traditionally been challenging to use in React. This component syntax makes it very easy and allows us to do things such as use inline styles (like you see above, where we set the logo’s height to 200px).

Step 7. How to Install Dependencies

For our post sharing app that we’re making, let’s grab some post data to display in our app from the JSON Placeholder API.

We can use a dependency called axios to make a request to get our posts.

To install axios, run:

Note: You can more easily install packages using the shorthand command npm i axios instead of npm install

When we install axios, it will be added to our node_modules folder.

We can review all dependencies we have installed directly within our package.json file and see that axios has been added to the «dependencies» section:

We will not include it in this project, but if you are interested in using TypeScript with your existing Create React App project, the process is very simple.

You simply need to install the typescript dependency and the appropriate type definitions to use for React development and testing:

Step 8. How to Import Components

Instead of writing all of our code within the App component, let’s create a separate component to fetch our data and display it.

We’ll call this component Posts, so let’s create a folder within src to hold all of our components and put a file within it: Posts.js.

To fetch our posts, we will request them from JSON Placeholder, put them in a state variable called posts, and then map over them to display their title and body:

We are fetching and returning our post data from the Posts component, but to see it in our app, we need to import it into the App component.

Let’s head back to App.js and import it by going into the components folder and getting the Posts component from Posts.js.

After that, we can place our Posts component under our header :

And we can see all of our fetched posts on our home page below our header:

Step 9: How to Style our App with CSS

Our app could benefit from some improved styles.

Create React App comes with CSS support out of the box. If you head to App.js, you can see at the top that we are importing an App.css file from src.

Within App.css, we can add some styles to improve our app’s appearance:

There is also another global stylesheet called index.css that has more general style rules.

In it, we can add some additional properties for the body element to make our background dark and our text white:

After adding these styles, we have a much better looking app:

Be aware that it is also very easy to add a more advanced CSS configurations, such as if you want to add CSS modules or SASS to your React app.

More helpful resources for CSS styling are included in your README.md file.

Step 10. How to Build the App and Publish It

Once we are happy with our app and are ready to publish it, we can build it with the following command:

This command will create an optimized production build for our project and will output what files it has generated and how large each file is:

The output is coming from the build tool Webpack.

Each chunk includes a unique string or hash, which will change on every build to make sure any new deployment is not saved (cached) by the browser.

If we did not have this cache-busting hash for each of our files, we likely couldn’t see any changes we made to our app.

This is helpful to detect any errors we might have with the final version of our project before pushing live to the web.

Like create-react-app, we can use npx to run serve without installing it globally on our computer.

And with that, we have a completed React application ready to publish live to the web on any deployment service, such as Netlify, Github Pages, or Heroku!

Enjoy this post? Join The React Bootcamp

The React Bootcamp takes everything you should know about learning React and bundles it into one comprehensive package, including videos, cheatsheets, plus special bonuses.

Join thousands of developers learning how to become a React pro in record time:

How to create react app

Create React App

Create React apps with no build configuration.

Create React App works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.
If you have questions or need help, please ask in GitHub Discussions.

Get Started Immediately

You don’t need to install or configure tools like webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

Create a project, and you’re good to go.

Creating an App

You’ll need to have Node 14.0.0 or later version on your local development machine (but it’s not required on the server). We recommend using the latest LTS version. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)

npm init is available in npm 6+

yarn create is available in Yarn 0.25+

It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

No configuration or complicated folder structures, only the files you need to build your app.
Once the installation is done, you can open your project folder:

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

npm test or yarn test

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

npm run build or yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

You can find detailed instructions on using Create React App and many tips in its documentation.

How to Update to New Versions?

Please refer to the User Guide for this and other information.

One Dependency: There is only one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

No Configuration Required: You don’t need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

No Lock-In: You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.

Your environment will have everything you need to build a modern single-page React app:

Check out this guide for an overview of how these tools fit together.

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can «eject» and customize it, but then you will need to maintain this configuration.

Create React App is a great fit for:

Here are a few common cases where you might want to try something else:

If you want to try React without hundreds of transitive build tool dependencies, consider using a single HTML file or an online sandbox instead.

If you need to integrate React code with a server-side template framework like Rails, Django or Symfony, or if you’re not building a single-page app, consider using nwb, or Neutrino which are more flexible. For Rails specifically, you can use Rails Webpacker. For Symfony, try Symfony’s webpack Encore.

If you need to publish a React component, nwb can also do this, as well as Neutrino’s react-components preset.

If you want to do server rendering with React and Node.js, check out Next.js or Razzle. Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles.

If your website is mostly static (for example, a portfolio or a blog), consider using Gatsby or Next.js. Unlike Create React App, Gatsby pre-renders the website into HTML at build time. Next.js supports both server rendering and pre-rendering.

Finally, if you need more customization, check out Neutrino and its React preset.

All of the above tools can work with little to no configuration.

If you prefer configuring the build yourself, follow this guide.

Looking for something similar, but for React Native?
Check out Expo CLI.

Supporting Create React App

Create React App is a community maintained project and all contributors are volunteers. If you’d like to support the future development of Create React App then please consider donating to our Open Collective.

This project exists thanks to all the people who contribute.

Thanks to Netlify for hosting our documentation.

We are grateful to the authors of existing related projects for their ideas and collaboration:

Create React App is open source software licensed as MIT. The Create React App logo is licensed under a Creative Commons Attribution 4.0 International license.

facebook/create-react-app

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md