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!