Create your first react app

Introduction

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.

Prerequisites

To follow this tutorial, you need:

• Node.js and NPM are to be installed on your machine. You can download Node.js from nodejs.org/en/download 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:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

• README.md: 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 (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

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.

Conclusion

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.