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

Now, let's get started with the chapter.

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] +...

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.

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.

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

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.

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

Basic Hooks provide...

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

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?

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