Vaidikalaya
Privious Next

React Installation

There are several methods to install Reactjs So here we discuss the most suitable and recommended method. we will show you step-by-step how to install and configure a working React development environment.

Pre-requisite:

To install React and set up a basic React development environment, you'll need Node.js and npm (Node Package Manager) installed on your computer. So Before you begin, make sure you have Node.js and npm (Node Package Manager) installed on your computer. You can download and install them from the official website: Node.js Downloads. Choose the LTS (Long Term Support) version for stability.

Follow the below link for the installation of Nodejs
ReactJS Installation:

There are two methods

  • Using create-react-app(faster method)
  • Using webpack and babel
Method 1: Using create-react-app

Step 1: Navigate to the folder where you want to create the project and open it in terminal

I have created one directory (react_tutorials) in E drive > E:\react_tutorials

Now open it in a terminal (Command Prompt)

Step 2: Type the following command in the terminal and hit enter

npx create-react-app Application_Name
Example :
npx create-react-app my_app

Now it will take some time to create the react app.


Now your app is ready to run.

Step 3: Now go to the application's directory and run npm start command.

cd my_app
npm start

NPM is a package manager that starts the server and accesses the application at the default server http://localhost:3000.

Step 4: Now open your browser and type localhost:3000

The following output will be displayed in the browser

Your react setup is ready to use. You can modify the application according to your preferences and change the code accordingly.

Directory Structure of React App

Our project's default directory structure looks like the below image.

  1. node_modules: This directory contains all the dependencies (libraries and packages) your project uses. You don't need to manually manage these files; npm or yarn takes care of it.

  1. public: This directory contains static assets that are served as-is by the development server and are publicly accessible. The index.html file serves as the main HTML template for your application. You can add other assets like images, icons, or a web app manifest here.

  1. src: The heart of your application's source code.
    1. index.js: This is the main entry point for your application, where you typically render your root React component into the DOM.
    2. App.js: The root component of your application. You can build your component tree from here.
  2. package.json: This file lists your project's dependencies and scripts for running and building your app. It's a central configuration file for your project.
  3. package-lock.json: A lock file that specifies the exact versions of your project's dependencies. It ensures consistent installations across different environments.
  4. README.md: A documentation file where you can provide information about your project, installation instructions, usage, and more.
  5. .gitignore: A file that specifies which files or directories should be ignored by version control systems like Git.
Privious Next