View All Sessions

Content

• Introduction
• Installation of Node.js
• Create react app
• React Project Directory Structure
• JSX Basics

Introduction

• React is a JavaScript library used to build user interfaces (UI), especially single-page applications (SPA).
• It allows developers to create fast, interactive, and reusable UI components.
• React was developed and is maintained by Facebook (Meta).
• In React, UI is divided into small reusable components.
React uses a Virtual DOM, which is a lightweight copy of the real DOM, where any state change updates the Virtual DOM first, React then compares the old and new Virtual DOM, and only the required changes are applied to the real DOM, making React fast and efficient.

Why React?

• Creates dynamic and responsive UI
• Uses component-based architecture
• Updates UI efficiently using Virtual DOM
• Works well with backend APIs
• Has a huge community and ecosystem

Single Page Application (SPA)

• In a SPA, Page does not reload completely
• In a SPA, Only required data or UI is updated
• It gives Faster user experience

---

Installation of Node.js

• Node.js is a JavaScript runtime environment that allows JavaScript to run outside the browser.
• It is required to run React tools, install packages, and manage dependencies using npm.

Why Node.js is Required for React?

• To install React libraries and packages
• To use npm (Node Package Manager)
• To run development servers
• To build React applications

Steps to Install Node.js

• Visit: nodejs.org
• Download and install LTS (Long Term Support) version
• To check node version open cmd and type

  node -v

---

Create react app

Steps:

• Open cmd in empty folder
• Run command -

  npm create vite@latest

• Press y to install - create-vite package
• Enter project name (e.g. react_basics)
• Select a framework: React
• Select a variant: JavaScript
• Use Rolldown (Vite): No
• Select Yes
• Test app by clicking on link
• to stop server press ctrl + C -> Y
• Run project in VS Code - Open project folder with VS Code -> Open Terminal -> run command

  npm run dev

---

React Project Directory Structure

• node_modules/ – Contains all installed npm packages required for the React application to run. This folder is auto-generated and should not be modified manually.
• public/ – Stores static files that can be accessed directly, such as images.
• src/ – Main working directory where all React source code is written.
• assets/ – Contains images, icons, and other static resources used inside components.
• App.jsx – Root component of the application where the main UI logic is written.
• main.jsx – Entry point of the React app that renders the App component into the browser.
• index.html – The single HTML file that loads the React application.
• package.json – Contains project configuration, scripts, and list of installed dependencies.

---

JSX Basics

JSX (JavaScript XML) allows writing HTML-like syntax inside JavaScript.

Example:

function App() {
  return <h1>Hello React</h1>;
}

JSX Rules:

• Must return a single parent element
• Use className instead of class
• JavaScript expressions go inside { }