Introducing React and React Hooks

React is a JavaScript library that can be used to build efficient and extensible web applications. React was developed by Facebook, and is used in many large-scale web applications, such as Facebook, Instagram, Netflix, and WhatsApp Web.

In this book, we are going to learn how to build complex and efficient user interfaces with React, while keeping the code simple and extensible. Using the new paradigm of React Hooks, we can greatly simplify dealing with state management and side effects in web applications, ensuring the potential for growing and extending the application later on. We are also going to learn about React context and React Suspense, as well as how they can be used with Hooks. Afterward, we are going to learn how to integrate Redux and MobX with React Hooks. Finally, we are going to learn how to migrate from existing React class...

Technical requirements

A fairly recent version of Node.js should already be installed (v11.12.0, or higher). The npm package manager for Node.js also needs to be installed.

The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter01.

Check out the following video to see the code in action:

http://bit.ly/2Mm9yoC

Please note that it is highly recommended that you write the code on your own. Do not simply run the code examples that were previously provided. It is important to write the code yourself in order to learn and understand it properly. However, if you run into any issues, you can always refer to the code example.

Now, let's get started with the chapter.

Principles of React

Before we start learning about React Hooks, we are going to learn about the three fundamental principles of React. These principles allow us to easily write scalable web applications. The fundamental principles are important to know, as they will help us to understand how and why Hooks fit into the React ecosystem.

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. As a result, we can easily design our applications and React will efficiently update and render just the right components when the data changes. For example, the following code, which duplicates strings in an array is imperative, which is the opposite of declarative:

const input = ['a', 'b', 'c']
let result = []
for (let i = 0; i < input.length; i++) {
    result.push(input[i] +...

Motivation for using React Hooks

React's three fundamental principles make it easy to write code, encapsulate components, and share code across multiple platforms. Instead of reinventing the wheel, React always tries to make use of existing JavaScript features as much as possible. As a result, we are going to learn software design patterns that will be applicable in many more cases than just designing user interfaces.

React always strives to make the developer experience as smooth as possible, while ensuring that it is kept 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 take a look at these problems in detail in the following sections.

...

Getting started with React Hooks

As we can see, React Hooks solve many problems, especially of 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 are going to start out by initializing a project with create-react-app, then we will define a class component, and finally we will write the same component as a function component using Hooks. By the end of this section, we will have talked about the advantages of Hooks, and how we would go about migrating to a Hook-based solution.

Initializing a project with create-react-app

To initialize a React project, we can use the create-react-app tool, which sets up the environment...

Overview of various Hooks

As we learned in the previous section, Hooks provide a direct API to all React concepts. Furthermore, we can define our own Hooks in order to encapsulate logic without having to write a higher-order component, which causes a wrapper hell. In this section, we are going to give an overview of various Hooks, which we are going to learn about throughout the book.

Hooks provided by React

React already provides various Hooks for different functionalities. There are three basic Hooks, and a handful of additional Hooks.

Basic Hooks

Basic Hooks provide...

Summary

In this first chapter of the book, we started out by learning the fundamental principles of React and which types of components it provides. We then moved on to learning about common problems with class components, and 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, as they do not suffer from the same problems as class components, and they make our code much more
concise and easy to understand! Finally, we got our first glimpse of the various Hooks that we are going to learn about throughout this book. After this chapter, the basics of React and React Hooks...

Questions

To recap what we have learned in this chapter, try answering 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 of 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: TypeError: undefined is not an object (evaluating 'this.setState')?
7. How do we access and set React state using 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?
10. What are the three basic Hooks that are provided by React?

...

Further reading

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

• Create React App on GitHub: https://github.com/facebook/create-react-app#create-react-app--
• RFC for React Hooks: https://github.com/reactjs/rfcs/blob/master/text/0068-react-hooks.md
• Handling input with React: https://reactjs.org/docs/forms.html
• State and life cycle in React with class components: https://reactjs.org/docs/state-and-lifecycle.html
• Destructuring: http://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