React is a popular JavaScript library for building user interfaces, especially for single-page applications. It’s easy to start a new React project. We will be using Vite to make the process even faster.

I will be explaining through the steps to set up a React project using Vite, what you need to get started on a Windows machine, and how to run the project for the first time. We'll also look at what happens when you start the React app for the first time.

Please feel free to drop a comment if you find any humanly mistakes during this. I am creating this while i learn this for the first time as well.

Pre-requisites for React Project Setup

Before you start, you need to have Node.js installed on your machine.

Node.js is a JavaScript runtime that lets you run JavaScript on your computer. It also includes npm, a package manager that helps install tools like Vite.

1. Download Node.js: Go to the official Node.js website (https://nodejs.org/) and download the LTS version for Windows.

2. Install Node.js: Run the installer and follow the prompts. Make sure to check the box that says “Automatically install the necessary tools” when it appears.

3. Verify the installation: Open Command Prompt and type:
   node -v
   If it shows a version number, Node.js is installed correctly. Also, check npm by typing:
   npm -v

Setting Up a New React Project Using Vite

Vite is a modern build tool that’s faster than older tools like Create React App. You can learn more about it here https://vitejs.dev/guide/.

To create a new React project using Vite, follow the below steps:

1. Open your command line tool: On Windows, you can use Command Prompt, PowerShell, or Windows Terminal.

2. Run the following commands:

   1. First, create a new project by typing:

      

   2. Replace my-react-app with your project name.

   3. Next, you’ll be asked to choose a framework. Type React and hit enter.

   4. After that, you’ll be asked to choose a variant. Type JavaScript and hit enter (or choose TypeScript if you prefer it).

3. Install dependencies: Navigate to your project folder by typing:
   cd my-react-app
npm install

Running the React Project for the First Time

After setting up your React project, you’ll want to see it in action. Here’s how:

1. Start the development server: In your project folder, type:
   npm run dev

2. Open the project in your browser: The command above will start a local server. It will show you a link in the terminal, usually something like http://localhost:5173. Open this link in your web browser to see your React app running.

Understanding the Control Flow of the React Default Page

When you first open your React app in the browser, you see a default page. This is what happens in the background:

1. Index.html: When you start the React app, the browser loads an index.html file from the public folder. This file is simple and contains a <div> with an id of root.

2. JavaScript Takes Over: React’s main JavaScript file (usually main.jsx or index.js) gets loaded next. This file tells React to take control of the root element in the HTML file.

3. App Component: The App.jsx (or App.js) file is where the main React component lives. This component contains the UI elements that you see on the screen.

4. Rendering the UI: React uses something called a “virtual DOM” to manage what’s shown on the screen. It compares the virtual DOM to the real DOM and updates only the parts that have changed, making the app fast and responsive.

Conclusion

That’s it! You’ve just set up a React project using Vite, learned the prerequisites, ran the project for the first time, and understood the basic control flow of the React app. With these basics in place, you can start building your own React applications!

I will be posting the further parts of this as I will learn. Please feel free to provide the feedback & drop a comment of what you liked & what you didn't.