React Installation & Setup in React js
Installation and Setup of React JS
Before you start building anything with React, the first step is setting up your development environment properly. I still remember the first time I tried installing React - I thought it would be complicated. But honestly, once you understand the basic flow, it’s quite simple and straightforward.
React itself is just a JavaScript library. So technically, you don’t “install React” the way you install a software program. Instead, you set up a project environment where React can run and help you build your application.
Step 1: Install Node.js
React projects use Node.js and npm (Node Package Manager) to manage dependencies and run development tools. So the very first thing you need is Node.js installed on your system.
You can download it from the official website:
https://nodejs.org
It’s always recommended to download the LTS (Long Term Support) version.
After installation, open your terminal or command prompt and check if everything is installed correctly:
node -v
npm -v
If both commands return version numbers, your environment is ready.
Step 2: Choosing the Right Tool to Create a React App
Earlier, developers used Create React App for setting up projects. But today, most developers prefer Vite because it is much faster and lightweight.
Vite provides a quicker development server and better performance.
Step 3: Creating a React Project Using Vite
To create a new React project, open your terminal and run:
npm create vite@latest my-react-app
After running this command:
- You will be asked to enter the project name (or confirm the default).
- Select React as the framework.
- Select JavaScript or TypeScript depending on your preference.
Then move into your project folder:
cd my-react-app
Now install dependencies:
npm install
Once installation is complete, start the development server:
npm run dev
You will see a local URL (usually something like http://localhost:5173). Open it in your browser, and your React application will be running.
Understanding the Project Structure
Once your project is created, you will notice several files and folders. Let’s understand the important ones:
1. node_modules
This folder contains all installed packages. You usually don’t modify this manually.
2. public
This folder stores static files like images and icons.
3. src
This is the most important folder. You will write most of your code here.
4. main.jsx
This is the entry point of your application. It connects React to the HTML file.
5. App.jsx
This is the main component where your application starts.
Running and Building the Application
Start Development Mode
npm run dev
This runs the application in development mode with hot reload. Whenever you save changes, the browser updates automatically.
Build for Production
npm run build
This creates an optimized production build inside the dist folder. You can deploy this folder to any hosting server.
Alternative: Using Create React App (Older Method)
If you are working on older projects or following legacy tutorials, you might still see Create React App being used.
npx create-react-app my-app
cd my-app
npm start
However, for new projects, Vite is generally recommended due to better speed and simplicity.
Editor Setup
For development, most developers use Visual Studio Code. It provides excellent extensions for React development.
Some helpful extensions:
- ES7+ React Snippets
- Prettier (for code formatting)
- ESLint (for code quality)
- Auto Rename Tag
Common Beginner Mistakes
- Not installing Node.js properly.
- Running commands outside the project folder.
- Forgetting to install dependencies before starting the server.
- Editing files outside the src folder incorrectly.
If something doesn’t work, always check the terminal for error messages. Most setup issues are small and easy to fix.
Final Thoughts
Setting up React is no longer complicated. With modern tools like Vite, you can create and run a React application within a few minutes.
Once your environment is ready, you can focus entirely on building components, managing state, and creating interactive user experiences.
Installation is just the first step - but it’s an important one. A properly configured setup makes development smooth and enjoyable.
