Creating a Basic React Project

Hello students! In the previous topic, we learned how to configure the development environment for React. Here, we will learn how to create a basic React project.

To do this, we’ll use the create-react-app command.

This command will create a new React project with all the necessary files and dependencies.

To create a React project using create-react-app, run the following command in the terminal:

npx create-react-app my-app

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

Open the my-app directory in your text editor or IDE.

You will see the following files and directories:

• package.json: This file contains your project’s dependencies.
• src/App.js: This file contains the main component of your application.
• src/index.js: This file starts the React development server.

The main component of your application is the component that will be rendered on your application’s homepage.

Let’s open the src/App.js file and add the following code:

import React from "react";

const App = () => {
  return (
    <div>
      <h1>My first React application</h1>
    </div>
  );
};

export default App;

This code renders a header with the text “My first React application.”

To start the React development server, run the following command in the terminal:

npm start

This command will start the React development server and open the application in the browser.

You should see the following on your application’s homepage:

My first React application

Congratulations! You’ve created your first basic React application.

Now, let’s explore the structure of a React application.

Until then!