3 easy steps to create React application

React is a JavaScript library for building front-end applications and user interfaces. To generate a boilerplate version of a React application, Facebook has created a node module called create-react-app. By following this three easy steps you will be able to create you first React application.

Related Articles:

Setup command line application

The command line allows a user to navigate the filesystem and run built-in programs and scripts. Bash is the most used command line interface and it is the default shell for Linux and Mac.

Setup Command Line on mac OS

  For OS X users, the application used called Terminal. To access the terminal, go to Applications , open the Utilities folder, open Terminal .

Applications --> Utilities --> Terminal .

Setup Command Line on Windows

To use Bash on a Windows computer, we need first to download and install  Git Bash here. Run the downloaded file and allow the application to make changes to your PC. Keep the default settings for this installation, and click Next until the final Finish.

Now open the Start menu and type “Git Bash” into the search bar then click on the icon “Git Bash Desktop App” to open Git Bash.

Start --> Git Bash --> Git Bash Desktop App

Install and setup node

node.js is a JavaScript runtime environment which runs JavaScript code outside of the browser. It was created with the goal of building web servers and web applications in JavaScript. When Node is installed the npm (node-package-manage) command-line tool is downloaded as well. This command-line tool enables us to install modules and get third-party libraries via our terminal. To install node, follow this steps:

1. First, make sure that your command line is setup

2. then, navigate to the main page of Node website and click on DOWNLOADS or click here https://nodejs.org/en/download/ , make sure to download the version of Node labeled “LTS” because this version is more stable than the current version.

nodejs download

3. After your download is complete, open the downloaded installation package and follow the installation instructions, Keep the all the default settings and click Next.

Install nodejs

4. To confirm that node was downloaded and installed correctly and print the filepath to Node , open a new terminal window and run the terminal command which node . You can also check which version of Node you downloaded with the node -v terminal command.

 which node

 node -v 

Setup the create-react-app boilerplate application

Now that we have node installed and our command line interface (CLI) available we can install create-react-app which is a node module created by facebook to generate React boilerplate applications. To install this module globally, we will use npm (node-package-manage) command.

  • First open your terminal and run the command:
npm install -g create-react-app


sudo npm install -g create-react-app
  • When this is done, in your terminal, navigate to the directory or folder where you would like to place your React application within. Then, run the following command, this may take some time:
create-react-app   <name-of-your-project-without-capital-letters>
  • After that navigate to your project directory using the command:
cd   <name-of-your-project>
  • Then run:
npm start


Create-React-App is a comfortable environment for an easy way to start  learning React and building  applications in React. It  doesn’t handle any backend logic or databases, it just creates a frontend build pipeline, so you can use it with any backend you want.

You might also like:

3 easy steps to create React application.

How to create React Web App with a Node.js API Backend.

How to make Axios Requests in React to a nodejs API.

How to use React Hooks in Functional Components.

5 Steps to Set up React Development Environment.

How to clone GitHub repository and branches.

What are Component Lifecycle Methods in React.

How to open Visual Studio code from Command Line.

How to deploy React app to Heroku.

Complete Guide on how to use Git and GitHub.

How to get Request Origin in Express.js?

How to get the Request Host in express.js?

How to Get Current Date and Time in JavaScript.

How to add Custom Error Handler Middleware to your Node.js/Express API.

Complete JWT Authentication and Authorization System for MySQL/Node.js API.

How to Build a Complete API for User Login and Authentication using MySQL and Node.js.

Node.js + MySQL : Add Forgot/Reset Password to Login-Authentication System.

Nodemailer + Gmail: How to Send Emails from Node.js API using Gmail.

How to store Session in MySQL Database using express-mysql-session.

How to interact with MySQL database using async/await promises in node.js ?

How to use Sequelize async/await to interact with MySQL database in Node.js.

MANY-TO-MANY Association in MYSQL Database using Sequelize async/await with Node.js.

ONE-TO-ONE Association in MYSQL Database using Sequelize async/await with Node.js

ONE-TO-ONE Association in MYSQL Database using Sequelize async/await with Node.js.

How to add Routes to insert data into MySQL database-related tables in Node.js API?

Example How to use initialize() Function in Node.js/Express API .

Why is Connection Pooling better than Single Connection?.

How to create MySQL database using node.js.

Translate »