ReactAndJS

all videos

Watch User Created Playlist (134)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

React Flux: Actions

P

Promises with ES6

Publishing to npm

Pushing to GitHub

Quantitative Scales

P

Querying an Immutable.js Map()

P

Radium: Updating Button Styles via Props

React Animation with CSSTransitionGroup

P

React CSS in JavaScript with Radium

P

React Flux: Components/Views

P

React Flux: Development Environment Setup

React Flux: Overview and Dispatchers

React Flux: Project Organization

P

React Flux: Remove Duplicate Code with Mixins

P

React Flux: Routing with react-router-component

P

React Flux: Stores

P

React Flux: Wrapping Up

P

Access Nested Data with Reacts props.children

Build a JSX Live Compiler as a React Component

Understand the React Component Lifecycle Methods

Manage React Component State with Lifecycle Methods

Control React Component Updates When New Props Are Received

Write More Reusable React Components with Composable APIs

Debug React Components with Developer Tools in Chrome

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

Use map to Create React Components from Arrays of Data

Write a "Hello World" React Component

Compose React Component Behavior with Higher Order Components

React Fundamentals: Integrating Components with D3 and AngularJS

P

Set Properties on React Components

Understand JSX at a Deeper Level

Use React Components as Children for Other Components

Manage React Component State with setState

Display Output in React with a Component's render Method

Use React ref to Get a Reference to Specific Components

React Mixins

React Mixins with ES6 Components

P

React Native: Basic iOS Routing

React Native: Build a Github Repositories component

P

React Native: Build a Notes view with the ListView component

P

React Native: Build a Separator UI component

P

React Native: Complete the Notes view

P

React Native: Create a Swipe Panel

P

React Native: Create a component using ScrollView

P

React Native: Debugging on an iOS Device

React Native: Error Handling and ActivityIndicatorIOS

P

React Native: LayoutAnimation Basics

React Native: Navigate to the Repositories component

P

React Native: PanResponder Basics

P

React Native: Passing data when changing routes

P

React Native: Persisting data with Firebase REST API

P

React Native: Reusable components with required propType

P

React Native: State and Touch Events

P

React Native: TabBarIOS Basics

React Native: TabBarIOS Customization

P

React Native: Up and Running

React Native: Using fetch to load external API data

P

React Native: Using the Image component and reusable styles

P

React Native: Using the WebView component

P

React Native: fetch API introduction

P

React Router: Development Environment Setup

P

React Router: IndexRoute

P

React Router: Named Components

P

React Router: Nested Routes

P

React Router: Querystring Parameters

P

React Router: Redirect

P

React Router: Route Parameters

P

React Router: Router, Route, and Link

React Router: activeStyle & activeClassName

P

React Router: hashHistory vs browserHistory

P

React Router: setRouteWillLeaveHook

P

Normalize Events with Reacts Synthetic Event System

React Testing: Children with Shallow Rendering

P

React Testing: Conditional className with Shallow Rendering

P

React Testing: Element types with Shallow Rendering

P

React Testing: Intro to Shallow Rendering

P

React Testing: JSX error diffs

P

React Testing: Redux Reducers

P

React Testing: Reusing test boilerplate

P

React Testing: Running tests

React Testing: Setting up dependencies

React Testing: The Redux Store - Initial State

P

React Testing: The Redux Store - Multiple Actions

P

React Testing: Utility modules

P

React Testing: className with Shallow Rendering

P

React and Firebase with ReactFire

P

React components in ES6 classes

P

React in 7 Minutes

React with-addons - ReactLink

React-Motion: Animate Multiple Elements with a Single Spring

React-Motion: Configuring a Spring Component

React-Motion: Introduction to the Spring Component

React-Motion: TransitionSpring Basics

Reacting to multiple inputs using RxJS's combineLatest

P

Reactive Programming - Async requests and responses in RxJS

P

Reactive Programming - An overview of reactive concepts

P

Reactive Programming - Clear data while loading with RxJS startWith

P

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

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

Redux: Describing State Changes with Actions

Redux: Extracting Action Creators

Redux: Extracting Container Components (FilterLink)

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

