Learn Node, React and Svelte

jotai is a primitive and flexible state management solution for React.

jotai gives you a minimalistic API that you can use that separates your state management from your UI. You get the benefits of well manages state AND you don't have to set up any boilerplate like defining actions, reducers, dispatchers, or stores. 

You create an atom and you're off to the races managing your application state.

In this course, you'll build an SVG drawing application. You'll see how you can represent the canvas as state through atoms and add svg path, change the path colors, delete, and even undo actions. You'll sum up your learning by learning how jotai can isolate state in your applications by using and composing Providers.

You'll be able to use the concepts you learn here to manage any state in your own application.

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

Manage Application State with Jotai Atoms

In this course, we'll build a video course platform using the AWS Amplify Admin UI. 

The Admin UI provides simple yet powerful tools to model database tables, add authentication and authorization, and manage app content, users, and groups. It also offers the ability to manage the application users and content. 

The AWS Amplify Admin UI focuses on data types rather than backend infrastructure. 

All the backend resources generate infrastructure as code (IaC) templates that can be committed in the team repository and integrated with AWS Amplify continuous deployment workflow to manage the different environments.

Before taking this course, you should have a basic understanding of React Hooks.

Get Started with the AWS Amplify Admin UI

Managing state in a UI is challenging. It's genuinely difficult and the solutions require a depth of knowledge and experience to understand. Everything is a balance of tradeoffs in complexity, performance, and user experience.


This is a series of interviews with experts, open-source maintainers, and UI developers that have combined decades of experience building stateful UI applications for millions of users. 

Part interview, part screen share, these videos should benefit you if you're building web applications.

They focus on React, but the underlying principles are valid for UI work in general (and beyond).

React State Management in 2021

### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

Create an eCommerce Store with Next.js and Stripe Checkout

Add Conversation Intelligence to your video or voice application without training Machine Learning models. Integrate speech to text and all of the below capabilities, out of the box:

- Speaker Diarization
- Sentiment Analysis
- Contextual Insights
- Conversational Analytics
- Topics of Discussion
- Entity and Intent Recognition
- Pre-built UI and Symbl JS Elements

