React JS

React

Watch User Created Playlist (134)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Write a "Hello World" React Component

Display Output in React with a Component's render Method

Set Properties on React Components

Manage React Component State with setState

Use React Components as Children for Other Components

Use React ref to Get a Reference to Specific Components

Access Nested Data with Reacts props.children

Understand the React Component Lifecycle Methods

Manage React Component State with Lifecycle Methods

Control React Component Updates When New Props Are Received

React Mixins

Write More Reusable React Components with Composable APIs

Use map to Create React Components from Arrays of Data

Build a JSX Live Compiler as a React Component

Understand JSX at a Deeper Level

React with-addons - ReactLink

React Fundamentals: Integrating Components with D3 and AngularJS

P

Debug React Components with Developer Tools in Chrome

React Flux: Development Environment Setup

React Flux: Overview and Dispatchers

React Flux: Actions

P

React Flux: Stores

P

React Flux: Components/Views

P

React Flux: Project Organization

P

React Flux: Routing with react-router-component

P

React Flux: Remove Duplicate Code with Mixins

P

React Flux: Wrapping Up

P

Simulate React Events with TestUtils

P

Using React's dangerouslySetInnerHTML

React in 7 Minutes

What's new and different in React v0.12.0

Using TweenMax with React

Applying conditional styles in React with classSet add-on

P

React and Firebase with ReactFire

P

React Animation with CSSTransitionGroup

P

Use React the cloneWithProps method to interact with child components

P

Setting up a React Playground Dev Environment

Connecting to a Reflux Store in React

P

Reflux - Loading data with Superagent

P

Static Methods in React

P

Add Custom propType Validation to React Components

Reflux - Creating Your First Action in React

Reflux - Manually Triggering Actions

P

Using React Contexts for Nested Components

P

Reflux - Using Any Library for Model Changes

P

Reflux - Aggregate Stores

P

Introduction to Server-Side React

P

React CSS in JavaScript with Radium

P

Introduction to Isomorphic React

P

Start Building a React Native Application

Set up Basic iOS Routing with React Native

Use State and Touch Events in React Native

P

Understand the fetch API

P

Use Fetch to Load External Data in React Native

P

Pass Data when Changing Routes in React Native

P

Use React Native's Error Handle and ActivityIndicatiorIOS

P

Use Images in a React Native Application

P

Use propTypes in Reusable React Native Components

P

Create a Scrollable React Native Component with ScrollView

P

Build a Reusable React Native UI Component

P

Build a Github Repositories Component in React Native

P

Navigate to a React Native component

P

Access Web Pages through React Native's WebView Component

P

Persist data in React Native with Firebase REST API

P

Build a View with React Native's ListView Component

P

Complete the Notes view in React Native

P

React components in ES6 classes

P

React Mixins with ES6 Components

P

Unit testing a React component using Jasmine and Webpack

Use JSX as an Express templating engine with react-engine

P

Isomorphic React with react-engine

P

Isomorphic Routing in React with react-engine

P

Normalize Events with Reacts Synthetic Event System

DOM Event Listeners in a React Component

P

Reloading React component tests using webpack-dev-server

React Native: TabBarIOS Basics

React Native: Debugging on an iOS Device

React Native: TabBarIOS Customization

P

React Native: LayoutAnimation Basics

React Native: PanResponder Basics

P

React Native: Create a Swipe Panel

P

Linting React JSX with ESLint (in ES6)

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

P

Intro to inline styles in React components

React-Motion: Introduction to the Spring Component

React-Motion: Configuring a Spring Component

React-Motion: Animate Multiple Elements with a Single Spring

React-Motion: TransitionSpring Basics

Increasing reusability with React container components

P

Building an accordion component with React

Debugging components with the React Developer Tools extension

Flux Architecture: Overview and Project Setup

Flux Architecture: Application Dispatcher

P

Flux Architecture: Application Actions

P

Flux Architecture: Application Store

P

Flux Architecture: Components/Views

P

Flux Architecture: Higher-Order Components

P

Flux Architecture: Project Organization

P

Flux Architecture: Routing with react-router 1.0

P

Flux Architecture: Component Wrap Up

P

Flux Architecture: Dumb Stores

P

Building stateless function components (new in React 0.14)

Use create-react-app to Setup a Simple React App

Compose React Component Behavior with Higher Order Components

Extracting Private React Components

P

React Testing: Setting up dependencies

React Testing: Running tests

React Testing: Utility modules

React Testing: Intro to Shallow Rendering

React Testing: JSX error diffs

React Testing: Element types with Shallow Rendering

React Testing: className with Shallow Rendering

React Testing: Conditional className with Shallow Rendering

React Testing: Reusing test boilerplate

React Testing: Children with Shallow Rendering

React Testing: The Redux Store - Multiple Actions

React Testing: The Redux Store - Initial State

React Testing: Redux Reducers

