🚀 How to Install React JS (2026 Tutorial)
React.js is one of the most powerful and widely-used JavaScript libraries for building interactive user interfaces. Whether you’re a beginner or an advanced developer, this step-by-step tutorial will help you set up React quickly and efficiently.
✅ Prerequisites
- Install
Node.js(LTS version is recommended) - Ensure
npmoryarnis available - Use a code editor like VS Code
🔍 Check If Node.js Is Installed
node -v
npm -v⚙️ Method 1: Installing React Using Vite (Recommended)
Vite is a fast, lightweight build tool and the preferred way to create modern React apps in 2025.
📦 Step-by-Step
- Create a new Vite app:
npm create vite@latest my-react-app -- --template react- Navigate into the directory:
cd my-react-app- Install the dependencies:
npm install- Start the development server:
npm run devYour React app should now be running at http://localhost:5173
🔧 Method 2: Using Create React App (CRA)
Although Vite is more modern, CRA is still used in many projects and provides a stable foundation.
npx create-react-app my-app
cd my-app
npm startCRA sets up Webpack, Babel, JSX, and more right out of the box.
🧪 Method 3: Use React via CDN (No Build Tools)
For quick testing or learning purposes, you can use React via CDN without any setup.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@19/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@19/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
const App = React.createElement('h1', null, 'Hello from React!');
ReactDOM.render(App, document.getElementById('root'));
</script>
</body>
</html>📁 Project Structure (Vite)
Here’s what your Vite React project looks like:
my-react-app/
├── public/
├── src/
│ ├── App.jsx
│ ├── main.jsx
├── index.html
├── package.json🧩 Installing React Manually
If you’re using a custom setup with Webpack:
npm install react react-dom🛠️ Bonus: Developer Tools
- Install React Developer Tools browser extension
- Use it to inspect and debug your components visually
🎯 Final Thoughts
React JS is an essential tool in modern frontend development. Choose Vite for new projects in 2025, explore React 19 features, and start building faster, interactive apps today.
Need help setting up a project? Drop us a message or follow our future tutorials!