 Resources from Paul Mcbride in 2021

With the release of the React Hooks API, it is now possible to store state in functional components. In this playlist, we'll take an initial look at the `useState` hook as well as a few others. In one of the later lessons, we'll build a custom hook, a tool for easily sharing functionality with more that one component.

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

An Introduction to React Hooks

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

Version 4 of Webpack has a great new "zero config" mode which allows you bundle your JavaScript with, you guessed it, zero config. In this lesson you'll learn how to install Webpack and use it to bundle your code. 

Bundle JavaScript Files with a Zero Config Setup using Webpack 4

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Now by Zeit has recently been updated and now supports multi-language monorepos. In this lesson we'll build and deploy a simple app with an API powered by Node.js and Go.

If you want to follow along with this lesson, you will need to install [now-cli](https://github.com/zeit/now-cli).

Deploy a Monorepo to Now V2

Sometimes a CLI tool is the quickest way to get a job done. In this lesson we will learn how to create an interactive CLI tool that has input validation using Node.js and Inquirer.

Create an Interactive Node.js Command Line Tool using Inquirer

Gatsby is an incredible tool for building static web apps using React. In this lesson, you will learn how to use Gatsby's node API's to render paginated news items.

Display Paginated Posts using Gatsby 

With the release of the hotly anticipates hooks api in React, we can now store state in functional components. In this lesson we cover how the `useState` hook works with a very basic example.

Store State in React Functional Components with useState

The useEffect hook in React is used for running side effects. This can be anything from adding event listeners to logging to the console. In this lesson, we use it to track the mouse position.

Run Side Effects with React useEffect

The useRef is a hook for creating values that persist across renders. In this lesson we'll learn how to use the useRef hook to measure the width of an element as it changes.

Create a Persistent Reference to a Value Using React useRef Hook

In this lesson, we'll cover how to create a custom React hook for managing the state of any input. This is one of the most powerful features of react hooks as it allows you to easily share functionality in a reusable way.

Reduce Code Redundancy with Custom React Hooks

A common struggle with building React apps is having to pass props through a deeply nested component tree. In this lesson you'll learn how to avoid prop drilling using the `useContext` hook.

Avoid Prop Drilling using Context in React

Sometimes in a React component we need to derive some values by mapping or filtering props. This is a useful technique but can cause performance issues of you are processing a lot of data, or the component is rendered regularly. In this lesson you'll learn how to avoid this pitfall using the `useMemo` hook. 

Topics

Instructors

Content Type

Free or Pro