React, Redux & ES6

Watch User Created Playlist (77)

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

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 Fundamentals: Integrating Components with D3 and AngularJS

P

Debug React Components with Developer Tools in Chrome

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

Compose React Component Behavior with Higher Order Components

Redux: The Single Immutable State Tree

Redux: Describing State Changes with Actions

Redux: Pure and Impure Functions

Redux: The Reducer Function

Redux: Writing a Counter Reducer with Tests

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

Redux: Implementing Store from Scratch

Redux: React Counter Example

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

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

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

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

Redux: Reducer Composition with Arrays

Redux: Reducer Composition with Objects

Redux: Reducer Composition with combineReducers()

Redux: Implementing combineReducers() from Scratch

Redux: React Todo List Example (Adding a Todo)

Redux: React Todo List Example (Toggling a Todo)

Redux: React Todo List Example (Filtering Todos)

Redux: Extracting Presentational Components (Todo, TodoList)

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

Redux: Extracting Container Components (FilterLink)

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

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: Generating Containers with connect() from React Redux (VisibleTodoList)

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

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

Redux: Extracting Action Creators

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

Intro to ES6 and traceur compiler

traceur compiler and Grunt

P

The let keyword in ES6

Arrow Function => in ES6

Default Values for Function Parameters in ES6

Destructuring Assignment in ES6

Array Comprehensions - NON-STANDARD

Use Template Literals in ES6

ES6 (ES2015) - Generators

Shorthand Properties in ES6

Using the ES6 spread operator

Object Enhancements in ES6

ES6 Modules (ES2015) - Import and Export

Writing next generation JavaScript with Babel 5 (out of date)

const Declarations in es6 (ES2015)

Converting an array-like object into an Array with Array.from()

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

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

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

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.

js tutorial about Intro to ES6 and traceur compiler

Intro to ES6 and traceur compiler

2:42 js

es6 is the next generation of javascript. You can use it today with the traceur compiler library. Also be sure to check out es6fiddle to start playing with ECMAscript 6 right now.

js tutorial about traceur compiler and Grunt

traceur compiler and Grunt

3:30 js PRO

Build and watch ECMAscript 6 using traceur compiler and Grunt.

js tutorial about The let keyword in ES6

The let keyword in ES6

2:58 js

Block scoping can be surprising, and sometimes confusing, in Javascript. With es6, we have access to the let keyword to remove this pain.

js tutorial about Arrow Function => in ES6

Arrow Function => in ES6

2:57 js

ECMAscript 6 introduces the "arrow function" as a shortcut for creating anonymous functions with this scope bound.

js tutorial about Default Values for Function Parameters in ES6

Default Values for Function Parameters in ES6

2:16 js

With ECMAscript 6 we get the luxury of default parameters for our functions.

js tutorial about Destructuring Assignment in ES6

Destructuring Assignment in ES6

4:33 js

ECMAscript 6 destructuring provides flexible options for variable assignment.

js tutorial about Array Comprehensions - NON-STANDARD

Array Comprehensions - NON-STANDARD

2:28 js

Array Comprehensions didn't make the ES6 cut. You probably shouldn't use them ;)

See comments.

js tutorial about Use Template Literals in ES6

Use Template Literals in ES6

4:12 js

ECMAscript 6 lets us use string templates to gain a lot more control over strings in JavaScript.

js tutorial about ES6 (ES2015) - Generators

ES6 (ES2015) - Generators

5:28 js

Generators in ECMAscript 6 are first-class coroutines that produce encapsulated suspended execution contexts. Whew! Yield values and iterate over them until no more values exist in the generator. We'll talk more about practical use later ;)

js tutorial about Shorthand Properties in ES6

Shorthand Properties in ES6

1:01 js

Shorthand properties allow you to compose complex objects from other objects.

js tutorial about Using the ES6 spread operator

Using the ES6 spread operator

1:40 js

The spread operator allows you to "explode" an array into its individual elements.

js tutorial about Object Enhancements in ES6

Object Enhancements in ES6

2:12 js

Building on the ES6 Shorthand Properties lesson, John shows the other new Object Enhancements in ES6 that will help you write less code and easily create complex Objects.

js tutorial about ES6 Modules (ES2015) - Import and Export

ES6 Modules (ES2015) - Import and Export

5:33 js

ES6 (ES2015) introduces a standardized module format to Javascript. We'll take a look at the various forms of defining and importing modules. Using Webpack to bundle up our modules and Babel to transpile our ES6 into ES5, we'll put this new module syntax to work within our project. Then we'll examine how to import 3rd party packages from npm, importing lodash with the _ underscore alias using the ES6 module syntax.

js tutorial about Writing next generation JavaScript with Babel 5 (out of date)

Writing next generation JavaScript with Babel 5 (out of date)

3:07 js

Babel is a compiler that lets us right future JavaScript not yet fully in browsers (ES6 / ES2015, ES7 / ES2016, etc) and transpile it back into code that can be used now. We'll walk through installing babel, writing some future JS syntax, transpiling it, and running it in a browser.

This lesson is out of date and uses an older version of Babel.

js tutorial about const Declarations in es6 (ES2015)

const Declarations in es6 (ES2015)

2:14 js

Read only variables are available in JavaScript (es6/es2015). We will use const declarations and their benefits, like read only and block scope.

js tutorial about Converting an array-like object into an Array with Array.from()

Converting an array-like object into an Array with Array.from()

2:19 js

Array.from() lets you convert an "iterable" object (AKA an array-like object) to an array. In this lesson, we go over grabbing DOM nodes and turing them into an array so that we can use methods like Array.filter() and Array.forEach() on them.

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