React Introduction

beginner

Part of React Fundamentals

Theory

React is a JavaScript library for building user interfaces, developed and maintained by Facebook (Meta). Unlike a full framework, React focuses solely on the view layer, making it flexible and easy to integrate with other libraries. It was first released in 2013 and has since become one of the most dominant tools in front-end development.

Single-Page Application vs Multi-Page Application

In a traditional Multi-Page Application (MPA), every time the user clicks a link or navigates, the browser sends a new request to the server and reloads the entire page. This leads to a slower, less fluid user experience.

A Single-Page Application (SPA), on the other hand, loads a single HTML page initially, and then all subsequent navigation happens dynamically on the client. React updates only the parts of the page that actually change, without requiring a full page reload. This gives a much faster, app-like feel.

The Virtual DOM

The Virtual DOM is one of React's most important concepts. Instead of directly manipulating the real browser DOM (which is slow), React maintains a lightweight JavaScript object called the Virtual DOM. When state changes occur, React:

Creates a new Virtual DOM tree
Compares it with the previous one using a diffing algorithm
Calculates the minimal number of changes needed
Applies those changes to the real DOM in a single batch

This process, called reconciliation, is what makes React so fast and efficient.

JSX Syntax

JSX stands for JavaScript XML. It is a syntax extension that allows you to write HTML-like code directly inside JavaScript. While not required (you can use React.createElement), JSX makes React code much more readable and intuitive.

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

JSX gets transpiled by tools like Babel into regular JavaScript function calls.

Setting Up a React Project

There are two popular ways to start a React project:

Vite (recommended for new projects):

Create React project with Vite

bash

Create React App (traditional approach):

Create React project with CRA

bash

Vite is significantly faster than CRA for both development builds and hot module replacement. Most developers now prefer Vite.

Project Structure

A typical React project created with Vite has this structure:

my-app/
├── index.html
├── package.json
├── vite.config.js
├── src/
│   ├── main.jsx       // Entry point
│   ├── App.jsx        // Root component
│   ├── App.css
│   └── index.css
└── public/

The src/ folder is where you spend most of your time writing components, styles, and logic.

React vs Other Frameworks

React is often compared to Angular and Vue.js:

React: Library focused on UI. Gives you more freedom but requires you to make more decisions.
Angular: Full framework with built-in routing, HTTP client, forms, and more. Steeper learning curve.
Vue: Progressive framework that is easier to learn than Angular but more opinionated than React.

Why Component-Based Architecture

React applications are built out of components — reusable, self-contained pieces of UI. Each component manages its own state and renders its own markup. This approach:

Encourages code reuse
Makes testing easier
Improves maintainability
Allows teams to work on different components in parallel

A component can be as small as a button or as large as an entire page. Components compose together to form complex user interfaces.

Always think in components. Break your UI into a hierarchy of smaller, reusable pieces. This is the React way of thinking.

Practical Examples

Example 1: Hello World in React

jsx

Example 2: JSX with JavaScript expressions

jsx

JSX expressions use single curly braces {} to embed JavaScript values. Double curly braces {{}} are for passing objects like inline styles.

Exercises

Your First React Component

easy

Create a functional component called `Welcome` that accepts a `name` prop and renders 'Welcome, [name]!' inside an h1 tag. Then render it in App.

Expected Output:

Welcome, Student! rendered as an h1

Render a List with JSX

easy

Create a component that renders an unordered list of three fruits. Use an array and the map function to generate the list items dynamically.

Expected Output:

A bulleted list showing Apple, Banana, Cherry

Fix the JSX Errors

medium

The following component has several JSX errors. Fix them: missing keys, wrong attribute names, and improper nesting.

Expected Output:

A valid component with a single root element, correct className, and properly closed img tag.

Mini Quiz

Mini Project

Mini Project: Personal Portfolio Card

Build a personal portfolio card component that displays a person's name, title, a short bio, and a list of skills. Use JSX expressions, proper component structure, and CSS classes.

Requirements:

Bonus Challenge

Add a profile image prop and display it. Also add a socialLinks array prop with name and url objects.