Bootstrap a Zero Configuration React App with Neutrino

1:05 reactPRO

Setting up tooling for a basic React app is typically very hard to do and requires a lot of configuration. In this lesson, we will setup a new React project with Neutrino with zero configuration. Neutrino uses Webpack and Babel behind the scenes, so you still get great build technology, but without all the heavy lifting of needing to configure it.

Update State in React with Ramda's Evolve

4:29 reactPRO

In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolve function to make our updater function a reusable utility that isn't tied to the React API.

Update Component State in React With Ramda Lenses

4:37 reactPRO

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.

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

Understand the Difference Between the React Router v4 Router Types

6:25 reactPRO

React Router introduces several different router types that are useful for various environments where routing is typically needed. The BrowserRouter, NativeRouter, StaticRouter, HashRouter, and MemoryRouter are all available to suit your needs and requirements. Understanding when and why to use the variety of routers is an important part of understanding React Router v4.

Redirect to Another Page with React Router v4

3:50 reactPRO

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

Intercept Route Changes with React Router v4 Prompt Component

2:18 reactPRO

If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm that data will be lost, React Router v4 provides a Prompt component to interrupt the Route transition and ask the user a question.

Render Nested Routes with React Router v4

2:17 reactPRO

With React Router v4 the entire library is built as a series of React components. That means that creating nested Routes is as simple as creating any other nested element in your application.

Render Multiple Components for the Same Route in React Router v4

2:43 reactPRO

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

We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so a “stack” of Routes will all be processed. To render a single Route exclusively we can wrap them in the Switch component to render the first Route that matches our current URL.

Create Basic Routes with the React Router v4 BrowserRouter

6:08 react

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components.

Use URL Parameters with React Router v4

2:36 reactPRO

URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a particular resource or application state. One way to achieve this is through the use of URL parameters that include important data right in the URL of the route that gets matched in React Router v4.

Use Regular Expressions with Routes with React Router v4

1:52 reactPRO

We can use regular expressions to more precisely define the paths to our routes in React Router v4.

Parse Query Parameters in React Router v4

3:08 reactPRO

React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so that you can use that additional information as required. There are several strategies for doing this that we will look at.

Use the React Router v4 Link Component for Navigation Between Routes

2:01 reactPRO

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen.

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

3:50 reactPRO

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

Run the React Router v4 Examples with Create React App

2:15 react

React Router v4 doesn’t require a lot of configuration to run. The core examples will run out of the box with Create React App. In this lesson, you will create an application and get React Router v4 up and running.

Build an SVG icon component in React

3:51 reactPRO

Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.

You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.

One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.

Inspect Component Events with React Storybook

1:45 reactPRO

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Load React Storybook Stories Dynamically

3:10 reactPRO

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Write the First React Storybook Story

4:34 reactPRO

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

Add React Storybook to a Project

3:35 reactPRO

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Show Temporary Messages in a React Application

2:41 reactPRO

We’ll add a message object to the application state and use that message to conditionally show a message component. We’ll also use a setTimeout to update our state and hide the message after a specified period of time.

Build a Link Component to Navigate to Routes in React

6:32 reactPRO

In this lesson, we’ll create a Link component that manipulates the browser’s address bar using the history API’s pushState method.

Use React Context to Manage Application State Through Routes

7:51 reactPRO

We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down through the component tree.

Update React Application State from Form Input

4:07 reactPRO

We’ll add a handler to the form so we can take new input and use it to update the application state. We’ll append new items to the list with the AddTodo function and replace the todos list in state. We’ll also clear out our form so it can accept new todos.

Synchronize React UI and State with Controlled Components

3:41 reactPRO

We’ll make the input field a “controlled component” by reacting to each change of the input and capturing it in the component state. Following this model gives us assurance that the UI is always a representation of the current application state.

Refactor React Components to be Stateless Functional Components

6:42 reactPRO

We’ll continue the refactoring effort and break the remaining pieces of the application into their own stateless functional components and see how components can be used within other components.

Validate Component Input with Prop Types in React

5:11 reactPRO

React gives us a mechanism called PropTypes to ensure that the property values passed into components are of the correct type. By ensuring the correct data is passed to our components, we can avoid potential bugs and more confidently share components with a team or as open source libraries.

Render a React UI Based on Initial State

5:15 reactPRO

We’ll define a simple state object in the constructor of the App Component class. Once the state has been defined, we’ll replace the static elements in our rendered output with values from the component’s state. We’ll move from static items to an array, seeing how we can use functions like map to render our UI.

Render a React UI with JSX

2:48 react

We’ll dive right into JSX by rendering a static version of what our application will look like. We’ll cover the basic syntax of JSX and point out where it differs from html.

Bootstrap a React Application through the CLI with Create React App

4:19 react

We’ll go from an empty directory to a solid foundation for an application by running a single command. The create-react-app tool handles all of the complicated setup for us so we can focus on building our application.

Render Basic SVG Components in React

1:35 reactPRO