Redux: Extracting Presentational Components (Todo, TodoList)

Redux: Generating Containers with connect() from React Redux (AddTodo)

Redux: Generating Containers with connect() from React Redux (FooterLink)

Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

Redux: Implementing Store from Scratch

Redux: Implementing combineReducers() from Scratch

Redux: Passing the Store Down Explicitly via Props

Redux: Passing the Store Down Implicitly via Context

Redux: Passing the Store Down with <Provider> from React Redux

Redux: Pure and Impure Functions

Redux: React Counter Example

Redux: React Todo List Example (Adding a Todo)

Redux: React Todo List Example (Filtering Todos)

Redux: React Todo List Example (Toggling a Todo)

Redux: Reducer Composition with Arrays

Redux: Reducer Composition with Objects

Redux: Reducer Composition with combineReducers()

Redux: Store Methods: getState(), dispatch(), and subscribe()

Redux: The Reducer Function

Redux: The Single Immutable State Tree

Redux: Writing a Counter Reducer with Tests

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

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

Refactoring: Unit Test Coverage Report Setup

P

Reflux - Creating Your First Action in React

Reflux - Aggregate Stores

P

Reflux - Loading data with Superagent

P

Reflux - Using Any Library for Model Changes

P

Reflux - Manually Triggering Actions

P

Reloading React component tests using webpack-dev-server

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.

js tutorial about Promises with ES6

Promises with ES6

5:51 js

Promises in JavaScript (es6/es2015). Creating and using promises with ECMAscript 2015 in your JavaScript application.

js tutorial about Publishing to npm

Publishing to npm

2:36 js

Putting your code up on GitHub is helpful, but publishing your library to npm makes it even easier for people to use your library. In this lesson, you'll learn how to publish your library and validate that it published correctly.

js tutorial about Pushing to GitHub

Pushing to GitHub

2:34 js

Once you've written some code and you feel good about it, it's time to commit that code and push it up to your GitHub repository for storage and collaboration.

Quantitative Scales

3:59 d3 PRO

In D3 quantitative scales allow you do easily divide aspects of your chart evenly based on the dataset. In this lesson, Ben will continue to show you the variety of scaling options available in D3.

js tutorial about Querying an Immutable.js Map()

Querying an Immutable.js Map()

4:47 js PRO

Learn how to query an Immutable.Map() using get, getIn, has, includes, find, first and last. These are powerful operators that make finding data in an object graph pain free.

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.

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

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 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.

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.

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.

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 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 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 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 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.

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 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 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.

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 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.

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.

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.

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.

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 React Mixins

React Mixins

3:24 react

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

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 React Native: Basic iOS Routing

React Native: Basic iOS Routing

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 React Native: Build a Github Repositories component

React Native: Build a Github Repositories component

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 React Native: Build a Notes view with the ListView component

React Native: Build a Notes view with the 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 React Native: Build a Separator UI component

React Native: Build a Separator 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 React Native: Complete the Notes view

React Native: Complete the Notes view

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 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 React Native: Create a component using ScrollView

React Native: Create a component using 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 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: Error Handling and ActivityIndicatorIOS

React Native: Error Handling and ActivityIndicatorIOS

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 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: Navigate to the Repositories component

React Native: Navigate to the Repositories 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 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: Passing data when changing routes

React Native: Passing data when changing routes

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 React Native: Persisting data with Firebase REST API

React Native: Persisting data 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 React Native: Reusable components with required propType

React Native: Reusable components with required propType

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 React Native: State and Touch Events

React Native: State and Touch Events

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 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: 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: Up and Running

React Native: Up and Running

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 React Native: Using fetch to load external API data

React Native: Using fetch to load external API data

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 React Native: Using the Image component and reusable styles

React Native: Using the Image component and reusable styles

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 React Native: Using the WebView component

React Native: Using the 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 React Native: fetch API introduction

React Native: fetch API introduction

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 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: 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: 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 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: 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: 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: 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: 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: 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: 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: 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 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 React Testing: Children with Shallow Rendering

React Testing: Children with Shallow Rendering

3:27 react PRO

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: Conditional className with Shallow Rendering

React Testing: Conditional className with Shallow Rendering

