[Book] The Road to Next: React Primer

Endless Pursuit of Knowledge

I was looking for a book to level up my Next.js game and came across "The Road to Next: Full-Stack Web Development with Next.js 15 and React.js 19 (2025 Edition)" by Robin Wieruch, well-reviewed for his course with the same name.

Robin is an full-stack developer from Germany with a Master's degree in Computer Science. He has also created the popular course "Road to React".

The book is unexpectedly dense howver the author explains its printed in extra large to afford room for annonations and personal notes.

I spent an afternoon going through one of the initial chapters, "React Primer", which gives a basic familarity of React given Next.js is a meta-framework based on it.

Set up

Initalising a Node project and installing React and Next into an empty folder.

npm init -y && npm install next react react-dom

We can now run the application's development server with the npm run dev command after adding a script to the package.json file.

{
    "scripts": {
        "dev": "next dev"
    }
}

Here we will use Next.js in a minimalist approach to focus on learning React and will need to scaffold the layout and page files.

JSX

JSX stands for Javascript XML and is a syntax extention for Javscript created for React. This allows us to mix Javascript expressions with HTML and write dynamic UI using curly braces. Any reference values and functions ca be executed inside curcly braces.

Below is an example of a basic JSX:

export default function Page() {
    const title = "Hello Page"; // Note this variable can be defined outside the React function
    return <h2>{title}</h2>
}

Components

Components are the building blocks of a React application and are re-usable pieces of a UI.

They can be thought of as custom HTML components. Below an example of 2 React components:

function Heading() {
    const title = "Hello World";
    return <h2>{title}</h2>;
}

export default function Page() {
    return {
        <div>
            <Heading />
            <p> Some content ... </p>
        </div>
    };
}

In modern day React, Function Components are the most common way to define components.

Class Components are the older way to define components.

The author perfers to write React components as Arrow functions over Functional decleration

const Heading = () => {
    const title = "Hello World";
    return <h2>{title}</h2>;
}

Props

React components can receive props or properties from their parent components. They are passed the same way as arugments in a functional signature.

// React Component 
const Heading = ({ title, description }) => {
    return (
        <div>
            <h2>{title}</h2>
            <p>{description}</p>
        </div>
    );
}


// Passing props into the Heading component
const myTitle = "Hello World"; 
const myDescription = "Goodbye Mars";
<Heading title={myTitle}> description={myDescription} />

Styling

Styling attribute in JSX expects an object with camelCase CSS proprties. The naming is different from conventional CSS howver the semantics are the same. For larger projects, Tailwind CSS or CSS Modules are recommended.

const Heading= ({ title, description }) => {
    const style = {
        padding: "16px", 
        fontWeight: "bold", // note the camel case
    };

    return (
        <div style={style}>
            <h2>{title}</h2>
        </div>
    )
}

Reactivity

React provides a way to handle reactivity through event handles such as onClick{myFunction}. The event handlers are passed into HTML elements as attributes in JSX.

Below is a basic example using the onClick event handler with Next.js:

'use client'; // requires because Next.js sever side framework

export default function Page() {

    function handleUpVote() {
        console.log("Handle Up Vote!");
    };

    return <button onClick={handleUpVote}> Upvote </button>;
};

State

Event handlers are often used with state to store and update data in a React component. React has a useState hook which is used to add state to a function component.

The hook is used as a function. The first parameter is the initial state value and the second is the functiin to update the state value.

The convention is to name state variables like [something, setSomething]

Here is a basic example with a counter:

'use client';
import { useState } from "react";

export default function Page() {
    const [count, setCount] = useState(0);

    function handleUpVote() {
        setCount(count + 1);
    };

    return (
        <div>
        <button onClick={handleUpVote}> Upvote </button>
        <p>Vote is {count}</p>
        </div>
    );
};

Passing JSX with the Children prop

In React, you can pass in JSX with a children prop. When passing children props, there is a opening and closing tag.

Here is an example below:

export default function Page() {
    ...
    return (
        <div>
            <ExampleComponent>
                <button onClick={handleUpVote}> Upvote </button>
            </ExampleComponent>
    );
};

const ExampleComponent = ({ title, description, children }) => {
    return (
        <div>
            <h2>{title}</h2>
            <p>{descrption}</p>
            {children}
        </div>
    );
};

Imports

To keep a codebase maintainable, it is best to extract components in a separate files and import them as required.

// Heading.jsx
const Heading ({ title, description }) => {
    return (
        <div>
            <h2>{title}</h2>
            <p>{descrption}</p>
        </div>
    );
}

export { Heading }; // named export

// page.jsx

import { Heading } from "../components/Heading";

Outro

The chapter "React Primer" was a good refresher on React and will be used as a foundation for the rest of the book.