Introduction to React & JSX

1. What is React?

React is an open-source JavaScript library developed by Facebook for building modern user
interfaces, especially for Single-Page Applications (SPAs). It allows you to build reusable UI
components that can update efficiently when the state changes. React’s primary goal is to make it
easier to develop interactive UIs while improving performance and maintainability.

Key Features of React:

 Component-Based Architecture: React encourages breaking down the UI into smaller,

 Declarative UI: React uses a declarative approach to describe how the UI should look based
on the application’s state. React then ensures the UI stays in sync with the state.

 Virtual DOM: React uses a virtual DOM, which is a lightweight representation of the actual
DOM. When the state of a component changes, React compares the new virtual DOM with
the previous one and calculates the minimal set of changes to update the real DOM. This
process is called Reconciliation, and it helps improve performance by avoiding unnecessary
DOM manipulations.

 Unidirectional Data Flow: In React, data flows in one direction. Components pass data to
their child components using props (short for properties). When the state of a component
changes, it re-renders itself and its child components with updated data.

 Hooks: React provides hooks like useState and useEffect, which allow developers to use state
and lifecycle methods in function components, making them more powerful and easier to
manage.

Why Use React?

 Fast and Efficient: React’s virtual DOM and efficient diffing algorithm help keep the
application fast even as it grows in size.

 Reusable Components: Components can be reused throughout the application, improving

 Large Ecosystem: React has a vast ecosystem, including tools, libraries, and a large
community, making it easier to find resources and solutions.

 SEO-Friendly: React can be rendered on the server-side using frameworks like Next.js, which
helps improve SEO for React-based websites.

2. Setting Up a React Project with Vite

Vite is a modern and fast build tool that provides an improved development experience for React
projects. It offers faster start-up times and hot module replacement (HMR) compared to traditional
tools like Create React App (CRA).
Steps to Set Up React with Vite:

Step 1: Install Node.js and npm If you haven’t installed Node.js yet, you can download it from here.
npm (Node Package Manager) comes bundled with Node.js and is used to manage dependencies.

Step 2: Create a New React Project To create a new React project with Vite, run the following
command in your terminal:

npm create vite@latest my-react-app --template react

Here:

 my-react-app is the name of your project.

 --template react specifies that you want to use the React template for Vite.

This command will set up a React project powered by Vite.

Step 3: Navigate to the Project Folder Go to your project folder:

cd my-react-app

Step 4: Install Dependencies Install the required dependencies using npm:

npm install

Step 5: Start the Development Server Launch the development server with the following command:

npm run dev

This will start a local development server, and your app will be accessible at http://localhost:5173
(Vite’s default port).

3. What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows developers to write
HTML-like code within JavaScript, making it easy to create React components and describe the UI.
JSX is not valid JavaScript by itself, but it gets transpiled into JavaScript using tools like Babel.

Key Features of JSX:

 HTML-like Syntax: JSX looks very similar to HTML, but it has some differences:

o Tags must be properly closed (e.g., <img /> instead of <img>).

o JavaScript expressions can be embedded within JSX using curly braces {}.

 Embedding JavaScript Expressions: You can insert JavaScript expressions into JSX by
wrapping them in curly braces {}. For example:

const name = 'John';

const greeting = <h1>Hello, {name}!</h1>;

 Class Name: In JSX, class is a reserved keyword in JavaScript, so it’s replaced with className
to define CSS classes.
 const element = <div className="my-class">Hello!</div>;

 Self-Closing Tags: JSX allows tags like <img /> or <input /> to be self-closing.

Example of JSX:

const element = <h1>Hello, world!</h1>;

In the above example, element is a JSX expression that will eventually be transformed into a call to
React.createElement by Babel. React will then render the HTML corresponding to the JSX expression.

4. Creating React Components

React components are the building blocks of React applications. Components can be either function
components or class components. In modern React, function components are preferred due to their
simplicity and the ability to use hooks.

Basic Structure of a React Function Component:

A React function component is simply a JavaScript function that returns JSX.

import React from 'react';

function Header() {

return <h1>Welcome to My React App</h1>;

export default Header;

Example of Multiple Components:

You can create multiple components and use them together in your app. Here’s an example of a
Header and Footer component:

// Header.js

import React from 'react';

function Header() {

return <h1>Welcome to My React App</h1>;

export default Header;

import React from 'react';

function Footer() {

return <footer>© 2024 My Company</footer>;

export default Footer;

Now, you can use these components in your main App.js:

// App.js

import React from 'react';

import Header from './Header';

import Footer from './Footer';

function App() {

return (

<div>

<Header />

<main>

<p>Welcome to the React world!</p>

</main>

<Footer />

</div>

);

export default App;

Conclusion:

In Day 9, you learned:

 The basics of React and why it is a powerful tool for building dynamic UIs.
 How to set up a React project with Vite, an efficient build tool.

 The fundamentals of JSX and how it is used to describe the UI.