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

Learn React

In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development.  In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores.  In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.

React Flux: Components/Views

You can easily spend hours configuring the perfect dev environment with all the latest hotness like ES6 (and beyond) support, hot reloading, and a myriad of other features. This lesson shows how to use hjs-webpack to get the same thing in a matter of minutes.

Set up a killer React dev environment quickly with hjs-webpack

In this lesson we’ll bootstrap and React application using Yarn and Create React App through the `yarn create` command.

Bootstrap a React Application with Yarn & Create React App

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

In this lesson we'll create a MapView with react-native-maps. We'll use the `onPress` function to add `Markers` to the map and then we'll use the custom map marker feature to style them.

Create a Custom Map Marker with React Native Maps

In this lesson, we will cover a popular image processing component in the react eco-system for image processing.

The Library is react-imgpro.

**Installation:**

> npm install --save react-imgpro

**Include it as a module :**
> import ProcessImage from 'react-imgpro'

The documentation and the source files can be found here: 

https://github.com/nitin42/react-imgpro



Process images in React with react-imgpro

We often need to be able to apply style to navigation links based on the current route. In React Router v4 you can easily accomplish this with the NavLink component. In this lesson, we will step through three ways to accomplish styling links through the use of an active class with the NavLink component.

Style a Link that is Active with NavLink in React Router v4

There are many cases where we will need a catch-all route in our web applications. This can include 404-style routes when nothing is match or other use cases where where we receive an invalid route in React Router v4.

Render Catch-All Routes with React Router v4 using the Switch Component

Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these components "stateless functional components". In this lesson, let's take a look at how to define a stateless function component, and how to integrate useful React features like Prop Type validation while using this new component syntax.

Creating a Stateless Functional Component in React

React Router v4 allows us to render Routes as components wherever we like in our components.  This can provide some interesting use cases for creating dynamic routes on our applications.

Render Multiple Components for the Same Route in React Router v4

Inferno is an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client & server. Outside of performance, Inferno also offers some nice features that aren't currently available in React, like the ability to use lifecycle events with stateless/pure functional components, which is great for people who prefer functions over classes. In this lesson, we demonstrate how this is accomplished.

Use Lifecycle Events with Functional Components with Inferno

Overriding a browser's current location without breaking the back button or causing an infinite redirect can be tricky sometimes.  In this lesson we'll learn how React Router v4 allows us to easily achieve a redirect without getting bogged down in browser history.

Redirect to Another Page with React Router v4

To annotate or describe elements in a VR scene we can leverage the built-in `<Text/>` component. In this lesson we'll place multiple `<Text/>` entries in a scene. 

We'll also explore its various `style` options, such as changing its color and position in your scene.


Write Text Using the Text Component in React VR

Same as a `<div>` in HTML or a `<View/>` in **ReactNative**, React VR comes with a `<Container/>` component that supports [flexbox layouting](https://facebook.github.io/react-native/docs/flexbox.html). 

In this lesson we'll explore what a `<View/>` means in a three dimensional context and how to structure two dimensional content like text and images.

Topics

Instructors

Content Type