 Resources from Elijah Manor in 2021

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

[create-react-app version 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) added a lot of new features. One of the new features is added the [svgr](https://github.com/smooth-code/svgr) webpack loader to wrap SVGs in React components as a named export. This let’s you either grab the filename from the default export or grab a wrapped SVG component depending on your needs.

Add SVGs as React Components with Create React App 2.0

[create-react-app version 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) added a lot of new features. One of the new features is upgrading to [Babel Version 7](https://babeljs.io/blog/2018/08/27/7.0.0#jsx-fragment-support), which enables the Short Syntax of [React Fragments](https://reactjs.org/docs/fragments.html#short-syntax). Fragments have been a feature of React since version 16.2, but the Short Syntax hasn’t been available since Babel 7.0. Fragments let you wrap a group of children without adding an extra node to the DOM, which is helpful if you need a specific DOM structure.

Use the Fragment Short Syntax in Create React App 2.0

A new Higher Order Component (HOC) was recently released in [React v16.6.0](https://reactjs.org/blog/2018/10/23/react-v-16-6.html) called `React.memo`. This behavior of the HOC is similar to what you’d get when using `React.PureComponent` or `shouldComponentUpdate` in a React Class Component. However, now with the introduction of `React.memo`, you can leverage this behavior for React Function Components. The end result is that React will skip rendering the component if the props have not changed and will reuse the last rendered result.

Use React.memo with a Function Component to get PureComponent Behavior

React just announced a new [Hooks]([Introducing Hooks – React](https://reactjs.org/docs/hooks-intro.html)) proposal enabling React Function Components to handle state and side-effects, which was previously only possible with React Class Components. In this lesson, we will be using a prerelease of React to convert a React Class Component to a Function Component using hooks, and then at the very end we'll introduce a custom hook to simplify the component even further.

Use React Hooks to Convert a Class Component to a Function Component

In this lesson, we’ll make sure we have a sufficient environment in order to start using the experimental Hooks API that comes with React. Currently you need a prerelease version of React since it hasn’t yet been introduced into an official release.

Environment Setup for React Hooks

Historically, you had to use a React Class Component in order to maintain state in a component. However, with Hooks, you can now add state to a Function Component using the useState hook. In this lesson, we will explain how to use this API and then convert a portion of an existing Class Component to a Function Component.

Add State with the useState Hook to a React Function Component

In order to use Hooks there are a certain set of rules you need to follow. Thankfully, the React Team has provided an ESLint Plugin that will help enforce these rules when using Hooks.


Add Linting to Help Enforce Rules when Using React Hooks

React has provided the useEffect Hook to add side-effects to a Function Component. In this lesson, we'll add hooks to manage localStorage and listen to window keydown events. We’ll also unpack how to clean-up after these effects and also control how often they are executed.

Add a Lifecycle Event with the useEffect Hook to a React Function Component

Refs have been a handy way to reference DOM elements in Class Components, but did you know you can use refs for other things as well? In this lesson, we’ll examine how to leverage the useRef hook inside a Function Component. We’ll first use this ref to attach to a React element, which you may already be familiar with, but then we’ll examine how to use a ref to simulate a Class instance variable.

Use the React useRef Hook to Reference a DOM Element or Simulate an Instance Variable

A common way to share code across Components has been Render Prop Components or Higher Order Components (HOC), but extracting code with Hooks is much more straightforward. You can take code from an existing Component and pull out the hook logic into its own function for reuse.

Write Custom Hooks to Share Logic Between React Function Components

Since the announcement of React Hooks a lot of community hooks have already been created. We will take a look at a list of these hooks and leverage a couple of them to use in our web application. The site https://nikgraf.github.io/react-hooks/ is a great round-up of current community hooks that you can use today.


Topics

Instructors

Content Type