What is React?

• ★ React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook (Meta).
• ★ React is a JavaScript library for building user interfaces, widely used in modern web development.
• ★ React is used to build single-page applications.
• ★ React allows us to create reusable UI components.
• ★ React uses Virtual DOM, JSX, and component-based architecture.

Install Node.js

To use React in production, you need npm which is included with Node.js.

What is Node.js?

Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to run JavaScript outside the browser. It is primarily used for server-side development, making it possible to create fast, scalable, and real-time applications.

Before Node.js, JavaScript could only run inside a web browser (like Chrome or Firefox). Node.js changed that by allowing JavaScript to run on a server, enabling backend development with JavaScript.

What is npm (Node Package Manager)?

npm (Node Package Manager) is the default package manager for Node.js. It helps developers install, manage, and share JavaScript libraries and tools easily.

Steps to Install Node.js:

• 1. Visit the Node.js website
• ★ Go to https://nodejs.org
• ★ You’ll see the LTS (Long-Term Support) version. LTS is recommended for most users because it’s more stable for development.
• 2. Download the Installer
• ★ Click on the LTS version appropriate for your platform (Windows or macOS).
• ★ This will download an .msi (Windows) or .pkg (macOS) installer.
• 3. Run the Installer
• ★ Windows: Double-click the .msi file, follow the on-screen instructions (accept license, choose install path, etc.).
• ★ macOS: Double-click the .pkg file and follow the installation wizard.
• 4. Verify Installation
• ★ Open Command Prompt (Windows) or Terminal (macOS).
• ★ Run the commands:

		node -v
		npm -v
		

• ★ If these commands print version numbers (e.g., v18.16.0 for node, 9.6.4 for npm), the installation of Node.js succeeded.

Create a React App (Recommended: Using Vite)

• 1. Navigate to the folder where you want your project (using cd command).


• 2. Run:

npm create vite@latest my-app
    

This will generate a new folder called my-app with a modern React setup using Vite.

When prompted:
• Select React as the framework.
• Select JavaScript (recommended for beginners).
• Choose No for experimental Vite version.



Command Part	Meaning
npm create vite@latest	Runs the official Vite project creation tool.
my-app	The name of your new React project (a folder will be created with this name).



• 3. Go into that folder:

cd my-app
    

• 4. Install dependencies:

npm install
    

• 5. Start the development server:

npm run dev
    

This launches the app at http://localhost:5173
Open the link in your browser.
You should see the Vite + React welcome screen with a counter button.

React Project Structure (Vite + React)

✅ src/ → This is the Core Folder for Your React Code:

• main.jsx → Entry point of the React application. Connects React to the HTML DOM.
• App.jsx → Main component of your React application.
• Components (.jsx files) → Reusable UI building blocks.
• Styles (.css files) → CSS files for styling your components.
• Assets (images, icons, etc.) → Static resources like images and icons used in the app.

✅ main.jsx → Application Entry Point

This file renders your React app into the browser DOM. It connects the App component to the HTML file (index.html). Example:

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
)

✅ App.jsx → Main Component of Your React App

This is the primary file where you write your React code. It serves as the root component of your application, and you can:

• Create and modify the UI.
• Import and use other components.
• Add styles and logic.
• Manage state and user interactions.

✅ package.json → Project Configuration

• Lists project dependencies.
• Contains scripts like npm run dev and npm run build.

React Image Import Methods

Method	When to Use	Example
Import (import logo from './logo.svg')	When using images inside src/	<img src={logo} />
Direct Path (src="/logo.svg")	When using images inside public/	<img src="/logo.svg" />
External URL	For online images	<img src="https://example.com/image.jpg" />

Check React Version Using npm

Execute this command in the terminal within your project directory:

	npm list react
	

Relationship Flow: React + Vite + Node.js

React Comment Syntax Summary

Type	Syntax	Where to Use?
Single-line JavaScript comment	// This is a comment	Outside JSX
Multi-line JavaScript comment	/* This is a comment */	Outside JSX
JSX Comment	{/* This is a JSX comment */}	Inside JSX

What is JSX? (JavaScript XML)

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code inside JavaScript files. It is used in React to describe what the UI should look like.