2:16 react PRO

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: Element types with Shallow Rendering

React Testing: Element types with Shallow Rendering

1:09 react PRO

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: Intro to Shallow Rendering

React Testing: Intro to Shallow Rendering

1:55 react PRO

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 PRO

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: Redux Reducers

React Testing: Redux Reducers

6:42 react PRO

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 React Testing: Reusing test boilerplate

React Testing: Reusing test boilerplate

2:21 react PRO

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: 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: 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: The Redux Store - Initial State

React Testing: The Redux Store - Initial State

1:32 react PRO

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: The Redux Store - Multiple Actions

React Testing: The Redux Store - Multiple Actions

7:53 react PRO

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: Utility modules

React Testing: Utility modules

2:19 react PRO

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: className with Shallow Rendering

React Testing: className with Shallow Rendering

2:49 react PRO

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

rx tutorial about Reacting to multiple inputs using RxJS's combineLatest

Reacting to multiple inputs using RxJS's combineLatest

7:36 rx PRO

There are certain situations in which you’ll want access to the latest values from multiple Observables whenever any one of them produces a value. This is exactly what combineLatest was designed for, and in this lesson we’ll use it to build up an image url that requires values from 3 different inputs - triggered every time any one of them change.

rx tutorial about Reactive Programming - Async requests and responses in RxJS

Reactive Programming - Async requests and responses in RxJS

7:14 rx PRO

In this lesson we start building a small UI widget: suggestions box displaying users to follow in Github. We will learn how to perform network requests to a backend using RxJS Observables.

rx tutorial about Reactive Programming - An overview of reactive concepts

Reactive Programming - An overview of reactive concepts

2:14 rx PRO

This video gives an overview of the concepts of reactive programming we saw during this series, and explains how reactive programming can provide true separation of concerns.

rx tutorial about Reactive Programming - Clear data while loading with RxJS startWith

Reactive Programming - Clear data while loading with RxJS startWith

6:28 rx PRO

Let's fix a small UI glitch that was occurring on startup and whenever the refresh button was clicked. In this lesson we will see how to avoid common bad habits of imperative programming, and how to use reactive programming to keep the complete dynamic behavior of a value specified in one convenient place.

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

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

3:54 js

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

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

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

2:38 js

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

js tutorial about Redux: Describing State Changes with Actions

Redux: Describing State Changes with Actions

2:54 js

You will learn how Redux asks you to describe every change in the application state as a plain JavaScript object called “action”.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

js tutorial about Redux: Extracting Action Creators

Redux: Extracting Action Creators

3:52 js

Learn how to keep code maintainable and self-documenting by extracting action creators from the components.

js tutorial about Redux: Extracting Container Components (FilterLink)

Redux: Extracting Container Components (FilterLink)

8:04 js

Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components.

js tutorial about Redux: Extracting Container Components (VisibleTodoList, AddTodo)

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

6:19 js

Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components.

js tutorial about Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

8:35 js

Learn how to separate the looks from the behavior by extracting presentational components.

js tutorial about Redux: Extracting Presentational Components (Todo, TodoList)

Redux: Extracting Presentational Components (Todo, TodoList)

4:52 js

Learn how to separate the looks from the behavior by extracting presentational components.

js tutorial about Redux: Generating Containers with connect() from React Redux (AddTodo)

Redux: Generating Containers with connect() from React Redux (AddTodo)

4:41 js

Learn how to inject dispatch() as a prop into a React component by using connect() from React Redux library.

js tutorial about Redux: Generating Containers with connect() from React Redux (FooterLink)

Redux: Generating Containers with connect() from React Redux (FooterLink)

3:27 js

Learn how to use container’s own props inside the mapStateToProps() and mapDispatchToProps() functions.

js tutorial about Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

5:13 js

Learn how to write mapStateToProps() and mapDispatchToProps() functions and use connect() from React Redux library to generate container components.

js tutorial about Redux: Implementing Store from Scratch

Redux: Implementing Store from Scratch

2:28 js

Learn how to build a reasonable approximation of the Redux Store in 20 lines. No magic!

js tutorial about Redux: Implementing combineReducers() from Scratch