Using React with the FullCalendar jQuery plugin

Getting started with the react-rails gem

Styling a React button component with Radium

React Router: activeStyle & activeClassName

P

React Router: Route Parameters

P

React Router: Development Environment Setup

P

React Router: hashHistory vs browserHistory

P

React Router: Querystring Parameters

P

React Router: Router, Route, and Link

React Router: IndexRoute

P

React Router: setRouteWillLeaveHook

P

React Router: Redirect

P

React Router: Nested Routes

P

React Router: Named Components

P

Core Concepts of React: Components, Props, and State

Radium: Updating Button Styles via Props

react tutorial about Write a "Hello World" React Component

Write a "Hello World" React Component

2:45 react

This lessons goes over what it takes to get React to output simple text to the browser such as Hello Eggheads. This lesson will also introduce stateless functional components. React uses JSX which is a "JavaScript syntax extension that looks similar to XML." While this is not required to use with React, it is highly recommended.

react tutorial about Display Output in React with a Component's render Method

Display Output in React with a Component's render Method

1:20 react

The render method is where the magic happens in your React components to display output to the screen. This lesson explains how to structure your JSX in a React component.

react tutorial about Set Properties on React Components

Set Properties on React Components

2:29 react

This lesson will teach you the basics of setting properties (props) in your React components. As stated in Thinking in React, props are how we pass data around in React. We will take a look at what propTypes and defaultProps do for us in React.

react tutorial about Manage React Component State with setState

Manage React Component State with setState

2:28 react

State is used for properties on a component that will change, versus static properties that are passed in. This lesson introduces you to updating state through a simple text input and displaying that in the browser.

react tutorial about Use React Components as Children for Other Components

Use React Components as Children for Other Components

1:33 react

The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship. This lesson demonstrates how composable React can be when using stateless functions to display data.

react tutorial about Use React ref to Get a Reference to Specific Components

Use React ref to Get a Reference to Specific Components

4:49 react

When you are using React components you need to be able to access specific references to individual component instances. This is done by defining a ref. This lesson will introduce us to some of the nuances when using ref.

react tutorial about Access Nested Data with Reacts props.children

Access Nested Data with Reacts props.children

1:33 react

When you're building your React components, you'll probably want to access child properties of the markup. this.props.children accesses the innerHTML or nested components of another component.

react tutorial about Understand the React Component Lifecycle Methods

Understand the React Component Lifecycle Methods

4:19 react

React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson gives an overview of the entire component lifecycle and demonstrates mounting and unmounting of your React components.

react tutorial about Manage React Component State with Lifecycle Methods

Manage React Component State with Lifecycle Methods

1:58 react

The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will learn some simple uses for these hooks and how we can interact with state.

react tutorial about Control React Component Updates When New Props Are Received

Control React Component Updates When New Props Are Received

3:30 react

The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that. componentWillReceiveProps gives us an opportunity to update state by reacting to a prop transition before the render() call is made. shouldComponentUpdate allows us to set conditions on when we should update a component so that we are not rendering constantly. componentDidUpdate lets us react to a component updating.

react tutorial about React Mixins

React Mixins

3:24 react

Mixins will allow you to apply behaviors to multiple React components.

react tutorial about Write More Reusable React Components with Composable APIs

Write More Reusable React Components with Composable APIs

4:41 react

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

react tutorial about Use map to Create React Components from Arrays of Data

Use map to Create React Components from Arrays of Data

4:18 react

React components can be dynamically generated based on a dataset. This lesson will show you how to do just that by mapping over the state.data object.

react tutorial about Build a JSX Live Compiler as a React Component

Build a JSX Live Compiler as a React Component

5:09 react

As a tool for future lessons, we want to have the ability to write JSX and see the output live in the browser. In this lesson we will use React to build our own live JSX compiler.

react tutorial about Understand JSX at a Deeper Level

Understand JSX at a Deeper Level

4:28 react

"JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."

Dive deep into JSX, what it is, and what it becomes. Be sure to check out Build a JSX Live Compiler.

react tutorial about React with-addons - ReactLink

React with-addons - ReactLink

2:58 react

It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synchronize. Luckily, React provides a version of the toolkit with a selection of available addons. This lesson is going to dig into ReactLink, and how this addon can give you two-way binding.

react tutorial about React Fundamentals: Integrating Components with D3 and AngularJS

React Fundamentals: Integrating Components with D3 and AngularJS

9:31 react PRO

Since React is only interested in the V (view) of MVC, it plays well with other toolkits and frameworks. This includes AngularJS and D3.

react tutorial about Debug React Components with Developer Tools in Chrome

Debug React Components with Developer Tools in Chrome

4:14 react

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

react tutorial about React Flux: Development Environment Setup

React Flux: Development Environment Setup

7:47 react

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. We've kept the build process very simple so porting it to grunt should be a breeze, but this also serves as a simple primer for those who may not be familiar with gulp.

