Create React Application

Today we are going to show you how to create your first React JS application. There are multiple ways to create an application in React but today we will use create-react-app package. It provides a modern build setup with no configuration.

Creating React application using create-react-app, Create a new React app from scratch, create react app tutorial, Create React app tutorial for beginners, create react boilerplate, How to install and set up a React app on Ubuntu/Windows.

Ways to Create React Application

  1. Setup environment for react application
  2. Install react
  3. Create react project
  4. Run application

1. Setup environment for react application

To work with react application, first you have to install Node JS.

Run below command in command-line interface to check Node JS is exist in your system. You can also get the version of node via below command.

If you get an error message like “node is not defined” then you have to install node using the link below.

https://nodejs.org

Note: You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine.

2. Install react

We will use create-react-app npm package to create application in React JS. This package will automatically create boilerplate of React application.

Run below command to install package globally.

3. Create react project

After installing React package, you can create a new react application using below command. I choose first-app as project name.

You can also directly create react app using npx. So you don’t need to install create-react-app package in your system.

4. Run application

To run your created react application, First, you have to jump into the project directory and then you can start the application.

This opens up a new tab on your browser with the URL below.

http://localhost:3000

Output

Create React Application - Output - Clue Mediator
Create React Application – Output – Clue Mediator

You can deploy your project to production via running below command and it will create your build in the build folder.

If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *