Browse all React lessons.

showing All 257 lessons...

Creating a Stateless Functional Component in React

P

Using the classnames library for conditional CSS in React

P

Applying Basic Styles in React Native

Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

P

Sync the UI with the app state using MobX observable and observer in React

Creating a D3 Force Layout in React

Radium: Updating Button Styles via Props

Core Concepts of React: Components, Props, and State

React Router: Named Components

P

React Router: Nested Routes

P

React Router: Redirect

P

React Router: setRouteWillLeaveHook

P

React Router: IndexRoute

P

React Router: Router, Route, and Link

React Router: Querystring Parameters

P

React Router: hashHistory vs browserHistory

P

React Router: Development Environment Setup

P

React Router: Route Parameters

P

React Router: activeStyle & activeClassName

P

Styling a React button component with Radium

Getting started with the react-rails gem

Using React with the FullCalendar jQuery plugin

React Testing: Redux Reducers

P

React Testing: The Redux Store - Initial State

P

React Testing: The Redux Store - Multiple Actions

P

React Testing: Children with Shallow Rendering

P

React Testing: Reusing test boilerplate

P

React Testing: Conditional className with Shallow Rendering

P

React Testing: className with Shallow Rendering

P

React Testing: Element types with Shallow Rendering

P

React Testing: JSX error diffs

P

React Testing: Intro to Shallow Rendering

P

React Testing: Utility modules

P

React Testing: Running tests

React Testing: Setting up dependencies

Extracting Private React Components

P

Building a React.js App: Utilizing Stateless Function Components

Compose React Component Behavior with Higher Order Components

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

Building stateless function components (new in React 0.14)

Flux Architecture: Dumb Stores

P

Flux Architecture: Component Wrap Up

P

Flux Architecture: Routing with react-router 1.0

P

Flux Architecture: Project Organization

P

Flux Architecture: Higher-Order Components

P

Flux Architecture: Components/Views

P

Flux Architecture: Application Store

P

Flux Architecture: Application Actions

P

Flux Architecture: Application Dispatcher

P

Flux Architecture: Overview and Project Setup

react tutorial about Creating a Stateless Functional Component in React

Creating a Stateless Functional Component in React

3:11 react PRO

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.

react tutorial about Using the classnames library for conditional CSS in React

Using the classnames library for conditional CSS in React

4:52 react PRO

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.

react tutorial about Applying Basic Styles in React Native

Applying Basic Styles in React Native

5:07 react

React Native utilizes flexbox for layout, and you can apply styles inline, or via external stylesheets. We will learn about both approaches, and create some basic styles for a native application.

For getting your application setup, you might want to checkout this lesson

react tutorial about Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

5:30 react PRO

redux-swarmlog is a helper library enabling Redux applications to sync peer to peer over WebRTC. It takes just five minutes to make the standard Redux TodoMVC network enabled.

react tutorial about Sync the UI with the app state using MobX observable and observer in React

Sync the UI with the app state using MobX observable and observer in React

2:31 react

Applications are driven by state. Many things, like the user interface, should always be consistent with that state.
MobX is a general purpose FRP library that provides the means to derive, for example, a React based user interface automatically from the state and keep it synchronized.

The net result of this approach is that writing applications becomes really straight-forward and boilerplate free.

react tutorial about Creating a D3 Force Layout in React

Creating a D3 Force Layout in React

9:57 react

Learn how to leverage d3's layout module to create a Force Layout inside of React. We'll take a look at React's lifecycle methods, using them to bootstrap d3's force layout in order to render our visualization.

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 Core Concepts of React: Components, Props, and State

Core Concepts of React: Components, Props, and State

6:54 react

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

react tutorial about 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: 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: setRouteWillLeaveHook

React Router: setRouteWillLeaveHook

3:29 react PRO

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

react tutorial about React Router: 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: 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: 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: 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: 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: 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: 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 Styling a React button component with Radium

Styling a React button component with Radium

1:29 react

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

react tutorial about Getting started with the react-rails gem

Getting started with the react-rails gem

3:00 react

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

react tutorial about Using React with the FullCalendar jQuery plugin

Using React with the FullCalendar jQuery plugin

2:55 react

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

react tutorial about 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: 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: 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: 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: 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: 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 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: 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: 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: 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: 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 Extracting Private React Components

Extracting Private React Components

1:52 react PRO

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

react tutorial about Building a React.js App: Utilizing Stateless Function Components

Building a React.js App: Utilizing Stateless Function Components

5:01 react

As of React 0.14 we can now create components with functions rather than React.Component or createClass. In this video, we'll walk through transferring all our Class Components to Stateless Function Components.

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 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 Building stateless function components (new in React 0.14)

Building stateless function components (new in React 0.14)

4:14 react

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

This lesson assumes use of ES6 and JSX.

react tutorial about Flux Architecture: Dumb Stores

Flux Architecture: Dumb Stores

2:03 react PRO

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

react tutorial about Flux Architecture: Component Wrap Up

Flux Architecture: Component Wrap Up

6:09 react PRO

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

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

Flux Architecture: Routing with react-router 1.0

6:00 react PRO

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

react tutorial about Flux Architecture: Project Organization

Flux Architecture: Project Organization

2:38 react PRO

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

react tutorial about Flux Architecture: Higher-Order Components

Flux Architecture: Higher-Order Components

5:29 react PRO

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

react tutorial about Flux Architecture: Components/Views

Flux Architecture: Components/Views

9:11 react PRO

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

react tutorial about Flux Architecture: Application Store

Flux Architecture: Application Store

5:56 react PRO

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

react tutorial about Flux Architecture: Application Actions

Flux Architecture: Application Actions

3:25 react PRO

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

react tutorial about Flux Architecture: Application Dispatcher

Flux Architecture: Application Dispatcher

1:55 react PRO

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

react tutorial about Flux Architecture: Overview and Project Setup

Flux Architecture: Overview and Project Setup

6:56 react

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

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