react tutorial about React Flux: Overview and Dispatchers

React Flux: Overview and Dispatchers

4:24 react

Flux has four major components: Stores, Dispatchers, Views, and Actions. These components interact less like a typical MVC and more like an Event Bus. In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received. We'll also create an AppDispatcher which, unlike the Dispatcher, is more specific to our application.

react tutorial about React Flux: Actions

React Flux: Actions

4:37 react PRO

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.

react tutorial about React Flux: Stores

React Flux: Stores

6:03 react PRO

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. In this lesson we will establish our first Store and register the Actions we wish to respond to.

react tutorial about React Flux: Components/Views

React Flux: Components/Views

9:39 react PRO

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 tutorial about React Flux: Project Organization

React Flux: Project Organization

5:15 react PRO

Organizing modules and components is a critical aspect of the development of any single-page web application (SPA). In this lesson we will look at refactoring the Flux React store into a more module structure.

react tutorial about React Flux: Routing with react-router-component

React Flux: Routing with react-router-component

5:10 react PRO

By default, React doesn't have built in routing. We will add routing to our application with the react-routing-component.

react tutorial about React Flux: Remove Duplicate Code with Mixins

React Flux: Remove Duplicate Code with Mixins

3:29 react PRO

As your React Flux application grows, it is inevitable that you start to see functionality and code repeated. With React, you can easily keep things DRY by using mixins.

react tutorial about React Flux: Wrapping Up

React Flux: Wrapping Up

9:13 react PRO

With this lesson, we will bring it all together, using what we've learned in the series to fisnish out the React Flux architecture example.

The completed code for this series can be found here on Github.

react tutorial about Simulate React Events with TestUtils

Simulate React Events with TestUtils

4:07 react PRO

You can use React's TestUtils addon to simulate events for your components.

react tutorial about Using React's dangerouslySetInnerHTML

Using React's dangerouslySetInnerHTML

2:23 react

Sure, it's a bad idea to store raw HTML in a database and feed that into dynamic views in your web application, but if you absolutely insist on doing it, React provides dangerouslySetInnerHTML to get the job done.

react tutorial about React in 7 Minutes

React in 7 Minutes

7:43 react

Want a whirlwind tour of facebook's React framework? John starts from scratch and builds an app in React in under 7 minutes. You'll learn about building custom components, using React this.state vs. this.props, and React hooking up events.

react tutorial about What's new and different in React v0.12.0

What's new and different in React v0.12.0

3:42 react

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!

react tutorial about Using TweenMax with React

Using TweenMax with React

3:15 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.

react tutorial about Applying conditional styles in React with classSet add-on

Applying conditional styles in React with classSet add-on

2:17 react PRO

Applying conditional classes can be a real chore in any framework. Luckily for us, React makes it easy with the classSet add-on.

react tutorial about React and Firebase with ReactFire

React and Firebase with ReactFire

6:32 react PRO

React becomes incredibly powerful when coupled with a real-time backend like Firebase. See how easy it is to bring the two together and chat with Star Wars characters while you're at it.

react tutorial about React Animation with CSSTransitionGroup

React Animation with CSSTransitionGroup

3:07 react PRO

React.addons provides CSSTransitionGroup for easily implementing basic CSS animations and transitions.

react tutorial about Use React the cloneWithProps method to interact with child components

Use React the cloneWithProps method to interact with child components

3:02 react PRO

this.props.children allows child components to pass through, but in order to interact with or add new functionality to them React.addons provides cloneWithProps.

react tutorial about Setting up a React Playground Dev Environment

Setting up a React Playground Dev Environment

6:07 react

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!

react tutorial about Connecting to a Reflux Store in React

Connecting to a Reflux Store in React

3:37 react PRO

Reflux makes connecting to a store extremely simple. Let's refactor a React component so that the data now comes from a Reflux store and allows the data store to trigger future updates.

react tutorial about Reflux - Loading data with Superagent

Reflux - Loading data with Superagent

5:05 react PRO

Neither React nor Reflux come with a built-in library for loading data. Many people use jQuery, but this jQuery is heavy for the task. In this lesson, John shows you how to easily load in some data using Superagent and walks you through the process of displaying and formatting the data in your component.

react tutorial about Static Methods in React

Static Methods in React

2:11 react PRO

The statics object of our React view components is meant to contain values or functions that can be accessed at any time without needing an instance of that component created.

react tutorial about Add Custom propType Validation to React Components

Add Custom propType Validation to React Components

2:12 react

In addition to the types built into React.propTypes we can also define our own custom propType validator

react tutorial about Reflux - Creating Your First Action in React

Reflux - Creating Your First Action in React

2:44 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.

react tutorial about Reflux - Manually Triggering Actions

Reflux - Manually Triggering Actions

4:18 react PRO

Reflux actions don't need to be used within React components, you can trigger them from anywhere. John demonstrates this concept by extracting the actions away and then invoking them through jquery.

