Download and Install Node.js

Node.js is the engine that runs JavaScript on your computer, and npm (Node Package Manager) is the tool that lets you download React libraries.

• Go to the official site: Visit nodejs.org.
• Pick the LTS Version: You will see two options. Always choose the LTS (Long Term Support) version. It’s the most stable and guaranteed to work with React.
• Run the Installer: Open the downloaded file and click through the prompts (the default settings are perfect).

2. Verify the Installation

Once the installer finishes, you need to make sure your computer “sees” the new tools. Open your Terminal (on Mac/Linux) or Command Prompt/PowerShell (on Windows) and type the following:

1. Check Node version: node -v
2. Check npm version: npm -v

Note: If you see a version number (like v20.x.x), you’re good to go! If you get a “command not found” error, try restarting your terminal or computer. 

3. Create your react app

Now that you have Node.js installed you are ready to start your first project.

Open your terminal or command prompt and navigate to the folder where you want your project to live (e.g., cd Documents). Then run:

1. Initialize the project:

Bash

npx create-react-app my-react-app

Replace my-react-app with the name of your app.

2. Select your settings: Use your arrow keys to select React and then JavaScript (or TypeScript if you’re feeling adventurous).
3. Enter the folder and install dependencies:

Bash

cd my-react-app

npm install

4. Launch the Local Environment

To see your app live, run:

Bash

npm start

5. The golden Standard

In early 2025 the React Team depreciated Create-React-App and since then the industry has split into two separate “Golden Standards” depending on what you are building.

1. The Standard for SPAs & Learning: Vite

If you are building a Single Page Application (SPA)—like a dashboard, a tool that requires a login, or a personal project—Vite is the undisputed king.

• Why: It is the direct successor to the old way of building React. It is lightweight, stays out of your way, and is compatible with almost every React library ever made.
• Example: “I want to write React components and have them show up on the screen immediately.”

2. The Standard for Production & SEO: Next.js

If you are building a public-facing website—like an e-commerce store, a blog, or a marketing site—the “Golden Standard” is actually Next.js.

• Why: Next.js is a framework built on top of React. It handles things Vite doesn’t, like SEO (Search Engine Optimization), image optimization, and “Server Components” (which make your site load faster for users).
• Example: “I am building a professional product that needs to rank on Google and handle thousands of users.”

For your local environment and for learning the core of React, Vite is the absolute best choice. It gives you a “pure” React experience without the extra rules and complexity that frameworks like Next.js or Remix introduce.

Most developers today start with Vite to master the fundamentals, then move to Next.js once they need to build a full-scale commercial product.

For the Puposes of this tutorial we are going to create a application using Vite

6. Open your terminal or command prompt and navigate to the folder where you want your project to live (e.g., cd Documents). Then run:

1. Initialize the project:

Bash

npm create vite@latest my-react-app

Replace my-react-app with the name of your app.

2. Select your settings: Use your arrow keys to select React and then JavaScript (or TypeScript if you’re feeling adventurous).
3. Enter the folder and install dependencies:

cd my-react-app

npm install

4. Launch the Local Environment

To see your app live, run:

Bash

npm run dev

5. create a .batch file to launch the local development

1. Create a new local.bat file
2. Add the following code

@echo off

Call npm start

pause