Learn Alpine, Jekyll and Recoil

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

Recoil offers several hooks to use for consuming state in React, and this lesson looks at how to choose which hook to use, and what happens when you don't use the right hook (hint: **extra renders**).

The three basic RecoilJS hooks are:

1. `useRecoilState`, which is great for reading and writing state,
2. `useRecoilValue`, ideal for reading state, and
3. `useSetRecoilState`, the primary candidate when you just need to write state.

Choose the Right Hook for Your Recoil State

When consuming asynchronous selectors in Recoil, you're going to need to tell React what to render while the API is fetching its data. 

One way to solve this issue is by setting a fallback value using React `Suspense`. But there's another option that gives you fine-grained control, and that's by preventing the selectors from returning a promise in the first place.

In this lesson we're going to have our selectors return Recoil's `Loadable` object, which always contains the current selector value (`contents`) and what state the selector is in (`state`). By consuming this with the `useRecoilValueLoadable` hook rather than the regular `useRecoilValue` hook, we can manually define whatever we want React to render in each of the 3 states: `hasError`, `hasValue`, and `loading`.

Handle Recoil Asynchronous Selectors using Loadables in React

Selectors are great for automatically triggering API calls with Recoil because they are automatically run as soon as any dependencies are updated, and because selectors are shared across your application.

Be aware that Recoil will cache your selector values, so asynchronous selectors are best utilized when the data is not meant to change throughout the life-cycle of an application. Fetching a user's avatar would be a good use case.

When writing asynchronous selectors, one thing to keep in mind is that React must always know what to render - even while your data is being fetched. One solution for this is to use Suspense, a React component that allows you to supply a fallback value to render until your data returns. In this lesson, we'll look at how to call APIs inside selectors and handle situations where selectors return promises.

Use Recoil Selectors to Make API Calls in React

In this lesson, we're going to learn how to create Recoil selectors that accept arguments. These are made possible using the `selectorFamily` utility function.

We'll start with an existing application that uses a regular `selector` to display a sorted array of Todo items, and then we'll refactor it so that we're able to supply the sort type (`ascending` or `descending`) in the React component itself.

For more information on `selectorFamily`, have a look at the official RecoilJS docs: https://recoiljs.org/docs/api-reference/utils/selectorFamily


Use selectorFamily to take arguments in your Recoil selectors

Learn how to set state in Recoil using the `useRecoilState` hook. 

Sound familiar? It should, because it works very similarly to React's built-in `useState` hook (the functional component equivalent of `setState`).

In this lesson, we'll practice removing and adding items from an array that we keep in state using a Recoil atom. We'll create new immutable functions, and then call our setter functions in order to update the state.

Update Recoil State in React using useRecoilState

In this lesson, we're going to show how RecoilJS selectors are used to display computed data in React. While atoms are the go-to state objects in Recoil, selectors are the ideal choice when data can be computed based on existing state - like displaying the price of a restaurant order. And your selector output always remains up to date - just subscribe to it using one of the RecoilJS hooks.

Display Computed Data Using Recoil Selectors in React

Recoil is a new (experimental!) library from facebook that can handle complex shared data across a large react app.

In this collection, we'll create a simple game with React using Recoil, to explore how you can share and update state across an app. 

Recoil is similar to (but different than) Context, Redux, or other shared state libraries (like MobX), but is designed to handle large (and variable) numbers of state that can update without re-rendering your entire app's component tree.

A state management library for React.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

recoil

Getting Started with Recoil in React