react tutorial about Using React Contexts for Nested Components

Using React Contexts for Nested Components

2:02 react PRO

Contexts are currently undocumented in React v0.12.2, so use at your own risk. However they provide a particularly nice solution to passing data down through nested components.

react tutorial about Reflux - Using Any Library for Model Changes

Reflux - Using Any Library for Model Changes

2:30 react PRO

Reflux actions and stores can be used with any library. In this video, John shows how to listen to store changes without using React.

react tutorial about Reflux - Aggregate Stores

Reflux - Aggregate Stores

4:26 react PRO

Reflux allows stores to listen for other stores to update. This helps you build more complex data models. In this video, John walks you through building a store which can watch for data updates in two other stores.

react tutorial about Introduction to Server-Side React

Introduction to Server-Side React

3:22 react PRO

Rendering React components from the server allows you to pre-render the initial state of your components and speed up initial page loads by not requiring the browser to wait for any JavaScript to load before presenting the component.

react tutorial about React CSS in JavaScript with Radium

React CSS in JavaScript with Radium

3:33 react PRO

Radium is a set of mixins for managing styles in React components, allowing you to use CSS features that aren’t possible with inline styles.

react tutorial about Introduction to Isomorphic React

Introduction to Isomorphic React

5:47 react PRO

React enables us to write isomorphic applications that pre-render on the server and then respond to user interaction on the client side.

react tutorial about Start Building a React Native Application

Start Building a React Native Application

9:58 react

We'll download the requirements for getting started with React Native, refactor our app to ES6, walk through debugging, and talk about the philosophy behind React and React Native.

react tutorial about Set up Basic iOS Routing with React Native

Set up Basic iOS Routing with React Native

6:00 react

In React Native you utilize the NavigatorIOS component in order to implement routing. In this tutorial, we'll walk through the app we'll be building in this series as well as how to add routing to your app.

react tutorial about Use State and Touch Events in React Native

Use State and Touch Events in React Native

7:07 react PRO

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.

react tutorial about Understand the fetch API

Understand the fetch API

4:20 react PRO

The way you make HTTP requests in React Native is with the Fetch API. In this video we'll talk about Fetch and how to work with promises.

react tutorial about Use Fetch to Load External Data in React Native

Use Fetch to Load External Data in React Native

6:26 react PRO

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.

react tutorial about Pass Data when Changing Routes in React Native

Pass Data when Changing Routes in React Native

2:51 react PRO

As we build application components, we will need to pass data along as we change routes and bring them into view. With React Native we can do this easily and deliver the appropriate data to our native Dashboard component.

react tutorial about Use React Native's Error Handle and ActivityIndicatiorIOS

Use React Native's Error Handle and ActivityIndicatiorIOS

2:51 react PRO

With React Native you use ActivityIndicatorIOS to show or hide a spinner. In this lesson we combine ActivityIndicatorIOS with our HTTP requests in order to give the user feedback about data loading.

react tutorial about Use Images in a React Native Application

Use Images in a React Native Application

7:03 react PRO

Let's take a look at the basics of using React Native's Image component, as well as adding some reusable styling to our Dashboard component buttons.

react tutorial about Use propTypes in Reusable React Native Components

Use propTypes in Reusable React Native Components

2:50 react PRO

In this React Native lesson, we will be creating a reusable Badge component. The component will also make use of propTypes to validate that its required data is being passed in when it is used.

react tutorial about Create a Scrollable React Native Component with ScrollView

Create a Scrollable React Native Component with ScrollView

7:20 react PRO

To show a list of unchanging data in React Native you can use the scroll view component. In this lesson, we'll map through the data we got back from the Github API, and fill complete ScrollView component for the user profile.

react tutorial about Build a Reusable React Native UI Component

Build a Reusable React Native UI Component

2:02 react PRO

In this lesson we'll create a reusable React Native separator component which manages it's own styles.

react tutorial about Build a Github Repositories Component in React Native

Build a Github Repositories Component in React Native

5:52 react PRO

We'll walk through building a Repositories component which receives an array of repositories on Github and loops over those creating a list of React Native View components.

react tutorial about Navigate to a React Native component

Navigate to a React Native component

2:36 react PRO

Now that we've created the React Native component for our repositories view, we still need to wire it into the routing so that we can visit its view.

react tutorial about Access Web Pages through React Native's WebView Component

Access Web Pages through React Native's WebView Component

4:20 react PRO

We can access web pages in our React Native application using the WebView component. We will connect the links in our repository component to their Github web page when a user click on them.

react tutorial about Persist data in React Native with Firebase REST API

Persist data in React Native with Firebase REST API

3:28 react PRO

For our demo React Native application, we want to persist some notes about Github users. To make that quick and easy, we are going to take advantage of FireBase's REST API to have data persistence in minutes.