In this course we will use [Symbl.ai](https://symbl.ai/) to get transcripts for the video we will upload as well as more meaningful insights. 

Additionally, you will pick up NextJS for the main stack and will use Symbl's RESTful APIs for processing a conversation from a video and rendering transcripts to screen. Get your Symbl account [here](https://platform.symbl.ai/) and start building.

Create Contextual Video Analysis App with NextJS and Symbl.ai

On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code.

But there's a bit more to it than just those three steps.

The type of project you're working on impacts the decisions you make. It gets more complicated when you're working on multiple projects that are related. For example, maybe you have a customer-facing frontend app, an admin dashboard app, and a single backend used for both.

How does this change your directory structures? How should you share code between projects? What happens when you add a Design System into the mix?

It can get hard to keep things straight in your head.

Nx is a tool that aims to solve these problems for you, whether you're working solo on a small full-stack app or on a dev team of thousands.

It's not just an opinionated folder structure. When you create an app with Nx, it generates unit and e2e test setups as well as preparing bundling and code-splitting with Webpack, and stubbing out common features like routing.

One of the coolest features of Nx is its Dependency Graph. The graph can visually show you the relationship between the parts of your application, and is optimized to ensure that compiling, testing, and linting only happens in the affected areas of your project.

In this course, Juri Strumpflohner demonstrates these features and more through the iterative creation of a React + Storybook + Express app. Don't worry if this isn't your preferred stack! Nx supports the most popular frameworks & libraries on the web.

More importantly, the focus of this course is more on the workflow than the implementation.

Watch Juri's course, and see if the Nx tooling & workflow is right for you and your team!

Scale React Development with Nx

[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

Get started with React! (with Hooks)

This course gets you up and running with react in **under a minute** by using codesandbox.io to skip the painful process of setting up your dev environment. 

You'll learn:

- How to write React code with JSX
- How to "think in React"
- How to use local state to store changing data
- How to pass data from parent components to children components using props

So get started now!  You need some javascript and HTML experience, but no prior React experience is needed.

React Crash Course with Hooks

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

Build Maps with React Leaflet

_Note: this course is being published and released as it is recorded, and is still incomplete. It is slated to be around a dozen videos._

Learn how to build PlaylistHunt, a fully featured app with authentication, authorization, a GraphQL API, and more, using up and coming modern tools, including:

- Gatsby
- Hasura
- Heroku
- Auth0
- Chakra UI

[View the demo](https://playlisthunt.netlify.app/) live online!

Most tools used are open source, with the exception of Auth0 and Heroku, which offers a generous enough free tier for hobby apps to be developed without any problems.

## Modern techniques

In the process, implement techniques to make your app experience dynamic on some portions, and static in others. 

Learn to how to build for Gatsby's vast and powerful plugin ecosystem by creating 3 of your own custom plugins in the process.

Use the latest and greatest of Gatsby, like the brand new [file-system routing APIs](https://www.gatsbyjs.com/docs/file-system-page-creation/). 

## Who is this course for?

Intermediate developers with some existing knowledge of React and web development are best suited for this course. The pace is a little quicker and aims at showing how all the pieces connect together to make a modern JAMstack app.

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0

One of the most well-known GraphQL features is that it lets you do things like replacing multiple REST calls with a single query. You might have done some query experimentation with demo APIs or working on a Gatsby site. 

But there's more to GraphQL than just making queries.

For example, with mutations and subscriptions, GraphQL can smooth out the process of implementing real-time features in your web applications.

In this new course, you'll get practice with these features as egghead's own Ian Jones guides you through building a real-time chat app that's backed by GitHub Issues.

The tools used for the course are OneGraph and Formidable Labs' urql client.

OneGraph is great because it allows you to expose a single GraphQL endpoint that can access data from multiple services including GitHub, Stripe, Airtable, and more. It handles things like authentication for us as well, as you'll see in the course.

At Formidable Labs, the team released urql as a lighter weight alternative to Apollo or Relay that supports the most common interactions with a GraphQL server through their handy React Hooks. 

The course starts with a fresh Create-React-App and touches upon topics like using GraphQL query variables, working with Hooks, handling authentication with React Context, and setting up & consuming the GraphQL subscription.

Along the way, Ian also works through debugging some common errors that you may encounter when developing your own GraphQL apps in the future!

React Real-Time Messaging with GraphQL using urql and OneGraph

It's time to introduce a "View" to our codebase so that we can present the values in the DOM. Since React is the most popular View library, we'll convert our basic JavaScript project to a React project to demonstrate how this pattern fits.

We'll create several hooks (`useCallback`, `useListener`, `useBroadcaster`) in this section to see how you could implement the pattern in react terms.

By the end of the section, you'll know how user input is handled and how to fetch resources in React with this pattern

**You're in Section 06 of [Composing Closures and Callbacks in JavaScript](https://egghead.io/playlists/composing-closures-and-callbacks-in-javascript-1223)**

Bringing the Pattern into React

Like in section [04 Implement the Pattern in Common Async Scenarios](https://egghead.io/playlists/implement-the-pattern-in-common-async-scenarios-c059), it's time to implement the pattern in common scenarios!

Now that you're familiar with the pattern we'll build a search box that handles a few different async scenarios.

You'll filter values based on user input, debounce text while a user is typing, and send a request once they are finished. Finally, we'll see how to implement a cache to save on network requests

**You're in Section 07 of [Composing Closures and Callbacks in JavaScript](https://egghead.io/playlists/composing-closures-and-callbacks-in-javascript-1223)**

Building Live Search Box

Create-React-App is a great tool for getting started with React, but at some point you may find yourself needing something more.

Gatsby is one of the most popular choices to move on to. It boasts a number of performance optimizations and a large plugin ecosystem (while still allowing you to use anything from the React ecosystem as well).

In this course, Khaled Garbaya will help you get started with Gatsby.

You'll start by building a single page "Hello World" before moving on to programmatically creating new pages and setting up static and dynamic routing.

Once you've got a grasp on the basics, Khaled will share his process for migrating an existing application built with Create-React-App project over to the Gatsby way of doing things.

You'll also get practice adding and configuring Gatsby build plugins for Tailwind CSS and sourcing data from external APIs.

After this course, you'll be ready to port existing code, or start a new Gatsby project from scratch!

Eject create-react-app and Use Gatsby for Advanced React App Development

Blitz.js is a fullstack React framework built on top of Next.js inspired by Ruby and Rails.

It includes everything from the database to your frontend all inside a single app. Only one development server. Only one thing to deploy.

Instead of having an API Layer, it allows you to import server code into your frontend and call it like like a normal function.

You will have one thing to deploy to a server or serverless.

In this collection, you will learn how to get started with Blitz.js. After watching this collection you will be able to:

* Create a new Blitzjs Project
* Create Pages
* Work with the database in your app

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

Getting Started with Blitz.js

As developers, we have a responsibility to protect the data our users trust us with. No one wants to wake up to the news that their site was hacked and all of the user accounts stolen.

Security is important, yet it is often overlooked and forgotten.

Part of the reason for this is that security seems hard to get right. This results in developers crossing their fingers and hoping for the best.

In this course, you'll learn how to protect your application by learning how to attack it.

Start your journey into web security today!

Check out these [**community notes for this course on Github**](https://github.com/wjohnson85/eggheadio-web-security-essentails).

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Web Security Essentials: MITM, CSRF, and XSS

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

🚧 **SUSPENSE IS EXPERIMENTAL**

One of the biggest challenges to writing software for the web is dealing with asynchrony, but we have to deal with it all the time.

This leads to a bunch of boilerplate code for handling loading and error states just to get the data we need to show the user-- whether the data comes from a remote endpoint or from browser APIs like geolocation and Bluetooth.

The end result is countless spinners and the dreaded FOLC (flash of loading content).

React Suspense is the answer to these problems.

React Suspense is a primitive built-into React that drastically simplifies asynchronous state management in our applications, and helps you avoid FOLC out of the box.

It's a bit of a different approach to managing these problems and understanding how it works is key to taking advantage of what it has to offer.

In this workshop, you'll learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

Use Suspense to Simplify Your Async UI

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


Develop Accessible Web Apps with React

Using immutable data structures provides many benefits, including making your code easier to reason about and less prone to bugs.

However, since JavaScript doesn't include support for immutable data structures out of the box, you need to use a third party library. But which one to choose?

In this self-paced workshop, Immer's creator Michel Westrate will guide you through the creation of a multi-user Gift Tracking app.

You'll learn the basics of using Immer to handle immutable state updates, then go further into change distribution and implementing an undo/redo.

After this workshop, you'll be ready to leverage immutable data structures in your own applications!

Immutable JavaScript Data Structures with Immer

🚧 CONCURRENT MODE IS EXPERIMENTAL! 🚧

Michael Chan has years of experience with React, and in this course, he will guide you through the ins-and-outs of working with Suspense. 

React Suspense gives us a new way of describing with fine-grain controls how users experience should look based on data we have or don’t have.

This will change the way you build React applications forever and this is the opportunity to get an early look and head start!





Topics

Instructors

Content Type

Free or Pro