Redux: Implementing combineReducers() from Scratch

4:22 js

Learn how to build a reasonable approximation of the combineReducers() utility in 15 lines. No magic!

js tutorial about Redux: Passing the Store Down Explicitly via Props

Redux: Passing the Store Down Explicitly via Props

3:54 js

Learn how to pass store down as a prop to container components instead of declaring a top-level variable to prepare for easier testing and server rendered applications.

js tutorial about Redux: Passing the Store Down Implicitly via Context

Redux: Passing the Store Down Implicitly via Context

7:56 js

Learn how to make the store object available to all components by using the advanced React feature called “context”.

js tutorial about Redux: Passing the Store Down with <Provider> from React Redux

Redux: Passing the Store Down with <Provider> from React Redux

1:30 js

Learn how to use the Provider that comes with React Redux instead of the hand-rolled implementation from the previous lesson.

js tutorial about Redux: Pure and Impure Functions

Redux: Pure and Impure Functions

1:19 js

Some functions are more predictable than others. You will learn the difference between the pure and impure functions. Understanding this difference is essential for writing Redux applications.

js tutorial about Redux: React Counter Example

Redux: React Counter Example

2:18 js

Before you use the React Redux bindings, learn how to create a complete simple application with just React and Redux.

js tutorial about Redux: React Todo List Example (Adding a Todo)

Redux: React Todo List Example (Adding a Todo)

7:25 js

Learn how to create a React todo list application using the reducers we wrote before.

js tutorial about Redux: React Todo List Example (Filtering Todos)

Redux: React Todo List Example (Filtering Todos)

8:14 js

Learn how to create a React todo list application using the reducers we wrote before.

js tutorial about Redux: React Todo List Example (Toggling a Todo)

Redux: React Todo List Example (Toggling a Todo)

3:29 js

Learn how to create a React todo list application using the reducers we wrote before.

js tutorial about Redux: Reducer Composition with Arrays

Redux: Reducer Composition with Arrays

2:21 js

Learn the fundamental pattern of building maintainable Redux applications: the reducer composition, and how it can be used to update items in an array.

js tutorial about Redux: Reducer Composition with Objects

Redux: Reducer Composition with Objects

2:42 js

Learn the fundamental pattern of building maintainable Redux applications: reducer composition, and how it can be used to update properties of an object.

js tutorial about Redux: Reducer Composition with combineReducers()

Redux: Reducer Composition with combineReducers()

2:10 js

Learn how to use combineReducers() utility function to generate a reducer from several other reducers instead of writing it by hand.

js tutorial about Redux: Store Methods: getState(), dispatch(), and subscribe()

Redux: Store Methods: getState(), dispatch(), and subscribe()

3:09 js

We will learn about the Redux Store and demonstrate how its three methods let us implement a counter application.

js tutorial about Redux: The Reducer Function

Redux: The Reducer Function

1:54 js

There is something in common between all Redux applications. They have to implement the reducer: a function that calculates the next state tree based on the previous state tree and the action being dispatched.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

js tutorial about Redux: The Single Immutable State Tree

Redux: The Single Immutable State Tree

2:11 js

How is Redux different from Backbone or Flux? Learn the first principle of Redux—the single immutable state tree.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

js tutorial about Redux: Writing a Counter Reducer with Tests

Redux: Writing a Counter Reducer with Tests

2:36 js

You will learn how to write the reducer for the counter application in a test driven development way, as well as the conventions in implementing reducers.

js tutorial about Redux: Writing a Todo List Reducer (Adding a Todo)

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

4:11 js

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

js tutorial about Redux: Writing a Todo List Reducer (Toggling a Todo)

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

2:47 js

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

angularjs tutorial about Refactoring: Unit Test Coverage Report Setup

Refactoring: Unit Test Coverage Report Setup

5:42 angularjs PRO

The "R" word. Refactoring. The first step in refactoring code is to make sure we are covering the existing code with tests. If we aren't refactoring against tested code, we are just changing stuff. In this lesson, we'll start taking a look at some code that needs refactoring, and get test coverage reports setup.

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 - 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 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 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 - 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 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.

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