[Recoil](https://recoiljs.org/) is a brand new state management library for React, developed by Facebook.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

This quick collection will get you up and running with Recoil, you're going to learn how to:

* add Recoil to your React project
* create a Recoil atom and use it to store a piece of state
* use `useRecoilState` hook to update an atom
* use `useRecoilValue` to access value stored in an atom in a read-only fashion
* use 🔥`selectors`🔥 in order to calculate derived data based on state stored within atoms (this is *really* powerful!) 

Sync State Across Components with Recoil in React

Recoil allows us to use atoms in order to store pieces of state. More often than not in our apps we need to use data that derives from our application state (for instance to multiply height and width stored within a state to calculate area of an element).

Luckily Recoil provides us with a powerful tool to automatically re-calculate derived state value whenever an piece of state changes - selectors.

A [selector](https://recoiljs.org/docs/introduction/core-concepts#selectors) is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated.

In this quick lesson we're going to learn how to use a selector in order to automatically calculate a square of a number whenever a value stored within an atom is going to change

Use Selectors to Calculate Derived Data Based on State Stored within a Recoil Atom

Not every component is going to modify a 'global' state stored in a Recoil atom - in some cases a component just needs to be able to read the value.

In this quick lesson we're going to learn how to use a `useRecoilValue` hook to ensure that a component will be able to read a number stored in a Recoil atom in a read-only fashion. 

Use useRecoilValue Hook to Read a Value From a Recoil Atom

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

alpine

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

This is the series intro video. Let's get started!

Series Intro - Beginner Level Alpine JS

[Recoil](https://twitter.com/recoiljs/status/1260965007954591744) is a brand new state management library for React developed by Facebook.

In this quick lesson we're going to learn how to add it to a React app and how to use a Recoil atom in order to share state between two React components using `useRecoilState` hook

 

Use a Recoil Atom to Share State Between Two React Components

In this lesson, we build a little app that fetches dog photos from the dog.ceo API, based on a "breed" search field. We want the API call to happen again when the search value changes, and to do so we use the `$watch` property from Alpine JS, which lets us define what state property we want to watch, and what callback function to run when a change happens.

We also use the `debounce` modifier on the `x-model` property to avoid firing an API call on each keystroke.

Refetch API data when a state value changes with the `$watch` property in Alpine JS

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy **directives**. You'll discover how to define a component scope with `x-data`, run code on mount with `x-init`, attach event listeners with `x-on`, display data with `x-text`, decide wether or not to show an element with `x-show`, iterate through data with `x-for`, retrieve a DOM element with `x-ref`, learn how to achieve _two-way data binding_ with `x-model`, and much more.

You'll also learn how **"modifiers"** can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls **"magic properties"**, which give you access to native browser events (`$event`), reference to DOM elements (`$refs`), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

**Get ready to breathe some fresh air** - it's time to walk into cool, green Alpine pastures! 🏞

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

In this lesson, we see how the `x-model` directive makes achieving "two-way data binding" effortless in Alpine JS.

We see what it would take to recreate the same functionality with an `x-bind` directive for the input value, as well as an `@input` event listener which, thanks to an access to the browser's native events via the `$event` magic property, sets the state value to `$event.target.value`.

Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

In this lesson, we learn how to retrieve a DOM element via the `x-ref` directive in Alpine JS, which gives us a reference to the element it is applied on. In our case, an input field.

We can then use the `$refs` object, and reach for the ref we need to target.

This allows us to trigger the focus state of the input field, with the `.focus()` method.

Focus an input field on button click with `x-ref` and the `$refs` property in Alpine JS

In this lesson, we learn how the `x-init` directive in Alpine JS lets us run a JavaScript expression once the component has initiated.

We see the nuances that allow us to trigger that code before Alpine performs initial DOM updates, or after these updates have been made.

Focus in input field on page load with `x-init` in Alpine JS

In this lesson, we smoothen the transitions between tabs by applying a `transition` modifier to our `x-show` directive.

We see how we can ignore the leaving elements, and focus the animation on the entering elements. We tweak the transition duration and origin by chaining additional modifiers to our `x-show` directive.

Control enter and leave transitions with the `x-show.transition` modifier in Alpine JS

In this lesson, we create a set of tabs with Alpine JS, where only the content of the currently active tab is visible. To do this, we define an `activeTab` state value with `x-data. We then wire up our buttons to change the value of `activeTab` on click, and use `x-show` to determine if the tab content should be visible or not, based on the value of `activeTab`.

We also take control of the `class` attribute with `x-bind`, and we conditionally output an "active" class based on, you guessed it, the value of `activeTab`.

Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS

In this lesson, we define a "count" state value with the `x-data` directive provided by Alpine JS. This defines a new scoped component, which can have access to this state.

We then display the "count" value in our HTML with the `x-text` directive, which updates an element's `innerText` value.

We also hook up buttons with click event listeners with `x-on:click`, which allows us to modify the count value as desired.

Update a count state value with the x-on event listener directive in Alpine JS

In this lesson, we move the component definition to a function, defined in a script tag in the HTML document.

We then iterate through an Array of Objects with the `x-for` directive in Alpine JS. We use a `<template>` tag to wrap the HTML element we want to repeat for each item, and put the `x-for` directive on that template tag.

We also define a "computed" property by adding a method on our function, which checks if a given ID matched the currently active tab id. This computed property allows us to determine wether or not to apply the "active" classname to our tab buttons.

Iterate through data with the `x-for` attribute in Alpine JS

Get started with MongoDB and Docker really quick 🔥 even if you have no backend/fullstack experience.

This lesson guides you through installing Docker Desktop and setting up a MongoDB image.

We explain Docker images and containers, and their roles in providing isolated software environments.

We run a MongoDB image in 2 ways: using the terminal and Docker Desktop

We demonstrates configuring port settings for a container and accessing the MongoDB shell (`mongosh`) to interact with the database.

We learn how to manage Docker containers, configure settings, and run commands inside the container.

Grab the CLI command: 🔥 `docker run --name some-mongo -d mongo:latest` 🔥

Tomasz Ducin

Install Docker to run local MongoDB Container

Learn to install Docker Desktop, set up a MongoDB image, and manage containers. Configure ports and access the Mongo shell

Learn how to test custom ESLint rules with Vitest and RuleTester.

In the [previous video](https://egghead.io/set-up-a-custom-es-lint-rule~kq49h), we created a custom eslint rule that gives us a warning when some of the class names don’t start with a lowercase letter.

Here, I'll show you how to test this or any other custom ESLint rule using unit tests without manually restarting the ESLint server or modifying production code to check if the rules work correctly. We'll look at the structure in which correct and incorrect code samples should be specific to RuleTester.

We'll also learn how to make our rule fixable and verify that the applied fix works as expected.

Ákos Kőműves

Test Custom ESLint Rules with Vitest and RuleTester

Learn to test a Custom ESLint Rule using Vitest and RuleTester.

This course is designed to make you proficient in building dynamic data tables in React using TanStack Table. 

You'll learn to fetch and display remote data, handle pagination, and implement row virtualization for better performance. 

The lessons guide you through customizing table cells with your own JSX components, adding features like toggling column visibility to enhance user interaction, and create mobile-friendly tables with CSS pseudo-elements. 

By the end, you'll have the skills to create efficient, user-friendly tables that elevate your React applications.

Ian Jones

Headless, Mobile-friendly Data Tables with Tanstack Table and React

Learn to display, paginate, and virtualize data effectively in a table with Tanstack table and React 19.

Install `ghx` with `npm i -g @johnlindquist/ghx`

https://github.com/johnlindquist/ghx

You've copied and pasted code, set up your project, and... *error*.  "Stream is not readable."  Sound familiar?  Generic Google searches and outdated Stack Overflow answers often leave you more confused than when you started.  You need more than just documentation; you need *context*.  You need to see how real developers solve this *exact* problem.

This lesson shows you a better way to debug, using real-world GitHub examples and the power of Cursor's Composer.

Here's the workflow we'll cover:

1.  **Identify the Error:** You've already done this!  You have a specific error message ("Stream is not readable") and the code that's causing it.
2.  **Find Real-World Solutions with `ghx`:** We'll use `ghx`, a tool for searching GitHub, to find *actual projects* that have encountered (and solved!) this same issue.  No more generic advice – you'll see working code.
3.  **Consolidate and Analyze:**  `ghx` brings those relevant code snippets into a single, easy-to-read file.
4.  **Leverage Cursor's Composer:** We'll use Cursor's Composer to directly interact with the examples and your problematic code.  Paste in your error, reference the `ghx`-generated file, and ask targeted questions like:
    *   "Based on these examples, how should I modify my code to fix the 'stream is not readable' error?"
    *   "What's the common cause of this error in the context of an MCP server?"
    *   "Show me the specific lines in the examples that handle stream readability correctly."
5. **Fix the Error:** Implement the solution using this workflow.

Instead of guessing, you'll learn directly from proven solutions.  You'll gain a deeper understanding of your issue and how to troubleshoot it effectively.  This approach transforms debugging from a frustrating hunt into a targeted learning experience.

John Lindquist

Fix Real-World Coding Errors with GitHub Context through ghx and Cursor Composer

AI is amazing for generating code, but often leaves us staring at functions and libraries we've never seen before. This creates a huge problem: When things break (and they will break), we're lost. We don't understand the individual pieces, let alone how they interact. Knowing one part isn't enough; we need to see how unfamiliar components work together.

The solution? Real-world examples.

This lesson introduces ghx, a tool I built to do exactly that. ghx searches GitHub, finding actual code examples that use the specific combinations of functions and libraries that are tripping you up. Instead of generic documentation, you get concrete implementations. You can find the ghx repository at https://github.com/johnlindquist/ghx.

Here's the workflow we cover:

Identify the Unknown: Pinpoint the AI-generated code you don't understand – specific functions, libraries, or their interactions.

Search with ghx: Use ghx to search GitHub for examples using those terms together. ghx finds repos where those elements co-exist.

Consolidate Examples: ghx combines the relevant code snippets from those examples into a single, digestible file.

Ask the AI (Again, but Better!): Feed this consolidated code to an AI (like a coding-focused model in an AI studio). Now, instead of asking general questions, you can ask targeted questions based on real-world usage:

"Explain how these functions are used together in these examples."

"What are some common use cases for this combination of libraries?"

"Show me alternative code snippets that achieve the same result."

"Can you identify potential problems or areas for improvement, based on these examples?"

Iterate. Use your improved understanding to make changes, and then repeat the process to debug.

By leveraging ghx and targeted AI prompting, we transform from being lost in a sea of unfamiliar code to actively learning from how others have solved similar problems. We gain a deeper understanding of our AI-generated codebase, making debugging, modification, and future development far more manageable. This gives you the tools to understand, debug and improve your own code.

How to Work with AI-Generated Code You Don't Understand with ghx and Gemini

In this less we create a custom Zod schema using `z.custom`.

The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. `z.custom` allows the creation of a brand new custom schema with a callback function that returns a boolean indicating validity.

We highlight a challenge with type inference in Zod's custom schemas: callback parameter types don't get aligned automatically - type-safety must be explicitly defined using type parameters.

We run tests against various room numbers and demonstrate how to effectively validate inputs and manage error messages.


Create Custom Zod Schemas and Validate project-specific data

Create custom validation logic in Zod using z.custom, for primitive values, ensuring type safety and proper error messages for room numbers.


Excessive properties refer to any additional attributes that are not explicitly listed in an object schema. When creating an object based on a schema, it is important to ensure that only the defined properties are included.

In TypeScript, if an object is created with an extra property that isn't defined in the schema, TypeScript will not raise an error unless the type is explicitly annotated. When the type is annotated, TypeScript will issue an error indicating that the extra property is not allowed.

Zod provides a strict utility to enforce similar checks. This feature ensures that only specified properties are allowed in an object schema. When unnecessary properties are added at both the top level and within nested schemas, Zod will throw errors indicating unrecognized keys.

Adding an unrecognized property to a Zod schema results in an error message that specifies which keys are not recognized. Applying strict checks on nested schemas ensures that all levels of the data structure are validated correctly.


Make Excessive Object Properties Fail on Zod Validation

Prevent excessive properties in TypeScript and Zod schemas using strict checks for better data validation

In this lesson we discuss how Zod works with TypeScript to handle special types like `undefined`, `null`, `any`, `unknown`, `never` and `void`.

We modify our room booking schema to demonstrate the use of `optional` and `nullable` Zod utilities.

By using `.optional`, we allow a property to be either its _original type_ or `undefined`. With `.nullable`, we allow it to be either its _original type_ or `null`. Finally, `.nullish` allows a value to be either its _original type_, `null`, or `undefined`.

For all cases, we run tests to show how these schemas work in practice, as well as how TypeScript infers types.


Declare Lack of Value in zod (optional, nullable and nullish)

use Zod for TypeScript schemas, including handling undefined, null, and special types like optional and nullable values, as well as any, unknown never and void

In this lesson we make use of partial validation of large and nested schemas in Zod.

Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concept of ".shape". It "unwraps" the object schema, enabling access to sub-schemas within specific properties.

Additionally, we can use the `.unwrap` to get into element schemas of altered schemas such as `.optional` or `.array`.

Simplify working with complex schemas without the need to break them into hundreds of small schemas.

Use Zod Schemas partially using shape and unwrap

Manage large and nested Zod Schemas by extracting partial validations using shape and unwrap utilities

In this lesson we cover implementing sets and maps in Zod.

Using `z.set`, a schema for string-based amenities is created. We demonstrate how validation works by intentionally introducing errors and customizing error messages for better clarity.

Next, a map is created for existing guestDetails schema using `z.map`, with string keys and an existing `z.object`-based schema. The validation process is shown again by deliberately breaking the schema, such as omitting the age property, which triggers appropriate error messages.


Validate maps and sets using Zod schemas

Use sets and maps in Zod for schema validation, ensuring type safety for both keys and values.

Search

Search Results