Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
JavaScript runtime that powers React
Select the best installation method
Generate your first React project
Start your app and begin coding!
Download and install Node.js directly from the official website. This is the easiest method.
Steps:
Use a version manager like nvm to switch between Node.js versions easily.
Using nvm:
# Install nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash # Install latest LTS Node.js nvm install --lts # Use the installed version nvm use --lts
After installation, you should have Node.js and npm ready to use for React development.
⚠️ Version Requirements
Command not found
Restart your terminal or add Node.js to your PATH
Permission denied
Run installer as administrator (Windows) or use sudo (Mac/Linux)
Old version detected
Uninstall old version first, then reinstall the latest LTS
Modern & Fast
Lightning-fast development server with modern tooling. Perfect for new projects.
npm create vite@latest my-react-app -- --template reactClassic & Stable
The official React tool. Battle-tested with extensive documentation and community support.
npx create-react-app my-react-appFull-Featured
Production-ready framework with server-side rendering, routing, and more built-in.
npx create-next-app@latest my-react-appNavigate to where you want to create your project
Use Vite to create a new React project
Move into your new project directory
Download all the necessary packages
Launch your React app in development mode
Once you run npm run dev, open your browser and go to http://localhost:5173to see your app running!
src/Your React components and code
public/Static files (images, icons)
package.jsonProject dependencies and scripts
vite.config.jsVite configuration
index.htmlMain HTML file
This is your main React component. All other components will be built around this.
function App() {
return (
<div>
<h1>Welcome to React</h1>
<p>Start editing to see some magic happen!</p>
</div>
);
}
export default App;This file connects your React app to the HTML document.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
// Create root and render App
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);Modify App.jsx and see how changes appear instantly
Try adding colors and styles to your components
Build your first custom React component
Pass data between components
Your development environment is set up and you've created your first React app. The journey to becoming a React developer starts now!