react tutorial about Build a View with React Native's ListView Component

Build a View with React Native's ListView Component

9:37 react PRO

Displaying lists of data efficiently is an important aspect of native applications. React Native provides the ListView component to accomplish this. We will use the ListView component to display our application's notes that we persisted in Firebase.

react tutorial about Complete the Notes view in React Native

Complete the Notes view in React Native

2:38 react PRO

In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code.

react tutorial about React components in ES6 classes

React components in ES6 classes

3:29 react PRO

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 tutorial about React Mixins with ES6 Components

React Mixins with ES6 Components

3:36 react PRO

Sometimes called higher order functions or wrapper components, the React mixin functionality can be recreated easily with a simple function in ES6.

react tutorial about Unit testing a React component using Jasmine and Webpack

Unit testing a React component using Jasmine and Webpack

4:04 react

An introduction on unit testing a ReactJS component using Webpack and Jasmine. Learn how to use Webpack to package and import dependencies plus take advantage of the babel-loader to write a simple Jasmine spec using the latest ES6 syntax.

react tutorial about Use JSX as an Express templating engine with react-engine

Use JSX as an Express templating engine with react-engine

5:25 react PRO

react-engine from Paypal eliminates the need for third-party template engines and allows us to use JSX directly to generate server side views in Express.

react tutorial about Isomorphic React with react-engine

Isomorphic React with react-engine

4:31 react PRO

Outside of providing an express template engine for JSX, react-engine allows us to utilize the same templates for client side interaction.

react tutorial about Isomorphic Routing in React with react-engine

Isomorphic Routing in React with react-engine

7:30 react PRO

In React, Using react-router (which installs alongside react-engine), we can create isomorphic routing for our application.

react tutorial about Normalize Events with Reacts Synthetic Event System

Normalize Events with Reacts Synthetic Event System

2:45 react

Event handlers are passed an instance of SyntheticEvent in React. In this video we'll take a look at the wide range of events available to us, including Touch events.

react tutorial about DOM Event Listeners in a React Component

DOM Event Listeners in a React Component

3:43 react PRO

This lesson shows how to attach DOM events not provided by the React synthetic event system to a React component.

react tutorial about Reloading React component tests using webpack-dev-server

Reloading React component tests using webpack-dev-server

2:16 react

Unit testing a React component using Webpack and Jasmine, can involve slow and repetitive tasks when confirming that tests are passing when your code changes. For example, manually running commands instructing webpack to compile code plus refreshing the browser. This lesson demonstrates how to speed up your development time by automating these tasks using webpack-dev-server.

react tutorial about React Native: TabBarIOS Basics

React Native: TabBarIOS Basics

4:22 react

In this lesson we'll create a tabbed interface using the React Native TabBarIOS & TabBarIOS.Item components

react tutorial about React Native: Debugging on an iOS Device

React Native: Debugging on an iOS Device

4:15 react

In this lesson we'll explore debugging our React Native application in an actual iOS device.

react tutorial about React Native: TabBarIOS Customization

React Native: TabBarIOS Customization

3:22 react PRO

In this lesson we'll look at some simple ways to customize TabBarIOS, creating a scrollable tab area, and implementing custom icons in TabBarIOS.Item.

react tutorial about React Native: LayoutAnimation Basics

React Native: LayoutAnimation Basics

4:57 react

React Native's LayoutAnimation provides a simple method for animating styles as they are applied to our views.

react tutorial about React Native: PanResponder Basics

React Native: PanResponder Basics

5:38 react PRO

In this lesson we'll look at the PanResponder API in React Native and create a draggable view. PanResponder is a high level wrapper around Gesture Responder System providing us with new and simpler object called gestureState to track the state of pan gestures.

react tutorial about React Native: Create a Swipe Panel

React Native: Create a Swipe Panel

7:03 react PRO

In this lesson we'll use PanResponder and LayoutAnimation to create a smoothly animated Swipe Panel commonly implemented in iOS and Android applications.

react tutorial about Linting React JSX with ESLint (in ES6)

Linting React JSX with ESLint (in ES6)

4:55 react

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins. We walk through setting up ESLint in a project, using the eslint --init CLI tool with the JSX and ES6 options, writing a React component in JSX, and adding some extra react linting rules with a plugin. ESLint is built to be "pluggable" with simple, extendable, modular rules and an API for writing and using plugins. ESLint has many rules which are all turned off by default; you can extend the core "recommended" rules which will catch common JavaScript errors, and you can also turn on stylistic rules for code consistency. You can also use plugin rules which we do in this lesson with the eslint-plugin-react package.

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

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

6:17 react PRO

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.

react tutorial about Intro to inline styles in React components

Intro to inline styles in React components

5:32 react

React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case (borderRadius) instead of kebab-case (border-radius). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading issues or trying to figure out how to re-use a component...everything that belongs to a component is self contained with the component!

