React Basics: Library, SPA, Rendering, Components, JSX and Props.

React as a JavaScript Library

React is a JavaScript library mainly used for building user interfaces. A library provides reusable code that we can use whenever we need it. The main difference between a library and a framework is control. In a library, we call the library when we need it, but in a framework, the framework provides the overall structure and controls the flow of the application.

For example, Axios is a library used for making HTTP requests. We decide when to call it:

axios.get("https://example.com/users");

A real-world example is a toolbox. We take a particular tool whenever we need it. A framework is more like a construction company that follows a predefined process and structure for building a house.

React and Single Page Applications

React is commonly used to build Single Page Applications (SPA). In a traditional website, clicking a link can request a new HTML page from the server and reload the browser page. In a React SPA, different parts of the UI can be updated without requiring a full browser page reload.

For example, in an online shopping application, when the user adds a product to the cart, React can update the cart count without refreshing the complete page. This makes the application feel more like a desktop or mobile application.

React Components

A component is a reusable building block of a React application's UI. Instead of creating the complete website in one large file, we can divide it into smaller components such as Navbar, ProductCard, Sidebar and Footer.

function Welcome() {
    return <h1>Welcome to my website</h1>;
}

function App() {
    return (
        <div>
            <Welcome />
        </div>
    );
}

Here, Welcome is a component. We can reuse it wherever we need it.

Components are useful because the same UI structure can be reused with different data. For example, a ProductCard component can be used for many different products.

JSX Expressions

JSX allows us to write HTML-like code inside JavaScript. A JSX expression is JavaScript code written inside curly braces {}.

function App() {
    let name = "Abimanyu";

    return <h1>Hello {name}</h1>;
}

Here {name} is a JSX expression. React evaluates the JavaScript expression and displays its value.

We can also use calculations and conditions:

function App() {
    let a = 10;
    let b = 20;

    return (
        <div>
            <h1>{a + b}</h1>
            <p>{a > b ? "A is bigger" : "B is bigger"}</p>
        </div>
    );
}

Expressions produce values, so they can be used inside JSX. Statements such as normal if statements cannot be directly placed inside JSX. A ternary operator can be used when a condition needs to produce a value.

Rendering in React

Rendering means React takes a component and creates or updates the UI displayed in the browser.

For example:

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

React renders this component and the browser displays Hello World.

In a modern React application, we commonly use createRoot():

import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")).render(
    <App />
);

The .render() method tells React which component should be displayed inside the root DOM element.

When the state of a component changes, React renders the component again and determines which parts of the UI need to be updated.

Props

Props, short for properties, are used to pass data from a parent component to a child component.

function Student(props) {
    return <h2>Name: {props.name}</h2>;
}

function App() {
    return (
        <Student name="Abimanyu" />
    );
}

Here, name="Abimanyu" is a prop passed from App to Student.

Props are similar to arguments passed to a JavaScript function:

function student(name) {
    console.log(name);
}

student("Abimanyu");

In React, we can pass different types of data through props, such as strings, numbers, arrays, objects and even functions.

Props Destructuring

Instead of accessing every value through props, we can use JavaScript destructuring.

Without destructuring:

function Student(props) {
    return (
        <div>
            <h2>{props.name}</h2>
            <p>{props.age}</p>
        </div>
    );
}

With destructuring:

function Student({ name, age }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>{age}</p>
        </div>
    );
}

Both examples work in the same way. Destructuring simply makes the code shorter and easier to read.

Props Children

children is a special prop in React. It contains the content placed between the opening and closing tags of a component.

For example:

function Box(props) {
    return <div>{props.children}</div>;
}

function App() {
    return (
        <Box>
            <h1>Hello</h1>
            <p>Welcome to my website</p>
        </Box>
    );
}

The content inside <Box>...</Box> becomes props.children.

We can also destructure children:

function Box({ children }) {
    return (
        <div className="box">
            {children}
        </div>
    );
}

This is useful when creating reusable components such as cards, boxes, buttons, layouts and modal components.

For example:

function Card({ title, children }) {
    return (
        <div className="card">
            <h2>{title}</h2>
            {children}
        </div>
    );
}

We can use the same component with different content:

<Card title="Profile">
    <p>Name: Abimanyu</p>
    <p>Age: 21</p>
</Card>

<Card title="Contact">
    <p>Email: [e-mail]</p>
    <button>Contact Me</button>
</Card>

Here, title is a normal prop, while children contains the content written inside the Card component.