In the previous chapter, you learned about React in general, what it is, and why you should consider using it for building user interfaces. You also learned how to create React projects with the help of Vite, by running npm create vite@latest <your-project-name>.

In this chapter, you will learn about one of the most important React concepts and building blocks. You will learn that components are reusable building blocks that are used to build user interfaces. In addition, JSX code will be discussed in greater detail so that you will be able to use the concept of components and JSX to build your own first basic React apps.

A key concept of React is the usage of so-called components. Components are reusable building blocks that are combined to compose the final user interface. For example, a basic website could be made up of a sidebar that includes navigation items and a main section that includes elements for adding and viewing tasks.

Figure 2.1: An example task management screen with sidebar and main area

If you look at this example page, you might be able to identify various building blocks (i.e., components). Some of these components are even reused:

• The sidebar and its navigation items
• The main page area
• In the main area, the header with the title and due date
• A form for adding tasks
• A list of tasks

Please note that some components are nested inside other components—i.e., components are also made up of other components. That’s a key feature of React and similar libraries.

Why Components?

No matter...

If you follow the trail of all components and their import and export statements to the top, you will find a root.render(...) instruction in the main entry script of the React project. Typically, this main entry script can be found in the main.jsx file, located in the project’s src/ folder. This render() method, which is provided by the React library (to be precise, by the react-dom package), takes a snippet of JSX code and interprets and executes it for you.

The complete snippet you find in the root entry file (main.jsx) typically looks like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App.jsx';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

The exact code you find in your new React project might look slightly different.

It may, for instance, include...

As mentioned above, React projects typically contain lots of JSX code. Most custom components will return JSX code snippets. You can see this in all the examples shared thus far, and you will see it in basically every React project you explore, no matter whether you are using React for the browser or other platforms like react-native.

But what exactly is this JSX code? How is it different from HTML? And how is it related to vanilla JavaScript?

JSX is a feature that’s not part of vanilla JavaScript. What can be confusing, though, is that it’s also not directly part of the React library.

Instead, JSX is syntactical sugar that is provided by the build workflow that’s part of the overall React project. When you start the development web server via npm run dev or build the React app for production (i.e., for deployment) via npm run build, you kick off a process that transforms this JSX code back to regular JavaScript instructions...

Thus far, in all these examples, the content that was returned was static. It was content like <p>Hello World!</p>—which of course is content that never changes. It will always output a paragraph that says, 'Hello World!'.

But most websites, of course, need to output dynamic content that may change (e.g., due to user input). Similarly, you’ll have a hard time finding lots of websites without any images.

Thus, as a React developer, it’s important to know how to output dynamic content (and what “dynamic content” actually means) and how to display images in a React app.

Outputting Dynamic Content

At this point in the book, you don’t yet have any tools to make the content more dynamic. To be precise, React requires that state concept (which will be covered in Chapter 4, Working with Events and State) to change the content that is displayed (e.g., upon user input or some other event...

As you work with React and learn more and more about it, and as you dive into more challenging React projects, you will most likely come up with one very common question: When should I split a single React component into multiple separate components?

As mentioned earlier in this chapter, React is all about components, and it is therefore very common to have dozens, hundreds, or even thousands of React components in a single React project.

When it comes to splitting a single React component into multiple smaller components, there is no hard rule you must follow. As mentioned earlier, you could put all your UI code into one single, large component. Alternatively, you could create a separate custom component for every single HTML element and piece of content that you have in your UI. Both approaches are probably not that great. Instead, a good rule of thumb is to create a separate React component for every data entity that can be identified.

• React embraces components: reusable building blocks that are combined to define the final user interface
• Components must return renderable content – typically, JSX code that defines the HTML code that should be produced in the end
• React provides a lot of built-in components: besides special components like <>…</>, you get components for all standard HTML elements
• To allow React to tell custom components apart from built-in components, custom component names have to start with capital letters when being used in JSX code (typically, PascalCase naming is used)
• JSX is neither HTML nor a standard JavaScript feature – instead, it’s syntactical sugar provided by build workflows that are part of all React projects
• You could replace JSX code with React.createElement(…) calls, but since this leads to significantly more unreadable code, it’s typically avoided
• When using...

With this and the previous chapter, you have all the knowledge you need to create a React project and populate it with some first, basic components.

Below, you’ll find your first two practical activities for this book.

Activity 2.1: Creating a React App to Present Yourself

Suppose you are creating your personal portfolio page, and as part of that page, you want to output some basic information about yourself (e.g., your name or age). You could use React and build a React component that outputs this kind of information, as outlined in the following activity.

The aim is to create a React app as you learned in the previous chapter (i.e., create it via npm create vite@latest <your-project-name> and run npm run dev to start the development server) and edit the App.jsx file such that you output some basic information about yourself. You could, for example, output your full name, address, job title, or other kinds of information. In the...