react tutorial about React-Motion: Introduction to the Spring Component

React-Motion: Introduction to the Spring Component

2:03 react

Spring is the simplest component available to us in React-Motion. It allows us to transition from a defaultValue to an endValue leaving what to do with that value as it transitions up to us. In this lesson we'll create a simple Spring and use it to update the style of our component.

react tutorial about React-Motion: Configuring a Spring Component

React-Motion: Configuring a Spring Component

3:47 react

In this lesson we'll configure our React-Motion Spring to animate multiple values simultaneously and also look at how those animations can be more finely controlled by setting our Spring's stiffness and damping values.

react tutorial about React-Motion: Animate Multiple Elements with a Single Spring

React-Motion: Animate Multiple Elements with a Single Spring

4:03 react

In this lesson we'll configure a single react-motion Spring component to manage the animation of multiple elements.

react tutorial about React-Motion: TransitionSpring Basics

React-Motion: TransitionSpring Basics

2:59 react

In this lesson we'll look at how to animate the adding and removing of components using React-Motion's TransitionSpring and how it differs from a standard Spring component.

react tutorial about Increasing reusability with React container components

Increasing reusability with React container components

4:32 react PRO

You can increase reuse in your codebase by dividing your components into containers and content, or as some people call them, smart and dumb components. This lesson walks through a very simple refactoring to demonstrate this concept and show you how to maximize the portability of your React components.

react tutorial about Building an accordion component with React

Building an accordion component with React

8:11 react

