How to Install React JS: A Beginner-Friendly Guide

React JS is one of the most popular JavaScript libraries for building user interfaces. Whether you're creating dynamic web apps or interactive user interfaces, React is a great tool to learn. In this guide, we'll walk you through how to install React JS on your computer step by step. Let's dive in!


Step 1: Prerequisites

Before you install React, ensure you have the following tools installed on your computer:

1. Node.js and npm

React relies on Node.js and npm (Node Package Manager). If you don’t have them installed:

  • Visit the official Node.js website.
  • Download the LTS version (it's more stable and beginner-friendly).
  • Follow the installation steps for your operating system.

After installation, verify by running these commands in your terminal or command prompt:

node -v
npm -v

These will display the versions of Node.js and npm installed on your system.

2. A Code Editor

You’ll need a text editor for writing code. Visual Studio Code (VS Code) is highly recommended for its powerful features and React extensions.


Step 2: Setting Up a React Project

There are two popular ways to create a new React application:

1. Using Create React App (CRA)

This is the simplest method to set up a React project. Follow these steps:

  1. Open your terminal or command prompt.
  2. Navigate to the folder where you want to create your project:
  3. cd path/to/your/folder
  4. Run the following command to create a new React app:
  5. npx create-react-app my-app
    • Replace my-app with your desired project name.
    • The npx command ensures you’re using the latest version of Create React App without installing it globally.
  6. Once the installation is complete, navigate to your project directory:
  7. cd my-app
  8. Start the development server:
  9. npm start

    This will open your new React app in the browser at http://localhost:3000/.


2. Using Vite (For Advanced Users)

Vite is a faster alternative to Create React App. Here’s how you can use it:

  1. Open your terminal and navigate to your desired folder.
  2. Run the following commands:
  3. npm create vite@latest my-app --template react
    cd my-app
    npm install
    npm run dev

    This will set up a React app using Vite and start a development server.

Tip: If you’re new to React, start with Create React App. You can explore Vite later for better performance and advanced features.


Step 3: Exploring the Project Structure

Once your React app is set up, you'll see a folder structure like this:

my-app/
├── node_modules/
├── public/
├── src/
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (if using Yarn)

Here’s a quick overview:

  • node_modules/: Contains all dependencies for your project.
  • public/: Holds static files like index.html.
  • src/: The main folder where your React components and app logic reside.
  • package.json: Manages project dependencies and scripts.

Step 4: Customizing Your React App

  1. Open the src/App.js file in your code editor.
  2. Replace the default content with a simple React component:
  3.   
        function App() {
      return (
        <div>
          <h1>Hello, React!</h1>
          <p>Welcome to your first React app.</p>
        </div>
      );
    }
    
    export default App;
    
  4. Save the file and check your browser. You’ll see your custom message!

Step 5: Installing Additional Packages

As you build your React app, you may need additional libraries. For example:

  • React Router for navigation:
  • npm install react-router-dom
  • Axios for API calls:
  • npm install axios

Use npm or yarn to install these as needed.


Conclusion

Congratulations! You’ve successfully installed React JS and created your first project. From here, you can start exploring React’s features, such as components, state, and props, to build amazing web applications.

If you found this guide helpful, share it with others and let me know your thoughts in the comments below. Happy coding!

Trending Posts

The Secret to Flawless Web Design: Mastering Responsive Layouts

8 Characteristics Of Modern Computer

What is Blogging Business? A Beginner’s Guide to Making Money Online

How to Become a Web Designer: A Complete Guide

Will DeepSeek AI Replace Web Developers? A JavaScript Developer’s Reality Check

Is Web Development Dying in 2025? Let’s Get Real

Create a Stunning Personal Portfolio Website with HTML & CSS

Easy Light Bulb Project: HTML, CSS, and JavaScript

Which is Better: Bootstrap or Tailwind?

Sunrise And Sunset Animation Using HTML & CSS?