React Installation: Create React App and Vite

Welcome to your first lesson on React! In this tutorial, we'll guide you through setting up a React project using both Create React App and Vite. By the end, you'll have a solid foundation for building dynamic, user-friendly web applications.

🎯 Objective: Learn how to set up a React project using Create React App and Vite

What is React?

React is a popular JavaScript library for building user interfaces. It allows you to create reusable components and efficiently manage state changes.

📝 Note: React is not a framework but a library, making it easier to learn and integrate into existing projects.

Prerequisites

To follow along, you'll need:

Node.js installed (version 14.x or higher)
npm (Node Package Manager)

Creating a React Project with Create React App

Installation

Start by creating a new directory for your project:

bash

mkdir my-react-app
cd my-react-app

Next, install Create React App globally:

bash

npm install -g create-react-app

Finally, create your React app:

bash

npx create-react-app my-react-app

Navigate into the project folder:

bash

cd my-react-app

Running the Application

Start the development server:

bash

npm start

Open your browser and visit http://localhost:3000/ to see your app in action!

Creating a React Project with Vite

Installation

Install Vite globally:

bash

npm install -g vite

Create a new project:

bash

vite create my-vite-react-app

Navigate into the project folder:

bash

cd my-vite-react-app

Running the Application

Start the development server:

bash

npm run dev

Open your browser and visit http://localhost:3000/ to see your app in action!

Key Differences

While both tools help you create React applications, they have some key differences:

Build Time: Vite is faster than Create React App due to its optimized bundler.
Development Server: Vite serves the app directly from the file system, reducing the time required to start the development server.
CSS: Vite handles CSS imports without requiring a configuration file.

Quiz

By learning how to set up a React project using Create React App and Vite, you've taken the first steps towards mastering this powerful library. In the next lesson, we'll dive into React components and the JSX syntax. Stay tuned! 🚀