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

A 360° image can be used to teleport a user to a different place. Alternatively it can be used as a background for a 3D scene. In this lesson we'll learn how we can use various types of images to make 3D VR scenes. 

We'll learn how to load in panoramas which are [equirectangular](https://en.wikipedia.org/wiki/Equirectangular_projection) images, and we'll also learn how to [cubemap](https://en.wikipedia.org/wiki/Cube_mapping) multiple images. We'll also learn about passing event and style properties to `<Pano/>`. 


Build 3D Panorama Scenes Using the Pano Component in React VR

Learn how to implement adding a todo in a todo list application reducer.

Redux: Writing a Todo List Reducer (Adding a Todo)

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

We'll use the interpolate function from an `Animated.Value` to transition the background color of an `Animated.View`. We'll simultaneously translate the position with the same `Animated.Value`.

Animate Colors with React Native Interpolate

By using the `interpolate` function, the  `Animated.View` can be rotated using both degrees and radians.

Animate Rotation with React Native Interpolate

In this lesson we'll learn to use `backfaceVisibility` style property and `rotateX` to create a vertical flip animation, and `rotateY` to create a horizontal flip animation.

Create a Flip Card Animation with React Native

In this lesson we'll use `Animated.parallel` to animate multiple `Animated.timing` and `Animated.spring` animations at the same time.

Animate Multiple Animations at the Same Time with Animated.parallel

Sometimes you need to cancel a pending request based on an action performed by the User. In this lesson we’ll see how we can stop an in-flight ajax request by dispatching another action into the store and making use of the Rx operator ‘takeUntil’.

Use an action to cancel an Ajax request

Epics can be unit-tested just like any other function in your application - they have a very specific set of inputs (the action$ stream) and the output is always an Observable. We can subscribe to this output Observable to assert that the actions going back into the Redux are the ones we expect.


Testing the output of epics

Starting with React 0.13.0 you can write components using ES6 classes.  In this lesson we'll walk through some of the syntax differences.

React components in ES6 classes

Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects.

Redux: Avoiding Object Mutations with Object.assign() and ...spread

Learn how to implement toggling a todo in a todo list application reducer.

Redux: Writing a Todo List Reducer (Toggling a Todo)

The React team has an official Command Line Interface (CLI) for building React projects called "Create React App"; in this lesson, we show how to use this tool to quickly set up new projects using the `create-react-app {project-name}` command. We then use the npm scripts that are provided: `npm start` to develop, `npm run build` to ship, and `npm run eject` to opt out of the abstracted tooling.

The benefits of this tool are:
- It's officially maintained by the React team; this means best practices out of the box
- Zero config, one dependency
- Config is abstracted so React team can make improvements under the hood and you get the new goodness for free
- Clean command line output for errors
- You can "eject" at any time if needed

Set up React apps with zero configuration in two minutes

In this lesson we'll create a very simple application dispatcher utilizing the open source flux dispatcher from Facebook.

Flux Architecture: Application Dispatcher

Many components within an application can be rendered using only data that is ‘passed’ to them by a parent. We call these “Functional Components” as they do not contain any internal state. In this lesson we look at how to define these types of components and how to pass data to them.

Define Functional Components in Preact

When dealing with Components, there’s often the need to either have some local state controlled by the component (such as form input fields) or to tap into the lifecycle events of the component. In this lesson we’ll give some practical examples of both.


Define Stateful Components in Preact

In this lesson we'll walk through the process of installing the react-native-cli through setting up a basic react-native project on iOS. We'll get the basic project running in a simulator via XCode. We'll also setup Android, Android Studio and get the project running on an emulator with the react-native run-android command.

Setup React Native for iOS and Android

Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructuring can make it even nicer to work with.

Use State and Props in the Component Render Function

In React, components manage their own state. In this lesson, we'll walk through building a component which manages it's own state as well as using TextInput and TouchableHighlight to handle touch events.

Use State and Touch Events in React Native

Storing and updating values inside a component’s local state (known as controlled components) is such a common pattern that Preact offers a really handy feature called ‘link state’ that not only removes the need to bind class methods, but also handles the setting of new values. This can remove the need for ‘setter’ style methods on classes and in this lesson we’ll look at an example of tracking the value of a ‘text input’

Use Link State to Automatically Handle State Changes

Learn how to avoid mutating arrays using concat(), slice(), and the ES6 array spread operator.

Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

The way you make HTTP requests in React Native is with fetch. In this video, we'll add integration with the github API into our app using fetch.

Topics

Instructors

Content Type

Free or Pro