Learning React: How to Create A React App in Only 5 minutes

December 26th, 2017

What’s the catch? Well there isn’t. You can really build a React application in only 5 minutes.

When Facebook introduced React to developers, there were many complaints on the difficulties to set a project using React. Even the most experienced developers were facing issues in managing all the configuration required to build a React application.  

Creating a React Development Environment was not as easy as it seemed.

The solution: Create-React-App

Create-react-app cuts down the confusion of every developer by building and running a React app without worrying about the configuration. The best part about this app is that tools like Webpack or Babel are pre configured in it. This helps you focus on the operations that matter the most and save up your valuable time.

Getting started:

Before you start building a React application, it is important to know when to use React in web development. Web developers should use React to build huge applications that reflect changes without reloading the page.

Once you have a clear picture in mind, start by installing the create-react-app.

Install React App

The app works on macOS, Windows, and Linux. The React App is released as a Node>= 6 package, so start by installing Node on your system.

Next, write this command to install create-react-app globally:

npm install -g create-react-app

You can now start creating your first React App.

Run this code:

create-react-app my-app
cd my-app

Simply running this code in create-react-app will help you create the basic structure of the project. Moreover, it will configure and install all the transitive dependencies.

├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
   └── App.css
   └── App.js
   └── App.test.js
   └── index.css
   └── index.js
   └── logo.svg
   └── registerServiceWorker.js

After the installation of create-react-app, you can run the following commands in the project folder:

npm start or yarn start

The command runs the app in development mode.

To view it in the browser open http://localhost:3000.

In case of any change in the code, the page will be reloaded automatically.

In the console, you can find all the build errors ad lint warnings.

npm test or yarn test

Using this command, you can run the test watcher in an interactive mode

Important files to talk about

  • public/index.html:

This is the primary HTML file that has the HTML element to render your React code. This file can be used to load web fonts, style tags etc.

  • src/App.js:

This file contains the React component that is created by the create-react-app tool as an example.

  • src/index.js:

The src/index.js uses the ReactDOM.render() technique to mount the (App.js defined) React component in the DOM element from index.html.

  • node_modules/: 

This is where all the dependencies are built and stored.

  • package.json: 

Package.json illustrates the app to basic properties like name and version. The package aksi consists of the dependencies used.


Congratulations! You successfully built a React app in 5 minutes. `