A fairly recent version of Node.js should already be installed. The Node Package Manager (npm) also needs to be installed (it should come with Node.js). For more information on how to install Node.js, please check out their official website: https://nodejs.org/.

We are going to use Visual Studio Code (VS Code) for the guides in this book, but everything should work similarly in any other editor. For more information on how to install VS Code, please refer to their official website: https://code.visualstudio.com.

In this book, we use the following versions:

• Node.js v22.14.0
• npm v10.9.2
• Visual Studio Code v1.97.2

The versions mentioned in the preceding list are the ones used in the book. While installing a newer version should not be an issue, please note that certain steps might work differently on a newer version. If you are having an issue with the code and steps provided in this book, please try using the mentioned versions...

Before we start learning how to set up a React project, let’s revisit the three fundamental principles of React. These principles allow us to easily write scalable web applications.

React is based on three fundamental principles:

• Declarative: Instead of telling React how to do things, we tell it what we want it to do. For example, if we change data, we don’t need to tell React which components need to be re-rendered. That would be complex and error-prone. Instead, we just tell React that data has changed and all components using this data will be efficiently updated and re-rendered for us. React takes care of the details so that we can focus on the tasks at hand to easily develop our web application.
• Component-based: React encapsulates components that manage their own state and views and then allows us to compose them in order to create complex user interfaces.
• Learn once, write anywhere: React does not make assumptions...

React always strives to make the developer experience as smooth as possible while ensuring to keep it performant enough, without the developer having to worry too much about how to optimize performance. However, throughout the years of using React, a couple of problems have been identified.

Let’s now take a look at these problems in the following subsections.

Confusing classes

In the past, we had to use class components with special functions called life cycle methods, such as...

In this book, we are going to use VS Code as our code editor. Feel free to use whichever editor you prefer, but keep in mind that the extensions used and settings configured may be slightly different in the editor of your choice.

Let’s now install VS Code and some useful extensions, and then continue setting up all the tools needed for our development environment.

Installing VS Code and extensions

Before we can get started developing and setting up the other tools, we need to set up our code editor, by following these steps:

1. Download VS Code for your operating system from the official website (at the time of writing, the URL is https://code.visualstudio.com/). We are going to use version 1.97.2 in this book.
2. After downloading and installing the application, open it, and you should see the following window:

Figure 1.1 – A fresh installation of Visual Studio Code (on macOS)

3. To...

As we learned earlier in this chapter, React Hooks solve many problems, especially in larger web applications. Hooks were added in React 16.8, and they allow us to use state, and various other React features, without writing a class. In this section, we will start by defining a class component, and then we will write the same component as a function component using Hooks. We will then discuss the advantages of Hooks and how to migrate from classes to a Hook-based solution.

Starting with a class component

Let’s start by creating a traditional React class component, which lets us enter a name; this is then displayed in our app:

1. Copy the Chapter01_1 folder to a new Chapter01_2 folder, as follows:

   $ cp -R Chapter01_1 Chapter01_2
   

   On macOS, it is important to run the command with a capitalized -R flag, not -r. The -r flag deals differently with symlinks and causes the node_modules/ folder to break. The...

In this first chapter of the book, we started by learning about the fundamental principles of React, and which types of components it provides. We then moved on to learn about common problems with class components, using existing features of React, and how they break the fundamental principles. Next, we implemented a simple application using class components and function components with Hooks, in order to be able to compare the differences between the two solutions. As we found out, function components with Hooks are a much better fit for React’s fundamental principles; they do not suffer from the same problems as class components, and they make our code much more concise and easy to understand! The React team now even recommends using function components instead of class components, making function components the state-of-the-art way to write React code. After reading this chapter, the basics of React and React Hooks are clear. We can now move on to learn about Hooks...

To recap what we have learned in this chapter, try to answer the following questions:

1. What are React’s three fundamental principles?
2. What are the two types of components in React?
3. What are the problems with class components in React?
4. What is the problem when using higher-order components in React?
5. Which tool can we use to set up a React project, and what is the command that we need to run to use it?
6. What do we need to do if we get the following error with class components: Uncaught TypeError: Cannot read properties of undefined (reading 'setState')?
7. How do we use React state with Hooks?
8. What are the advantages of using function components with Hooks, in comparison to class components?
9. Do we need to replace all class components with function components using Hooks when updating React?

If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following links:

• Information about function components: https://react.dev/reference/react/Component
• RFC for React Hooks: https://github.com/reactjs/rfcs/blob/main/text/0068-react-hooks.md
• Destructuring: https://exploringjs.com/es6/ch_destructuring.html
• Template strings: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
• Ternary operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator

Learn more on Discord

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/wnXT0