How to Install React – A Step-by-Step Guide With Example

How to Install React – A Step-by-Step Guide With Example

React is one of the most popular JavaScript libraries for building user interfaces. Whether you’re a beginner or an experienced developer, setting up React is straightforward. In this guide, we’ll walk you through the installation process step by step, including a simple example to get you started.

Prerequisites

Before installing React, make sure you have:

• Node.js installed (includes npm, Node Package Manager)
• A code editor like VS Code, Sublime Text, or Atom
• Basic knowledge of HTML, CSS, and JavaScript

Step 1: Install Node.js and npm

React requires Node.js to run. If you don’t have it yet:

1. Go to Node.js official website.
2. Download the LTS (Long Term Support) version for your OS (Windows, macOS, or Linux).
3. Run the installer and follow the instructions.
4. Verify the installation by opening your terminal (Command Prompt/PowerShell on Windows, Terminal on macOS/Linux) and running:

node -v
npm -v

Step 2: Create a New React App

The easiest way to set up a React project is using Create React App (CRA), a tool that configures everything for you.

1. Open your terminal and run:

npx create-react-app my-react-app

(Replace my-react-app with your preferred project name.)

2. Wait for the installation to complete. This may take a few minutes.

3. Navigate into your project folder:

cd my-react-app

Step 3: Start the Development Server

To see your React app in action:

1. Run the following command:

npm start

2 . Your default browser should open automatically at http://localhost:3000.

3. You’ll see the default React welcome page.

Step 4: Modify the App (Example)

Let’s make a simple change to see how React works.

1. Open the project in your code editor.
2. Navigate to src/App.js.
3. Replace the existing code with:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

4. Save the file.
5. Your browser will automatically reload, showing your updated content.

Step 5: Build for Production

When you’re ready to deploy your app, run

npm run build

This creates an optimized production build in the build folder.

Conclusion

You’ve successfully installed React and created your first app! From here, you can explore more advanced topics like components, state management, and hooks.

Next Steps

• Learn about React Components
• Explore React Hooks (useState, useEffect)
• Try integrating APIs with fetch or Axios

Happy coding!