Advanced React

Now that we’ve seen the basics and built a couple larger apps, let’s go a bit deeper into how things work, and cover some new areas of this framework to step up your React game.

State Management

TODO

Understanding Effects

TODO

Context

TODO

Routing

TODO

Styles

TODO

Animation

TODO

The Lesser Well-Known Hooks

We’ve seen the State hook and the Effect hook and the Context hook. There are others that are built-in:

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

See the reference documentation for these hooks. If you are looking for more, check out the Rooks project which has dozens of good ones to add to your apps.

Building Your Own Hooks

TODO

Building and Packaging Apps

React apps are large, and while you could conceivably write the whole app in an HTML file, don’t. Instead, you’ll want to use a toolchain. The most common ones are:

Create React App (CRA): Good for single-page apps.
Next.js: Does server-side rendering.
Gatsby: Good for static sites that just deliver content.

Each of these will create an entire project infrastructure that includes starter code, a git repo, a Node.js set up, a way to optimize and package up the app, making use of WebPack or something similar. You might not have to worry too much about the packaging, except when you are including some massive libraries that allow you to be more selective about which parts of those libraries you want to bring in.