Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Designing React Hooks the Right Way

You're reading from   Designing React Hooks the Right Way Explore design techniques and solutions to debunk the myths about adopting states using React Hooks

Arrow left icon
Product type Paperback
Published in Jan 2022
Publisher Packt
ISBN-13 9781803235950
Length 278 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Fang Jin Fang Jin
Author Profile Icon Fang Jin
Fang Jin
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

Preface 1. Chapter 1: Introducing the Function Component 2. Chapter 2: Crafting States in Functions FREE CHAPTER 3. Chapter 3: Hooking into React 4. Chapter 4: Use State to Jumpstart Components 5. Chapter 5: Use Effect to Handle Side Effects 6. Chapter 6: Use Memo to Boost Performance 7. Chapter 7: Use Context to Cover an Area 8. Chapter 8: Use Ref to Hide Stuff 9. Chapter 9: Use Custom Hooks to Reuse Logic 10. Chapter 10: Building a Website with React 11. Other Books You May Enjoy

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.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image