React

A JavaScript library for building User Interfaces. Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
Site: http://facebook.github.io/react

Videos

Introduction to Properties

Added Introduction to Properties

This lesson will teach you the basics of setting properties in your React components.

 Watch

Higher Order Components

Added Higher Order Components

Higher Order Components are a very useful way to create behaviour that can be reused in different components. In this episode you will learn how to create a HOC and use for changing props and hijacking the render of the wrapped component.

 Watch

React's Children API

Added React's Children API

React's Children is a top level API that provides utilities for dealing with “props.children”. It can be used by parent components in a composition to transform and manipulate how it's children get's rendered.

 Watch

Context - Part 1

Added Context - Part 1

Context makes it possible to pass data through the component hierarchy, without needing intermediate components to know about it.

 Watch

Context - Part 2

Added Context - Part 2

Context Part 2 shows how to use Higher-Order-Components and subscriptions to use React's Context safely.

 Watch

What's new and different in React v0.12.0

Added What's new and different in React v0.12.0

React has changed a bit in version 0.12.0. Let's take a look at what is different. You may need to update some code!

 Watch

Using TweenMax with React

Added Using TweenMax with React

React's use of the VirtualDOM can make it confusing on how to get actual elements to use in animation libraries like TweenMax. This video shows how to use this.getDOMNode() and this.refs and hook them in to TweenMax to satisfy all of your advanced animation needs.

 Watch

Reflux - Creating your first Action in React

Added Reflux - Creating your first Action in React

Reflux uses Actions to tell the Stores when to update. We will wire Actions and Stores together to create a simple updatable age field React component.

 Watch

Setting up a React Playground Dev Environment

Added Setting up a React Playground Dev Environment

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

 Watch

Hello World - First Component

Added Hello World - First Component

This is the first lesson in a series of lessons that take a look at the core fundamentals of UI development with React. Hello world.

 Watch

The Render Method

Added The Render Method

The render method is where the magic happens in your React components. This lesson will introduce you to this method and its use.

 Watch

Function as Child Components

Added Function as Child Components

Function as Child Components is a pattern to reuse common functionalities across your components.

 Watch

Owner Ownee Relationship

Added Owner Ownee Relationship

The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship.

 Watch

Using Refs to Access Components

Added Using Refs to Access Components

When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref.

 Watch

Composable Components

Added Composable Components

To make more composable React components, you can define common APIs for similar component types.

 Watch

State Basics

Added State Basics

State is used for properties on a component that will change, versus static properties that are passed in. This lesson will introduce you to taking input within your React components.

 Watch

Flux Components/Views

Added Flux Components/Views

In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development.

 Watch

Flux Stores

Added Flux Stores

Stores are where the real work in our application is done. Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views.

 Watch

Flux Actions

Added Flux Actions

Actions contain no functionality, but rather describe an event in our application. In this lesson we will describe our Actions as they relate to our application. These Actions will then be available for triggering in our Views and for execution in our Store.

 Watch

Flux Overview and Dispatchers

Added Flux Overview and Dispatchers

In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received.

 Watch

Flux Development Environment Setup

Added Flux Development Environment Setup

Our build process during this series will utilize both gulp and browserify. In this lesson we will take a moment to setup our environment and all of the tooling required to begin developing our Flux Application.

 Watch

Developer Tools

Added Developer Tools

React Development Tools is a Chrome plugin that provides handy ways to inspect and debug your React components.

 Watch