React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG components in ReactJS.

Creating SVG components with React allows you to inline SVG. Inline SVG has an advantage that it can be styled with CSS just like the rest of your webpage and doesn't need a separate web request to load.

An additional advantage is of-course that you can use component props to customize the contents of the SVG.

Use React.cloneElement to Extend Functionality of Children Components

2:14 react

We can utilize React.cloneElement in order to create new components with extended data or functionality.

Understand React.Children Utilities

2:40 react

The data contained in this.props.children is not always what you might expect. React provides React.children to allow for a more consistent development experience.

Jest Snapshot Testing with React Storybook

2:26 reactPRO

React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!

Getting Started with React Storybook

3:41 reactPRO

React Storybook is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our documentation.

Recompose: Theme React Components Live with Context

9:44 reactPRO

SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our theme variables on the context of our app and then read them from individual components in order to make styling decisions. Recompose allows us to create the helper functions we need to do this yielding concise, functional declarative UI components. These components will respond in real time to changes in the theme.

Recompose: Override Styles & Elements Types in React

5:54 reactPRO

When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the ability add the same class to different types of elements to style them consistently. Recompose allows us to regain the ability of override styles and to apply the same styles to different types of elements.

Set up React apps with zero configuration in two minutes

2:02 reactPRO

The React team has an official Command Line Interface (CLI) for building React projects called "Create React App"; in this lesson, we show how to use this tool to quickly set up new projects using the create-react-app {project-name} command. We then use the npm scripts that are provided: npm start to develop, npm run build to ship, and npm run eject to opt out of the abstracted tooling.

The benefits of this tool are:
- It's officially maintained by the React team; this means best practices out of the box
- Zero config, one dependency
- Config is abstracted so React team can make improvements under the hood and you get the new goodness for free
- Clean command line output for errors
- You can "eject" at any time if needed

Creating a Stateless Functional Component in React

3:11 reactPRO

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

Using the classnames library for conditional CSS in React

4:52 reactPRO

Classnames is a simple yet versatile javascript utility that joins CSS class names based on a set of conditions. We are going to build a simple toggle switch that relies on state to determine what CSS classes will be applied.

Redux: Filtering Redux State with React Router Params

4:09 react

We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time.

Redux: Navigating with React Router <Link>

2:38 react

We will learn how to change the address bar using a component from React Router.

Redux: Adding React Router to the Project

1:43 react

We will learn how to add React Router to a Redux project and make it render our root component.

Core Concepts of React: Components, Props, and State

6:54 reactPRO

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 Router: Named Components

2:28 reactPRO

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

React Router: Nested Routes

2:08 reactPRO

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 Router: Redirect

1:25 reactPRO

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

React Router: setRouteWillLeaveHook

3:29 reactPRO

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

React Router: IndexRoute

1:55 reactPRO

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

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 Router: Querystring Parameters

2:22 reactPRO

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

React Router: hashHistory vs browserHistory

1:39 reactPRO

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 Router: Development Environment Setup

4:43 reactPRO

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 Router: Route Parameters

2:20 reactPRO

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 Router: activeStyle & activeClassName

1:03 reactPRO

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.

Styling a React button component with Radium

1:29 reactPRO

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

Extracting Private React Components

1:52 reactPRO

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

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.

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.

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

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

1:30 react

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

Redux: React Todo List Example (Filtering Todos)

8:14 react

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

Redux: React Todo List Example (Toggling a Todo)

3:29 react

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

Redux: React Todo List Example (Adding a Todo)

7:25 react

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

Redux: React Counter Example

2:18 react

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

Building stateless function components (new in React 0.14)

4:14 reactPRO

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.

Debugging components with the React Developer Tools extension

3:39 reactPRO

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.

Building an accordion component with React

8:11 reactPRO

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.

Increasing reusability with React container components

4:32 reactPRO

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.

Intro to inline styles in React components

5:32 reactPRO

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!

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

6:17 reactPRO

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.

Linting React JSX with ESLint (in ES6)

4:55 reactPRO

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.

Reloading React component tests using webpack-dev-server

2:16 reactPRO

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.

DOM Event Listeners in a React Component

3:43 reactPRO

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

Unit testing a React component using Jasmine and Webpack

4:04 reactPRO

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 components in ES6 classes

3:29 reactPRO

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 CSS in JavaScript with Radium

3:33 reactPRO

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.

Using React Contexts for Nested Components

2:02 reactPRO

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.

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

Static Methods in React

2:11 reactPRO

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.

Setting up a React Playground Dev Environment

6:07 reactPRO

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!

Use React the cloneWithProps method to interact with child components

3:02 reactPRO

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 Animation with CSSTransitionGroup

Applying conditional styles in React with classSet add-on

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

What's new and different in React v0.12.0

3:42 reactPRO

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

Using React's dangerouslySetInnerHTML

2:23 reactPRO

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.

Simulate React Events with TestUtils

4:07 reactPRO

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

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 with-addons - ReactLink

2:58 reactPRO

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.