Yes, I’m not joking. It will take you only 5 minutes to create and run your first React app. How could this be possible? When React became popular, lot of people started complaining about the difficulties of setting up a project with React. Even experienced developers get confused and faced multiple problems trying to manage all the configuration needed to build a React application. You could start using React by adding the CDN link to your page, but is completely different if you want to come with a React development environment (Webpack/Babel/Brunch/NPM/Node/React). The answer is create-react-app.
What is create-react-app?create-react-app is the solution for running easily a React app on our system without dealing with the configuration. create-react-app will do everything for you and let you concentrate only on what really matters.
Getting started with create-react-appIf you are not familiar with React, I strongly recommend you to read my previous React tutorial where you can find detailed explanation about what is react and learn the basics of the React library. As create-react-app is released as a Node package, you will need to install Node on your system. Once you have Node installed, we can install create-react-app writing the following command:
npm install --global create-react-appYou can verify that the installation is correct by typing:
$ create-react-app --version create-react-app version: 1.0.2Congratulations! You can now start using create-react-app command anywhere in your terminal.
Creating and running our first React AppNow you can create a new React application using the create-react-app command followed by the name of the app you want to create. The command will not only create the necessary files and structure for the project but also install and configure all the dependencies.
create-react-app hello-worldGood job! You have created your first React app. As you can see in your terminal, you can use npm start command to launch the development server at http://localhost:3000/:
npm startThe command will also open yout browser atomatically with the default app it created for us.
Editing our app
Project structureThe first thing that you may notice about the project structure is that there aren’t configuration folders. As we said before, create-react-app will handle all the configuration difficulties for you. These are the main aspects you need to know about the project structure that react-craete-app has built for you:
- Only files inside public can be used from public/index.html.
- You need to put any JS and CSS files inside src, or Webpack won’t see them
Important files to talk about
- public/index.html: main HTML file that includes the HTML element where your React code will be rendered. We can use this file to load webfonts, style tags, etc.
- src/App.js: contains the example React component created as an example by the create-react-app tool.
- src/index.js: mounts the React app component (defined in App.js) in the selected DOM element from the index.html using ReactDOM.render() method.
- node_modules/: the folder where all of the dependencies get built and stored
- package.json: Describes the application with some basic properties (name, version, etc) and contains all the dependencies used.