Writing Your First Application with React Hooks

After learning about the State Hook in depth, we are now going to make use of it by creating a blog application from scratch. Throughout this chapter, we are going to learn how to structure React apps in a way that scales well, how to use multiple Hooks, where to store state, and how to solve common use cases with Hooks. At the end of this chapter, we are going to have a basic blog application, where we can log in, register, and create posts.

The following topics will be covered in this chapter:

• Structuring React projects in a scalable way
• Implementing static React components from a mock-up
• Implementing stateful components with Hooks

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 in the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter03.

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 previously provided code examples. It is important that you write the code yourself in order to be able to learn and understand properly. However, if you run into any issues, you can always refer to the code example.

Now, let's get started with the chapter.

Structuring React projects

After learning about the principles of React, how to use the useState Hook, and how Hooks work internally, we are now going to make use of the real useState Hook in order to develop a blog application. First, we are going to create a new project, and structure the folders in a way that will allow us to scale the project later on. Then, we are going to define the components that we are going to need in order to cover the basic features of a blog application. Finally, we are going to use Hooks to introduce state to our application! Throughout this chapter, we are also going to learn about JSX, and new JavaScript features that have been introduced in ES6, up to ES2018.

Folder structure

There are many...

Implementing static components

Before we start adding state via Hooks to our blog application, we are going to model the basic features of our application as static React components. Doing this means that we have to deal with the static view structure of our application.

It makes sense to deal with the static structure first, so as to avoid having to move dynamic code to different components later on. Furthermore, it is easier to deal only with Hypertext Markup Language (HTML) and CSS first—helping us to get started with projects quickly. Then, we can move on to implementing dynamic code and handling state.

Doing this step by step, instead of implementing everything at once, helps us to quickly get started with new projects without having to think about too much at once, and lets us avoid having to restructure projects later!

...

Implementing stateful components with Hooks

Now that we have implemented the static structure of our application, we are going to add useState Hooks to it, in order to be able to handle state and dynamic interactions!

Adding Hooks for the users feature

To add Hooks for the users feature, we are going to have to replace the static user value with a State Hook. Then, we need to adjust the value when we log in, register and log out.

Adjusting UserBar

Recall that when we created the UserBar component, we statically defined the user value. We are now going to replace this value...

Summary

In this chapter, we developed our own blog application from scratch! We started with a mock-up, then created static components to resemble it. Afterward, we implemented Hooks, to allow for dynamic behavior. Throughout the chapter, we learned how to deal with local and global states, using Hooks. Furthermore, we learned how to use multiple Hooks, and in which components to define Hooks and store state. We also learned how to solve common use cases, such as handling input fields with the use of Hooks.

In the next chapter, we are going to learn about the useReducer Hook, which allows us to deal with certain state changes more easily. Furthermore, we are going to learn about the useEffect Hook, which allows us to run code with side effects.

Questions

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

1. What is the best practice for folder structures in React?
2. Which principle should we use when splitting up React components?
3. What does the map function do?
4. How does destructuring work, and when do we use it?
5. How does the spread operator work, and when do we use it?
6. How do we deal with input fields using React Hooks?
7. Where should local State Hooks be defined?
8. What is global state?
9. Where should global State Hooks be defined?

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:

• Official docs on Thinking in React: https://reactjs.org/docs/thinking-in-react.html
• Handling input fields with React: https://reactjs.org/docs/forms.html