Book Image

Designing React Hooks the Right Way

By : Fang Jin
Book Image

Designing React Hooks the Right Way

By: Fang Jin

Overview of this book

React hook creates a unique solution for using states in function components to orchestrate UI communication. They provide you with an easy interface to write custom data management solutions with low development and maintenance costs. Understanding how Hooks are designed enables you to use them more effectively, and this book helps you to do just that. This book starts with a custom-crafted solution to reveal why Hooks are needed in the first place. You will learn about the React engine and discover how each built-in Hook can manage a persistent value by hooking into it. You will walk through the design and implementation of each hook with code so that you gain a solid understanding. Finally, you'll get to grips with each Hook's pitfalls and find out how to effectively overcome them. By the end of this React book, you'll have gained the confidence to build and write Hooks for developing functional and efficient web applications at scale.
Table of Contents (12 chapters)

To get the most out of this book

One of the goals of this book is for you to get hands-on experience using React and Hooks. Following are a couple of options that you can follow to get the most out of the content before you start.

Refresh your knowledge of React

If you haven't used React lately or are not familiar with its cutting-edge features, I recommended you jump to Chapter 10, Building a Website with React, to get an overview of the three building blocks that React relies upon to build a website: JavaScript, CSS, and HTML.

While reading the book, feel free to visit this chapter often if you run into new syntax that you are not familiar with, or you simply want to gain more insights into how each building block is utilized in React.

Use a browser without building the code

If you don't have a local environment to work with the code or you simply don't want to build the code, you can access the examples from an online server at https://codepen.io/windmaomao/pen/ExvYPEX. You should get Hello World printed on your screen in no time. Each chapter comes with a couple of playground links that you can click to follow. They appear as follows in the book:

Playground – Hello World

Feel free to play with this online example at https://codepen.io/windmaomao/pen/ExvYPEX.

Build the code yourself

If you are a hands-on person and would like to follow the code step by step in each chapter, you need to have React installed in one of your projects. Instructions to set up a React project from scratch are as follows.

npm

Visit the Node.js website, https://nodejs.org, to grab the latest versions of Node.js and npm. Pick the right version for your operating system and install it. To find out if everything has been installed properly, open a terminal, and run the following command:

node -v

If you see a version number returned by the preceding command, Node.js has been installed.

Create React App

You can get your React project up and running quickly by using the following command:

npx create-react-app my-app

Replace my-app with your desired application name. Once you have the projects ready, you can go into the my-app folder and launch it:

cd my-app
yarn start

That's it, you should see an application on your local computer. Now you can try the source code out by pasting our code over your project and compiling it locally.