In this lesson, we build an accordion component (similar to Chrome's native <details> and <summary> elements) with React. We walk through setting up the component render function, props, state, propType validation, and adding conditional inline styling based on the state (if the accordion details are active or not). All done in ES6.

react tutorial about Debugging components with the React Developer Tools extension

Debugging components with the React Developer Tools extension

3:39 react

The React Developer Tools are an extension that can be added to Chrome and Firefox to help with debugging React applications. In this lesson, we walk through how to use these developer tools to view, edit, and debug your React components, including: the React browser tab, inspecting components in parallel with the Elements tab, using React components in the console, searching by component name, and debugging component state and props.

react tutorial about Flux Architecture: Overview and Project Setup

Flux Architecture: Overview and Project Setup

6:56 react

In this lesson we'll look at an overview of how Flux works, setup our application structure and tools, and create our first component.

react tutorial about Flux Architecture: Application Dispatcher

Flux Architecture: Application Dispatcher

1:55 react PRO

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

react tutorial about Flux Architecture: Application Actions

Flux Architecture: Application Actions

3:25 react PRO

In this lesson we'll build our actions which will be sent to our dispatcher.

react tutorial about Flux Architecture: Application Store

Flux Architecture: Application Store

5:56 react PRO

In this lesson we'll create our Flux application's store which will manage the state of our application.

react tutorial about Flux Architecture: Components/Views

Flux Architecture: Components/Views

9:11 react PRO

In this lesson we'll create our initial components using the architecture we've built so far.

react tutorial about Flux Architecture: Higher-Order Components

Flux Architecture: Higher-Order Components

5:29 react PRO

In this lesson we'll shift the responsibility of managing the state of our application over to a higher-order component rather than having each component managing it's own state.

react tutorial about Flux Architecture: Project Organization

Flux Architecture: Project Organization

2:38 react PRO

In this lesson we'll organize our components by feature.

react tutorial about Flux Architecture: Routing with react-router 1.0

Flux Architecture: Routing with react-router 1.0

6:00 react PRO

In this lesson we'll introduce routing into our application using react-router 1.0

react tutorial about Flux Architecture: Component Wrap Up

Flux Architecture: Component Wrap Up

6:09 react PRO

Using our established architecture we'll make short work of a few remaining tasks to meet our application requirements.

react tutorial about Flux Architecture: Dumb Stores

Flux Architecture: Dumb Stores

2:03 react PRO

In this lesson we'll simplify future development by reducing the logic contained in our application's store.

react tutorial about Building stateless function components (new in React 0.14)

Building stateless function components (new in React 0.14)

4:14 react

In React 0.14+, you can write stateless components as pure functions called "stateless function[al] components"; in well designed apps, these "pure" components should be the majority of your application and can be tied together by a few "smart" wrapper components that control your state and pass down needed data to the pure components. In this lesson, we walk through the syntax of stateless function components, converting to them from stateless classes, and best practices in using them with stateful (aka "smart") components.

This lesson assumes use of ES6 and JSX.

react tutorial about Use create-react-app to Setup a Simple React App

Use create-react-app to Setup a Simple React App

3:14 react

React requires some initial setup before we can get going with the app. In this lesson, we will use create-react-app to do this initial setup for us.

react tutorial about Compose React Component Behavior with Higher Order Components

Compose React Component Behavior with Higher Order Components

4:05 react

Higher order components will allow you to apply behaviors to multiple React components. This can be done by passing the state and any functions into components as props.

react tutorial about Extracting Private React Components

Extracting Private React Components

1:52 react PRO

In this lesson we leverage private components to break our render function into more manageable pieces without leaking the implementation details of our component.

react tutorial about React Testing: Setting up dependencies

React Testing: Setting up dependencies

0:46 react

To write tests for our React code, we need to first install some libraries for running tests and writing assertions. In this lesson we walk through setting up Mocha as our test runner and expect as our assertion library. We will also set up some React and JSX specific test tools (React Test Utils) to make writing our tests easier.

NOTE: There are many alternatives to Mocha, expect, and the other test tools we use in this course. Although we use these specific tools and libraries, the testing principles apply to all other tools.

react tutorial about React Testing: Running tests

React Testing: Running tests

1:54 react

In this lesson, we walk through how to setup our tests and run them. We write a quick empty first test and assertion, so we can run the tests. Using Mocha, we can do this manually each time with the Mocha CLI. We can also automate this using task runner features from tools like Grunt, Gulp, Webpack, or npm scripts. In this course, we will use the common npm test script setup to run our tests. We will also use the Babel compiler to write our tests with modern JavaScript syntax.

react tutorial about React Testing: Utility modules

React Testing: Utility modules

2:19 react

When writing tests for our React code, it is helpful to pull out any functionality that doesn't have to do with our UI components into separate modules, so that they can be tested separately. In this lesson, we will take a look at a React component and how we can pull out some of its generic utility logic into a separate module. We will then write some tests for that module.

react tutorial about React Testing: Intro to Shallow Rendering

React Testing: Intro to Shallow Rendering

1:55 react

In this lesson, we walk through how to use one of React's Test Utilities (from the react-addons-test-utils package) called "Shallow Rendering". This lets us render our React component one level deep - without a DOM - so that we can write tests for it. It works kind of like ReactDOM.render, where the shallow renderer is a temporary place to "hold" your rendered component so that you can assert things about its output. Tests written using the shallow renderer are great for stateless or "dumb" components that simply have their props passed to them from a parent container or "smart" component. These shallow renderer tests work especially well with stateless function components. They also work well for "unit" tests where you want to make sure your code works in isolation.

NOTE: The React team has recommended composing the majority of your apps using these stateless "dumb" components, so the majority of lessons in this course will focus on writing simple unit tests for these stateless components using Shallow Rendering. If you also want to write tests for the stateful components that are tied to different components and state and can't be tested in isolation, you may want to look at using a DOM (with something like Karma or jsdom) and React's other test utilities like renderIntoDocument and Simulate. However, I've found that it is helpful to try to compose most of your project with simple, isolated, stateless or "pure" components that can be unit tested with Shallow Rendering, and then wrap these components with a few stateful or "impure" components that you can either not worry about testing (what I do most of the time because it is difficult to test stateful components), or write separate integration and functional tests for them using different tools.

react tutorial about React Testing: JSX error diffs

React Testing: JSX error diffs

3:43 react

When writing React component tests, it can be hard to decipher the error diffs of broken tests, since they are just the final objects that React uses under the hood. There are some nice libraries that let you extend your assertion library to show JSX diffs; in this lesson we will wire up one of these libraries to show how to debug JSX error diffs from your React tests. We will also show how narrowing down what you are testing helps to make the test error diffs easier to deal with.

NOTE: This lesson uses the expect-jsx package, but there are other options available for both expect and other assertion libraries.

react tutorial about React Testing: Element types with Shallow Rendering

React Testing: Element types with Shallow Rendering

1:09 react

When you render a component with the Shallow Renderer, you have access to the underlying object. We can write lots of useful tests to check that our components are working as expected. In this lesson, we will use the type property on the shallow rendered component to make sure that the root element is what we expect it to be.

react tutorial about React Testing: className with Shallow Rendering

React Testing: className with Shallow Rendering

2:49 react

The React Shallow Renderer test utility lets us inspect the output of a component one level deep. In this lesson, we will examine the rendered output of props, specifically the className prop. We will then use the ES2015 String.includes() method to check that our rendered className includes what we expect.

react tutorial about React Testing: Conditional className with Shallow Rendering

React Testing: Conditional className with Shallow Rendering

2:16 react

Often our components have output that shows differently depending on the props it is given; in this lesson, we go over how to compare the className prop element tree output based on conditional input.

react tutorial about React Testing: Reusing test boilerplate

React Testing: Reusing test boilerplate

2:21 react

Setting up a shallow renderer for each test can be redundant, especially when trying to write similar tests that have slight tweaks. In this lesson, we go over how you can reduce some of the overlapping code so that each test only contains the unique pieces of the test.

react tutorial about React Testing: Children with Shallow Rendering

React Testing: Children with Shallow Rendering

3:27 react

When testing React components, we often want to make sure the rendered output of the component matches what we expect. With the React Shallow Renderer, we can check the entire rendered output of a component, the children prop, or a subset of the children prop. We can also use 3rd party libraries to check that this element tree includes a specific piece. In this lesson we will walk through examples of each.

react tutorial about React Testing: The Redux Store - Multiple Actions

React Testing: The Redux Store - Multiple Actions

7:53 react

When using Redux, we can test that our application state changes are working by testing that dispatching actions to the store creates our expected output. In this lesson we will run a few realistic actions back to back (as if the user is using the app) and then test that the state tree looks as we expect it to. These types of tests that ensure all of your redux logic is working as expected give you a lot of value for not too much effort (they test your entire app's state in one big swoop). You may also find it useful to add more granular/individual tests for your reducers and/or actions, which we will cover in other lessons in this course.

NOTE: This lesson assumes you have used Redux. If you are new to Redux, it is recommended that you first watch the Getting Started With Redux course.

react tutorial about React Testing: The Redux Store - Initial State

React Testing: The Redux Store - Initial State

1:32 react

When using Redux, it can be useful to test that your initial state is being rendered as expected. In this lesson, we will set up a test to check the initial state of our store.

react tutorial about React Testing: Redux Reducers

React Testing: Redux Reducers

6:42 react

Sometimes we want to test our Redux reducers to make sure they work as expected. In this lesson we will walk through setting up some Redux reducer tests for common situations and edge cases.

react tutorial about Using React with the FullCalendar jQuery plugin

Using React with the FullCalendar jQuery plugin

2:55 react

In this lesson, we use React and the FullCalendar.js JQuery plugin to demonstrate how you can use complex JQuery plugins to create dynamic React components.

react tutorial about Getting started with the react-rails gem

Getting started with the react-rails gem

3:00 react

React and Ruby on Rails play very nicely together if you are using the react-rails gem. Using react-rails, you can easily drop in React components throughout your Rails application. In this lesson, we will get react-rails installed and create our first React component.

react tutorial about Styling a React button component with Radium

Styling a React button component with Radium

1:29 react

React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo selectors like :hover and :active. By using Radium to listen to mouse events we can restore :hover and :active selectors to inline styles.

react tutorial about React Router: activeStyle & activeClassName

React Router: activeStyle & activeClassName

1:03 react PRO

react-router provides two props for setting a specific style on a Link component whose path matches our current route. activeStyle allows for an inline style while activeClassName allows for an class defined in an external stylesheet.

react tutorial about React Router: Route Parameters

React Router: Route Parameters

2:20 react PRO

A router library is no good if we have to hardcode every single route in our application. In this lesson we look at how to access variables in our routes and pass them into our components.

react tutorial about React Router: Development Environment Setup

React Router: Development Environment Setup

4:43 react PRO

In this lesson we'll install our dependencies and setup a simple build process for converting our ES6 into ES5 using Babel and Webpack for the rest of the react-router lessons.

react tutorial about React Router: hashHistory vs browserHistory

React Router: hashHistory vs browserHistory

1:39 react PRO

In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browserHistory which delivers clean urls, but requires server work to implement

react tutorial about React Router: Querystring Parameters

React Router: Querystring Parameters

2:22 react PRO

In this lesson we'll extract props for our component from a querystring in the route url.

react tutorial about React Router: Router, Route, and Link

React Router: Router, Route, and Link

2:54 react

In this lesson we'll take our first look at the most common components available to us in react-router; Router, Route, and Link.

react tutorial about React Router: IndexRoute

React Router: IndexRoute

1:55 react PRO

IndexRoute allows us to define a default child component to be rendered at a specific route when no other sub-route is available.

react tutorial about React Router: setRouteWillLeaveHook

React Router: setRouteWillLeaveHook

3:29 react PRO

setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route.

react tutorial about React Router: Redirect

React Router: Redirect

1:25 react PRO

The Redirect component in react-router does exactly what it sounds like. It allows us to redirect from from one route to another.

react tutorial about React Router: Nested Routes

React Router: Nested Routes

2:08 react PRO

Since react-router routes are components, creating nested routes is as simple as making one route a child of another in JSX. In this lesson we'll explore nesting routes and accessing the children of parent routes.

react tutorial about React Router: Named Components

React Router: Named Components

2:28 react PRO

In this lesson we'll learn how to render multiple component children from a single route.

react tutorial about Core Concepts of React: Components, Props, and State

Core Concepts of React: Components, Props, and State

6:54 react

In this lesson we'll dig into the absolute fundamentals of React by exploring the concepts of components, properties, and state and how they work together to build React applications.

react tutorial about Radium: Updating Button Styles via Props

Radium: Updating Button Styles via Props

0:47 react

In a CSS library like Bootstrap we can set a button's style to be "primary" or "secondary" by appending classes. For React components we want to be able to do this via props. Radium enables this by composing styles via an array. This mimicks the cascade of CSS.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?