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:
- Open your terminal or command prompt.
- Navigate to the folder where you want to create your project:
- Run the following command to create a new React 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. - Once the installation is complete, navigate to your project directory:
- Start the development server:
cd path/to/your/folder
npx create-react-app my-app
cd my-app
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:
- Open your terminal and navigate to your desired folder.
- Run the following commands:
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
- Open the
src/App.js
file in your code editor. - Replace the default content with a simple React component:
- Save the file and check your browser. You’ll see your custom message!
function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>Welcome to your first React app.</p>
</div>
);
}
export default App;
Step 5: Installing Additional Packages
As you build your React app, you may need additional libraries. For example:
- React Router for navigation:
- Axios for API calls:
npm install react-router-dom
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!