We use the following tools in this chapter: 

• Browser: A modern browser such as Google Chrome.
• Terminal: We will use a terminal to execute commands to create a React project. The default terminal available in your operating system will work fine.
• Visual Studio Code: We need a code editor to create our first React component. Visual Studio Code is a popular editor that we’ll use throughout this book. This can be downloaded and installed from https://code.visualstudio.com.
• Node.js and npm: Node.js will be required to build our React app and run it on a development server. npm is a package manager that allows us to easily install libraries into our app. These tools come together and can be downloaded and installed from https://nodejs.org/en/download.

All the code snippets in this chapter can be found online at https://github.com/PacktPublishing/Learn-React-with-TypeScript-Third-Edition/tree/main/Chapter01. 

Before we start creating our first React component, in this section, we will understand what React is and explore some of its benefits.

React is an incredibly popular frontend library. We have already mentioned that Meta uses React for Facebook, but many other famous companies use it too, such as Netflix, Uber, and Airbnb. React’s popularity has resulted in a huge ecosystem surrounding it that includes great tools, popular libraries, and many experienced developers.

One reason for React’s popularity is that it is simple. This is because it focuses on doing one thing very well – providing a powerful mechanism for building UI components. Components are pieces of the UI that can be composed together to create a frontend. Furthermore, components can be reusable so that they can be used on different screens or even in other apps.

React’s narrow focus means it can be incorporated into an existing app, even if it uses...

In this section, we will create a React project and configure Visual Studio Code to work optimally with it. We will also cover how to run a React app in development mode and also how to produce a production build.

We will create a React project using Vite, a popular build tool and development server for React apps. Carry out the following steps:

1. In a terminal, in a folder of your choice, execute the following command to instruct Vite to create a project:

   npm create vite@latest

2. A prompt for the project name appears. The project name will be the folder name containing the project code. So, enter a name of your choice and press Enter.

Figure 1.1 – Creating a Vite project

3. A prompt now appears for the framework for the project. Select React by using the down arrow key to move to React and press Enter.

Figure 1.2 – Selecting the React framework

4. Lastly, the variant...

In this section, we will explore the entry point of the React app created in the last section and how it is loaded into the HTML page. We will then learn about the React component tree and how a component is defined.

Understanding the React entry point

The entry point of this React app is in the main.jsx file in the src folder. Open this file and inspect its contents. It contains a call to React’s createRoot function as follows:

createRoot(document.getElementById(‘root’)).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Here’s an explanation of this code:

• As the name suggests, createRoot creates a root in the HTML document for the React components. createRoot takes in a DOM element for where to place the React components, which is the element that has the ID of ‘root’ in this case.
• createRoot returns an object containing...

In this section, we will create a React component and reference this within the App component.

Creating a basic Alert component

We are going to create a component that displays an alert, which we will simply call Alert. It will consist of an icon, a heading, and a message.

Note

A React component name must start with a capital letter. If a component name starts with a lowercase letter, it is treated as a DOM element and won’t render properly.

Carry out the following steps to create the component in the project:

1. Create a new file in the src folder called Alert.jsx.

Note

The filename for component files isn’t important to React or the React transpiler. It is common practice to use the same name as the component, either in Pascal or snake case. However, the file extension must be .js or .jsx for React transpilers to recognize these as React components.

2. Open the Alert.jsx file and enter the following code in it...

Currently, the Alert component is pretty inflexible. For example, the alert consumer can’t change the heading or the message. At the moment, the heading or the message needs to be changed within Alert itself. Props solve this problem, and we will learn about them in this section.

Note

Props is short for properties. The React community often refers to these as props, so we will do so in this book.

Understanding props

The props parameter is an optional parameter that is passed into a React component. This parameter is an object containing the properties of our choice, allowing a parent component to pass data. The following code snippet shows a props parameter in a ContactDetails component:

function ContactDetails(props) {
  console.log(props.name);
  console.log(props.email);
  ...
}

The props parameter contains the name and email properties in the preceding code snippet.

Note

The parameter doesn’t have to...

