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 provides a boilerplate-free API for shared state across your React application. It enables you to derive state and display computed data through selectors for efficient updates and performance in your app.

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

Tomasz Łakomy

Sync State Across Components with Recoil in React

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

Chris Achard

Getting Started with Recoil in React

Start with the basics of state management and dive further into the selector API, as well as learning different strategies for handling synchronous and asynchronous Selectors 

Yoni Weisbrod

Manage React State with Recoil

Learn Recoil

React Landing Page

Learn React

MDX content has a root element called `wrapper`. This element is a React.Fragment by default which can lead to some warnings if you pass props to the MDX component generated from a file, like gatsby-mdx's src/pages support does. Here's how to fix that.

Replace the MDX Content Wrapper with an MDXProvider in Gatsby MDX

Creating cross-platform web-based applications with Ionic 4 and React is easy thanks to the Stencil compiler and `create-react-app`.

In this video, we look at how to use create-react-app and @ionic/react to make an Ionic 4 + React application

Create an Ionic 4 application with React

One exciting use case for MDX is the ability to render markdown code blocks as live code right on your website. In this lesson, we use React Live to implement a live editable codeblock.

Create a Live Code Component with Gatsby MDX and React Live

Prism is a popular syntax highlighter in the Gatsby ecosystem. Here's how to use the more powerful and flexible component model to enable syntax highlighting in your MDX files using Prism React Renderer.

Syntax Highlighting Code Blocks using Components with Prism React Renderer and Gatsby MDX

In other videos we've gone over how to use React Live to power interactive code blocks and Prism React Renderer to power syntax highlighted code blocks. This lesson goes over how to use them both together and switch between each on a per-codeblock granularity using metastring props.

Compose Syntax Highlighting and Live Code Examples using MDXProvider with Gatsby MDX

Some platforms support .md file extensions better than they support .mdx. For this reason (or others) it can be useful to apply MDX processing to files with `.md` extensions as well as `.mdx` extensions.

Processing Markdown File Extensions with Gatsby MDX

In this lesson we are going to learn how to write text using `<Text/>` component in React 360 and how to style it using `style` property.

Write text using the React 360 Text component

In this lesson we are going to learn how to use flexbox in React 360 in order to create a list of countries that the user would like to visit

Use flexbox to create layouts in React 360

Sometimes we want to be able to reuse different styles across components and to create generic stylesheets that we can use in various scenarios. In this lesson we're going to learn how to assign multiple styles to a `<Text />` component in React 360 building a list of countries that the user would like to visit.

Assign multiple styles to a component in React 360

The Web is all about displaying various images, and React 360 is no different. 

In this lesson we are going to learn how to use `asset()` method to display images using `<Image/>` component as well how to style them using `style` property. The images we're going to display are going to come both from the external source as well as from our own assets.

Display images using the Image component in React 360

Surfaces allow you to add 2D interfaces in 3D space, letting you work in pixels instead of physical dimensions. Currently there are two different shapes of Surfaces supported by React 360: Cylinder and Flat. 

A Cylinder Surface takes your 2D content and projects it onto the inside of a cylinder with a 4 meter radius. A cylinder is great for displaying 2D content, because no matter which way you turn, you are always looking at the content straight-on.

In this lesson we are going to learn how to create a Cylinder Surface spanning the 360 degree view and how to attach a React 360 component to it.


Create a Cylinder Surface and attach a component to it in React 360

Surfaces allow you to add 2D interfaces in 3D space, letting you work in pixels instead of physical dimensions. Currently there are two different shapes of Surfaces supported by React 360: Cylinder and Flat.

A Flat Surface places your 2D interface on a flat plane in space, like a virtual screen. Though a Cylinder Surface is always positioned in front of the user, a Flat Surface can be moved around in space – this is useful for scenarios where you want to have multiple panels arranged around the user, like a multi-monitor setup in virtual space.

In this lesson we are going to learn how to create a Flat Surface with a `<Flag/>` component attached to it.

Create a Flat Surface and attach a component to it in React 360

React 360 applications are not restricted to 2D panels in space – you can also bring in 3D elements. In this lesson we are going to learn how to import 3D objects using Entity component and how to use Locations to display them in a React 360 application.

Topics

Instructors

Content Type

Free or Pro