How to Create React Application - Tutorial For Beginners

React is a popular JavaScript library for creating front-end applications. Also, react will helps you to create a Single Page App (SPA). In order to make setting up single-page apps easier, a CLI tool called create-react-app was made. So, we’ll use the Create React App tool to quickly build out a React application.

As we all know that create-react-app is the best way to create a basic React app. It not only creates a very basic react web application but also adds the required dependencies needed to run React application.

Before all start, you may need to install Node.js

You can just run the create-react-app on the command line, followed by the name of the app you want to create and you will get a brand new React application and it’ll come with:

• A predefined folder structure
• Scripts to run React application
• Extensibility
• And more!

Let's take a look!

Run below command to get a create-react-app NPM package in your local machine.

saveCopyzoom_out_map
npm install -g create-react-app

In the above command the -g flag installs the NPM package globally on the machine. Once this is done, we’ll use this package to get us a basic boilerplate for React.

Now, run below command to create a react application.

saveCopyzoom_out_map
create-react-app hello-world

When the script finishes you will see a success message that says:

saveCopyzoom_out_map
Success! Created hello-world at your_file_path/hello-world
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd hello-world
  npm start

Happy hacking!

This will create a directory called the hello-world. Now we need to navigate into the directory and run the command below.

saveCopyzoom_out_map
cd hello-world
npm start

Once you run the npm start command, a local development server should start and render the React application at the following location

saveCopyzoom_out_map
localhost:3000

Bingo!! Your first React application is created.

I hope this tutorial helped you find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions.

P.S. Do share this note with your team.