Lecture 1: Installing React.js (Using npm, bun, and Vite)
What is npm, bun, and Vite?
npm (Node Package Manager) is the default package manager for JavaScript. It comes with Node.js and allows you to install libraries and frameworks like React.
bun is an alternative to npm, designed to be faster and more efficient.
Vite is a fast build tool that helps you set up a React project quickly, instead of using slower tools like Create React App.
Prerequisites: What do you need before you start?
Before installing React, make sure you have the following tools installed:
- Node.js: You’ll need this because it comes with npm.
You can download it from the official website.
// To check if you have Node.js installed, open your terminal and type:
node -v
Install React using npm (Node Package Manager)
Let’s install React using npm, which is the most common method.
Step 1: Open your terminal/command prompt.
Step 2: Navigate to the folder where you want to create your React project.
// For example, to navigate to your folder, use:
cd my-react-apps
Step 3: Use npm and Vite to create the project.
npm create vite@latest my-first-react-app -- --template react
This command will create a new React project.
Step 4: Install the necessary packages.
After creating the project, navigate into the project folder:
cd my-first-react-app
npm install
Step 5: Run your React app.
npm run dev
Open your browser and go to http://localhost:5173 to see your app.
Install React using bun (Fast Alternative to npm)
Step 1: Install bun.
To install bun, run this in your terminal:
curl https://bun.sh/install | bash
Step 2: Create a new React project using Vite and bun.
bun create vite my-first-react-app --template react
Step 3: Navigate to your project folder.
cd my-first-react-app
Step 4: Install dependencies.
No need to run a separate install command with bun; it's automatic.
Step 5: Run your React app.
bun dev
Visit http://localhost:5173 to see your app running.
Conclusion
Now you know how to install React using both npm and bun with Vite. The process is simple and fast with both tools. Pick whichever works best for you, and you’ll be building React applications in no time!
