Seleccionar página

Create React app in 5 minutes using create-react-app

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-app

If 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-app
You can verify that the installation is correct by typing:
$ create-react-app --version
create-react-app version: 1.0.2
Congratulations! You can now start using create-react-app command anywhere in your terminal.

Creating and running our first React App

Now 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-world
create-react-app create react project Good 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 start
create-react-app create react project The command will also open yout browser atomatically with the default app it created for us.

Editing our app

Project structure

The 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. create-react-app react folder structureThese 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
  • The page template (public/index.html) and the JavaScript entry point (src/index.js) must exist.

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.

Conclusion

Well done! You have learnt how to create a React app in less than 5 minutes. Remember that if you don’t know react and want to get started with it, you can read the previous React tutorial for beginners. In the next posts we’ll continue covering different aspects of React, like how to Build complex React components and how to implement the interaction between them. Happy coding!

Sources

If you want more articles + tutorials like this, subscribe to my newsletter – I send out a new one every week or so. Remember, if you liked the article you can share it using the buttons below!