Nearby lessons
2 of 44⚛️ ReactJS Setup
📌 What is React Setup?
Getting Started with React
Before building React applications, you need to set up your development environment. React requires Node.js and npm (Node Package Manager) to work.
📌 Step 1: Install Node.js
React is built using modern JavaScript features that require Node.js and npm. Download and install them from https://nodejs.org/.
After installation, check the versions in your terminal:
node -v # Check Node.js version
npm -v # Check npm version
📌 Step 2: Check React Version
If you already have a React project, you can check the installed React version using:
npm list react
⚠️ Important Note: Create React App is Deprecated
The create-react-app command is now deprecated and no longer recommended.
The React community suggests using Vite for creating new projects due to its faster build times and better development experience.
🚀 Step 3: Create a New React Project with Vite
Follow these steps to create a React project using Vite:
# 1. Create a new Vite project
npm create vite@latest my-app
# 2. Select "React" or "React + JavaScript" when prompted
# 3. Move into the project folder
cd my-app
# 4. Install dependencies
npm install
# 5. Start the development server
npm run dev
📂 Step 4: Project Structure Overview
A typical Vite React project contains the following folders and files:
- node_modules/ – Contains all installed project dependencies. You do not edit this folder directly.
- public/ – Holds static files such as images, favicon, and files that should not be processed by Vite.
- src/ – Contains the main application code, including components, styles, and logic.
- src/main.jsx – Entry point of the React application where the root component is rendered into the DOM.
- src/App.jsx – Main application component. You can modify it to change what appears on the screen.
- index.html – Main HTML file in the root. It contains the
<div id="root">where your React app mounts. - package.json – Stores project metadata, dependencies, and scripts.
- vite.config.js – Configuration file for customizing Vite behavior.
📌 Step 5: Running the App
After running npm run dev, the app will be available at the local development URL shown in your terminal (e.g., http://localhost:5173).
By default, Vite will compile your React code and display the starter template in your browser.
This output comes from the file: src/App.jsx.
If you open src/App.jsx in your code editor, you will see the JSX code responsible for rendering the default content.
You can edit this file to start building your own UI.