Create your first react app

Create your first react app


React is an open-source JavaScript library for building user interfaces or UI components. React is maintained by Facebook and a community of individual developers and companies. React is popular among developers because it allows for creating reusable UI components, and it provides a fast and smooth user experience. In this tutorial, we will set up a React environment for building web applications.


To follow this tutorial, you need:

  • Node.js and NPM are to be installed on your machine. You can download Node.js from and NPM will be installed automatically with Node.js.

Step 1:

Create a new React project To create a new React project, we will use Create React App (CRA). CRA is a tool created by Facebook for creating React projects with minimal configuration.

Open a terminal or command prompt and run the following command to create a new React project:

npx create-react-app my-app

Replace my-app with the name of your application.

This command will create a new directory named my-app with all the necessary files and dependencies.

Step 2:

Start the development server To start the development server, navigate to the project directory and run the following command:

cd my-app
npm start

his command will start the development server at http://localhost:3000. The server will automatically reload the page when you make changes to the code.

Step 3:

Explore the project structure The project structure generated by CRA is as follows:

  • A file containing information about the project.

  • node_modules/: A directory containing all the dependencies of the project.

  • package.json: A file containing information about the project and its dependencies.

  • .gitignore: A file specifying which files should be ignored by Git.

  • public/: A directory containing the public files of the project.

  • src/: A directory containing the source code of the project.

Step 4:

Modify the default React component The default React component generated by CRA is defined in src/App.js. Open this file and modify it as follows:

import React from 'react';

function App() {
  return (
      <h1>Hello, world!</h1>

export default App;

This code defines a functional component named App that renders a simple HTML heading.

Step 5:

Run the modified component Save the changes to App.js and the development server will automatically reload the page with the updated component.

Congratulations! You have set up a React environment and created a simple React component. You can now continue to build your application by adding more components and functionality.


In this tutorial, we set up a React environment using Create React App and explored the project structure. We then modified the default React component and ran the modified component. React is a powerful library for building user interfaces and it can be used for building simple to complex web applications.

Did you find this article valuable?

Support Shital Mainali by becoming a sponsor. Any amount is appreciated!