React component state is a special variable that may change over the lifecycle of a component. In this section, we’ll learn about the state variable and use it within our Alert component. We will use state to allow the alert to be closed by the user.

Understanding state

There isn’t a predefined list of states; we define what’s appropriate for a given component. Some components won’t even need any state – the Alert component hasn’t required a state for the requirements so far.

The state is a key part of making a component interactive. When a user interacts with a component, the component’s output may need to change. A change to the state causes the component to refresh, more often referred to as re-render.

The state is defined using a useState function from React. The useState function is one of React’s Hooks. There is a whole chapter on React Hooks in Chapter 3, Using React Hooks.

The syntax for useState...

Events are another key part of allowing a component to be interactive. In this section, we will understand what React events are and how to use events on DOM elements. We will also learn how to create our own React events.

We will continue to expand the Alert component’s functionality as we learn about events. We will start by finishing the close button implementation before creating an event for when the alert has been closed.

Understanding events

Browser events happen as the user interacts with DOM elements. For example, clicking a button raises a click event from that button.

Logic can be executed when an event is raised. For example, an alert can be closed when its close button is clicked. A function called an event handler (sometimes referred to as an event listener) can be registered on an element for an event that contains the logic to execute when that particular event happens.

Note

See the following link for more information on browser...

React developer tools is a browser extension available for Chrome, Firefox, and Edge. The tools allow React apps to be inspected and debugged. In this section, we are going to install and use these tools on the Alert component we have implemented in this chapter.

The links to the extensions are as follows:

• Chrome: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
• Firefox: https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/
• Edge: https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil

Follow the instructions in the relevant link to install the extension in your browser. You may need to reopen the browser for the tools to be available.

Using the Components tool

The first tool we are going to explore is the Components tool. It allows you to inspect the current props and state of a component. Carry out the following steps...

We now understand that React is a popular library for creating component-based frontends. In this chapter, we created an Alert component using React.

Component output is declared using a mix of HTML and JavaScript called JSX. JSX needs to be transpiled into JavaScript before it can be executed in a browser.

Props can be passed into a component as JSX attributes. This allows consumers of the component to control its output and behavior. A component receives props as an object parameter. The JSX attribute names form the object parameter property names. We implemented a range of props in this chapter in the Alert component.

Events can be handled to execute logic when the user interacts with the component. We created an event handler for the close button click event in the Alert component.

State can be used to re-render a component and update its output. The state is defined using the useState Hook and is often updated in event handlers. We created a state for whether...

Answer the following questions to reinforce what you have learned in this chapter:

1. What is wrong with the following component definition?

   export function important() {
     return <div>This is really important!</div>;
   }

2. Component props are passed into a component as follows:

   <ContactDetails name=”Fred” email=”[email protected]” />

   The component is then defined as follows:

   export function ContactDetails({ firstName, email }) {
     return (
       <div>
         <div>{firstName}</div>
         <div>{email}</div>
       </div>
     );
   }

   The name Fred isn’t output though. What is the problem?

3. What is the initial value of the loading state defined here?

   const [loading, setLoading] = useState(true);

4. What is wrong with how the state is set in the following component?

   export...

Here are the answers to the preceding questions:

1. The problem with the component definition is that its name is in lowercase. React functions must be named with an uppercase first character:

   export function Important() {
     ...
   }

2. The problem is that a name prop is passed rather than firstName. Here’s the corrected JSX:

   <ContactDetails firstName=”Fred” email=”[email protected]” />

3. The initial value of the loading state is true.
4. The state isn’t updated using the state setter function. Here’s the corrected version of the state being set:

   export function Agree() {
     const [agree, setAgree] = useState();
     return (
       <button onClick={() => setAgree(true)}>
         Click to agree
       </button>
     );
   }

5. The problem is that clicking the button will cause an error if onAgree isn’t passed...

To join the Discord community for this book – where you can share feedback, ask questions to the author, and learn about new releases – follow the QR code below:

https://packt.link/GxSkC

To join the Discord community for this book – where you can share feedback, ask questions to the author, and learn about new releases – follow the QR code below:

https://packt.link/GxSkC