2. Understanding React Components and JSX

Learning Objectives

By the end of this chapter, you will be able to do the following:

– Define what exactly components are

– Build and use components effectively

– Utilize common naming conventions and code patterns

– Describe the relation between components and JSX

– Write JSX code and understand why it's used

– Write React components without using JSX code

– Write your first React apps

Introduction

In the previous section, you learned about React in general, what it is and why you could consider using it for building user interfaces. You also learned how to create React projects with the help of npx create-react-app.

In this chapter, you will learn about one of the most important React concepts and building blocks: React as above, components. You will learn that components are reusable building blocks which 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.

What Are Components?

A key concept of React is the usage of so-called components. Components are reusable building blocks which are combined to compose the final user interface. For example, a basic website could be made up of a header that includes a navigation bar and a main section that includes an authentication form.

Figure 2.1 An example authentication screen with navigation bar.

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.

In the header with the navigation bar you will find the following components:

• The navigation items (Login and Profile)
• The Logout button

Below this, the main section displays the following:

• The container that contains the authentication form
• The input elements
• The confirmation button
• A link to switch to the New Account page

Please note that some components are nested inside other...

What Does React Do with All These Components?

If you follow the trail of all components and their import + 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 index.js 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 (index.js) typically looks like this: 

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

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

JSX vs HTML vs Vanilla JavaScript

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 in basically every React project you will explore, no matter whether you are using React for the browser or for 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 start 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...

Outputting Dynamic Content

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!'.

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 a later chapter) to change the content that is displayed (e.g. upon user input or some other event).

Nonetheless, since this chapter is about JSX, it is worth diving into the syntax for outputting dynamic content, even though it's not yet dynamic.

function App() {
  const userName = 'Max';
  return <p>Hi, my name is {userName}!</p>;
};

This example technically still produces static output since userName never changes; but you can already see the syntax for outputting dynamic content...

Summary and Key Takeaways

• React embraces components: reusable building blocks that are combined to define the final user interface
• Components must return renderable content, typically JSX code which 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 characters, when being used inside of JSX code (typically, PascalCase naming is used therefore)
• 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 JSX elements, you...

Apply What You Learned

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 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 it in the previous chapter (i.e., create it via npx create-react-app, run npm start to start the development server) and edit the App.js 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 end, it is up to you what content you want to output...