TEST

TEST

Watch User Created Playlist (173)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Create stateful React Components using TypeScript

P

Create stateless React components using TypeScript

P

Bootstrap a TypeScript + React Project

P

Writing Platform-Specific Components for iOS and Android in React Native

P

Installing and Linking Modules with Native Code in React Native

P

Inspect Component Events with React Storybook

P

Load React Storybook Stories Dynamically

P

Write the First React Storybook Story

P

Add React Storybook to a Project

P

Show Temporary Messages in a React Application

P

Use React Context to Manage Application State Through Routes

P

Update React Application State from Form Input

P

Synchronize React UI and State with Controlled Components

P

Refactor React Components to be Stateless Functional Components

P

Render a React UI Based on Initial State

P

Render a React UI with JSX

Bootstrap a React Application through the CLI with Create React App

Add Redux State Management to a React on Rails Project

P

Inline Edit Todo Items in a React Native ListView

P

Create the Basic React Native Todo Application Layout

P

Filter Items in the React Native List View

P

Add the Total Remaining Item Count to the Footer with React Native Text

P

Add a Toggle All Complete Button with React Native TouchableOpacity

P

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

P

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

P

Persist Items with React Native AsyncStorage

P

Add a Remove Item Button to Each Row with React Native TouchableOpacity

P

Create a List of Items with a React Native ListView

P

Setup React Native for iOS and Android

Create a React Native TextInput

P

Add a Complete Toggle with React Native Switch

P

Public Class Fields with React Components

P

Create a Button Shake Animation in React Native

P

Creating a component with React on Rails

P

Create A Login Screen in React Native

P

Make a Button in React Native with TouchableHighlight

P

Connect an existing React application to an API server created with Swagger

P

Get the Dimensions of a React Native Phone Screen

P

Installing Third-Party Libraries from npm with React Native

P

Create a Custom Map Marker with React Native Maps

P

Measure and Get the Position of a React Native Element

P

Animate Colors with React Native Interpolate

P

Animate a Sequence of React Native Animations with Animated.sequence

P

Stagger React Native Animations with Animated.stagger

P

Create a Flip Card Animation with React Native

P

Animate Rotation with React Native Interpolate

P

Create a Draggable Card with React Native Pan Responder, and Animated.decay

P

Create & Deploy a Universal React App using Zeit Next

P

Using the Chrome Debugger to Set Breakpoints in React Native

P

Animate the Scale of a React Native Button using Animated.spring

P

Animate Styles of a React Native View with Animated.timing

Use Flex to Scale React Native Background Image

P

Jest Snapshot Testing with React Storybook

P

Getting Started with React Storybook

P

Recompose: Theme React Components Live with Context

P

Styling React Components With Aphrodite

P

Set up React apps with zero configuration in two minutes

P

Connect MobX observer components to the store with the React Provider

Analyze React components with MobX-React devtools

Optimize React size and performance with Webpack production plugins

P

Applying Basic Styles in React Native

P

Redux: Filtering Redux State with React Router Params

Redux: Navigating with React Router <Link>

Redux: Adding React Router to the Project

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

P

Using React with the FullCalendar jQuery plugin

P

React Testing: Redux Reducers

React Testing: The Redux Store - Initial State

React Testing: The Redux Store - Multiple Actions

React Testing: Children with Shallow Rendering

React Testing: Reusing test boilerplate

React Testing: Conditional className with Shallow Rendering

React Testing: className with Shallow Rendering

React Testing: Element types with Shallow Rendering

React Testing: JSX error diffs

React Testing: Intro to Shallow Rendering

React Testing: Utility modules

React Testing: Running tests

React Testing: Setting up dependencies

Extracting Private React Components

P

Compose React Component Behavior with Higher Order Components

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

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

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

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

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

Redux: React Todo List Example (Filtering Todos)

Redux: React Todo List Example (Toggling a Todo)

Redux: React Todo List Example (Adding a Todo)

Redux: React Counter Example

Building stateless function components (new in React 0.14)

P

Debugging components with the React Developer Tools extension

P

Increasing reusability with React container components

P

Intro to inline styles in React components

P

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

P

Linting React JSX with ESLint (in ES6)

P

React Native: Create a Swipe Panel

P

React Native: PanResponder Basics

P

React Native: LayoutAnimation Basics

P

React Native: TabBarIOS Customization

P

React Native: Debugging on an iOS Device

P

React Native: TabBarIOS Basics

P

Reloading React component tests using webpack-dev-server

P

DOM Event Listeners in a React Component

P

Isomorphic Routing in React with react-engine

P

Isomorphic React with react-engine

P

Unit testing a React component using Jasmine and Webpack

P

React Mixins with ES6 Components

P

React components in ES6 classes

P

Complete the Notes view in React Native

P

Build a View with React Native's ListView Component

P

Persist data in React Native with Firebase REST API

P

Access Web Pages through React Native's WebView Component

P

Navigate to a React Native component

P

Build a Github Repositories Component in React Native

P

Build a Reusable React Native UI Component

P

Create a Scrollable React Native Component with ScrollView

P

Use propTypes in Reusable React Native Components

P

Use Images in a React Native Application

P

Use React Native's Error Handle and ActivityIndicatiorIOS

P

Pass Data when Changing Routes in React Native

P

Use Fetch to Load External Data in React Native

P

Understand the fetch API

P

Use State and Touch Events in React Native

P

Set up Basic iOS Routing with React Native

Start Building a React Native Application

React CSS in JavaScript with Radium

P

Using React Contexts for Nested Components

P

Add Custom propType Validation to React Components

Setting up a React Playground Dev Environment

P

Use React the cloneWithProps method to interact with child components

P

React Animation with CSSTransitionGroup

P

React and Firebase with ReactFire

P

Applying conditional styles in React with classSet add-on

P

What's new and different in React v0.12.0

P

React in 7 Minutes

Simulate React Events with TestUtils

P

React Flux: Wrapping Up

P

React Flux: Remove Duplicate Code with Mixins

P

React Flux: Routing with react-router-component

P

React Flux: Project Organization

P

React Flux: Components/Views

P

React Flux: Stores

P

React Flux: Actions

P

React Flux: Overview and Dispatchers

React Flux: Development Environment Setup

Debug React Components with Developer Tools in Chrome

React Fundamentals: Integrating Components with D3 and AngularJS

P

React with-addons - ReactLink

P

Build a JSX Live Compiler as a React Component

Use map to Create React Components from Arrays of Data

Write More Reusable React Components with Composable APIs

React Mixins

P

Control React Component Updates When New Props Are Received

Manage React Component State with Lifecycle Methods

Understand the React Component Lifecycle Methods

Use React ref to Get a Reference to Specific Components

Use React Components as Children for Other Components

Manage React Component State with setState

Set Properties on React Components

Display Output in React with a Component's render Method

Write a "Hello World" React Component

typescript tutorial about Create stateful React Components using TypeScript

Create stateful React Components using TypeScript

2:56 typescript PRO

You can create stateful React Components in TypeScript by extending from the React.Component class. This parent class takes two generic parameters, Props and State.

This lessons shows these generic parameters and React.Component in action

react tutorial about Create stateless React components using TypeScript

Create stateless React components using TypeScript

1:13 react PRO

You can create a stateless React component in TypeScript by just creating a function.

But if you want to create high quality idiomatic React + TypeScript components you should use the React.StatelessComponent interface. This is demonstrated in the video.

react tutorial about Bootstrap a TypeScript + React Project

Bootstrap a TypeScript + React Project

5:54 react PRO

Setup a TypeScript + React project from scratch using webpack. Learn the reason behind every line that you need to type and become an expert.

react-native tutorial about Writing Platform-Specific Components for iOS and Android in React Native

Writing Platform-Specific Components for iOS and Android in React Native

5:28 react-native PRO

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.

react-native tutorial about Installing and Linking Modules with Native Code in React Native

Installing and Linking Modules with Native Code in React Native

4:57 react-native PRO

Learn to install JavaScript modules that include native code. Some React Native modules include native code for Android and/or iOS in addition to JavaScript. We'll install the react-native-video component using npm install, and then link it with the react-native link command so that our Video component works properly on both iOS and Android.

react tutorial about Inspect Component Events with React Storybook

Inspect Component Events with React Storybook

1:45 react PRO

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

react tutorial about Load React Storybook Stories Dynamically

Load React Storybook Stories Dynamically

3:10 react PRO

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

react tutorial about Write the First React Storybook Story

Write the First React Storybook Story

4:34 react PRO

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.

react tutorial about Add React Storybook to a Project

Add React Storybook to a Project

3:35 react PRO

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.

react tutorial about Show Temporary Messages in a React Application

Show Temporary Messages in a React Application

2:41 react PRO

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.

react tutorial about Use React Context to Manage Application State Through Routes

Use React Context to Manage Application State Through Routes

7:51 react PRO

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.

react tutorial about Update React Application State from Form Input

Update React Application State from Form Input

4:07 react PRO

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.

react tutorial about Synchronize React UI and State with Controlled Components

Synchronize React UI and State with Controlled Components

3:41 react PRO

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.

react tutorial about Refactor React Components to be Stateless Functional Components

Refactor React Components to be Stateless Functional Components

6:42 react PRO

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.

react tutorial about Render a React UI Based on Initial State

Render a React UI Based on Initial State

5:15 react PRO

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.

react tutorial about Render a React UI with JSX

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.

react tutorial about Bootstrap a React Application through the CLI with Create React App

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.

react tutorial about Add Redux State Management to a React on Rails Project

Add Redux State Management to a React on Rails Project

7:27 react PRO

Learn how to add a simple Redux-backed React component to a new Rails 5 app using React on Rails.

react tutorial about Inline Edit Todo Items in a React Native ListView

Inline Edit Todo Items in a React Native ListView

6:18 react PRO

We'll add a TouchableOpacity with a long press to trigger an inline TextInput edit in the row. We'll show how to update an item in a ListView.DataSource and make sure it re-renders

react tutorial about Create the Basic React Native Todo Application Layout

Create the Basic React Native Todo Application Layout

2:35 react PRO

In this lesson we'll create the basic application layout with a header, content section, and footer. We'll learn to use StyleSheet to create styles to apply to React Native components.

react tutorial about Filter Items in the React Native List View

Filter Items in the React Native List View

6:44 react PRO

We'll setup 3 buttons (All, Active, Complete) to filter the displayed items based on their completion status. We'll also show how to use flexbox flexDirection row lays out items differently than column.

react tutorial about Add the Total Remaining Item Count to the Footer with React Native Text

Add the Total Remaining Item Count to the Footer with React Native Text

0:40 react PRO

In this lesson we'll add a footer text item to show the total count of what is in the current filtered view. We'll show the technique of deriving computed values in render functions.

react tutorial about Add a Toggle All Complete Button with React Native TouchableOpacity

Add a Toggle All Complete Button with React Native TouchableOpacity

3:43 react PRO

In this lesson we'll add a Toggle All Complete Button next to the Text Input. We'll show off how components without flex layout affect siblings with flex layout properties.

react tutorial about Add a Loading Indicator While Loading Items with React Native ActivityIndicator

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

1:49 react PRO

We'll use the cross platform ActivityIndicator to add a loading spinner while the items load from AsyncStorage. We'll show off the importance of rendering order, absolute positioning, and how to center items with alignItems and justifyContent set to center.

react tutorial about Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

1:42 react PRO

In this lesson we'll add a button to the footer that will clear all completed items. We'll use TouchableOpacity and we'll examine how flex space-around property works.

react tutorial about Persist Items with React Native AsyncStorage

Persist Items with React Native AsyncStorage

1:06 react PRO

In this lesson we'll use AsyncStorage to save our items so they persist with each reload of the application. We'll show how to use the promise base interface to handle success as well as handle errors.

react tutorial about Add a Remove Item Button to Each Row with React Native TouchableOpacity

Add a Remove Item Button to Each Row with React Native TouchableOpacity

1:48 react PRO

We'll use TouchableOpacity to create a Remove button for each todo item. We'll demonstrate how to create remove items from a ListView.DataSource

react tutorial about Create a List of Items with a React Native ListView

Create a List of Items with a React Native ListView

5:57 react PRO

In this lesson we'll use the ListView component to render a list of items that were entered. We'll show how to setup a ListView.DataSource and how to render custom rows with performance in mind.

react tutorial about Setup React Native for iOS and Android

Setup React Native for iOS and Android

4:48 react

In this lesson we'll walk through the process of installing the react-native-cli through setting up a basic react-native project on iOS. We'll get the basic project running in a simulator via XCode. We'll also setup Android, Android Studio and get the project running on an emulator with the react-native run-android command.

react tutorial about Create a React Native TextInput

Create a React Native TextInput

4:29 react PRO

In this lesson we'll use TextInput to receive input from the user and save off separate items into state. We'll store the value on state, show how to setup specific keyboards to display and how to handle actions from the keyboard.

react tutorial about Add a Complete Toggle with React Native Switch

Add a Complete Toggle with React Native Switch

3:19 react PRO

We'll add a cross platform Switch component to toggle the completeness of each todo item. We'll show how to pass down functions from the parent application to the child row of a ListView.

react tutorial about Public Class Fields with React Components

Public Class Fields with React Components

4:52 react PRO

Public Class Fields allow you to add instance properties to the class definition with the assignment operator (=). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.

react tutorial about Create a Button Shake Animation in React Native

Create a Button Shake Animation in React Native

2:38 react PRO

In this lesson we'll use Animated.timing and TouchableWithoutFeedback to create an animatable button. We'll learn how to use interpolate to create a non-linear animation. When our button is pressed it will shake from side to side.

react tutorial about Creating a component with React on Rails

Creating a component with React on Rails

6:33 react PRO

Learn how to add a simple React component to a brand new Rails app with React on Rails installed. You will see how to add your React component to a Rails view, including the passing of values from the controller to your React component.

react tutorial about Create A Login Screen in React Native

Create A Login Screen in React Native

6:21 react PRO

In this lesson we'll build a generic login screen. We'll explore how to use a background image, how to center content with spacer views, and how to use other flex properties.

react tutorial about Make a Button in React Native with TouchableHighlight

Make a Button in React Native with TouchableHighlight

6:43 react PRO

Learn how to make a button in React Native by using the TouchableHighlight component. We'll create and style a component that responds to user interactions and invokes a callback when you touch it.

openapi tutorial about Connect an existing React application to an API server created with Swagger

Connect an existing React application to an API server created with Swagger

6:01 openapi PRO

In this lesson, I will show you how to update a simple, skeleton React application to work with the Todo API server built with Swagger. Using existing components, you will learn how to display all Todo items, update an existing Todo item, and add a new Todo item.

react tutorial about Get the Dimensions of a React Native Phone Screen

Get the Dimensions of a React Native Phone Screen

1:10 react PRO

In this lesson we'll use Dimensions to get the width and height of the screen. Also we'll use onLayout to detect orientation changes.

react tutorial about Installing Third-Party Libraries from npm with React Native

Installing Third-Party Libraries from npm with React Native

3:05 react PRO

Learn how to install JavaScript modules from npm for use in your React Native project. We'll install and import the lodash library, then demonstrate how to use it from our React component. We'll also see what happens when you try to use a third-party library, such as jQuery, that attempts to access the browser window and is therefore not compatible with React Native.

react tutorial about Create a Custom Map Marker with React Native Maps

Create a Custom Map Marker with React Native Maps

2:52 react PRO

In this lesson we'll create a MapView with react-native-maps. We'll use the onPress function to add Markers to the map and then we'll use the custom map marker feature to style them.

react tutorial about Measure and Get the Position of a React Native Element

Measure and Get the Position of a React Native Element

2:14 react PRO

In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using onLayout and UIManager.measure. Additionally we'll see how to use the helper function measure on the component ref for easier measurement.

react tutorial about Animate Colors with React Native Interpolate

Animate Colors with React Native Interpolate

2:11 react PRO

We'll use the interpolate function from an Animated.Value to transition the background color of an Animated.View. We'll simultaneously translate the position with the same Animated.Value.

react tutorial about Animate a Sequence of React Native Animations with Animated.sequence

Animate a Sequence of React Native Animations with Animated.sequence

1:47 react PRO

In this lesson we'll use Animated.sequence to play multiple Animated.timing, and Animated.spring animations one after another.

react tutorial about Stagger React Native Animations with Animated.stagger

Stagger React Native Animations with Animated.stagger

2:53 react PRO

In this lesson we'll use Animated.stagger to stagger Animated.timing animations that animate the height of a React Native view every 300 milliseconds.

react tutorial about Create a Flip Card Animation with React Native

Create a Flip Card Animation with React Native

4:23 react PRO

In this lesson we'll learn to use backfaceVisibility style property and rotateX to create a vertical flip animation, and rotateY to create a horizontal flip animation.

react tutorial about Animate Rotation with React Native Interpolate

Animate Rotation with React Native Interpolate

1:52 react PRO

By using the interpolate function, the Animated.View can be rotated using both degrees and radians.

react tutorial about Create a Draggable Card with React Native Pan Responder, and Animated.decay

Create a Draggable Card with React Native Pan Responder, and Animated.decay

3:57 react PRO

In this lesson we'll create a PanResponder to allow us to drag a card around the screen. We'll use Animated.event to automatically set the values of our Animated.Value and when the card is released we'll use Animated.decay to decelerate it to a stop.

react tutorial about Create & Deploy a Universal React App using Zeit Next

Create & Deploy a Universal React App using Zeit Next

6:11 react PRO

In this lesson, we'll use next to create a universal React application with no configuration. We'll create page components that will render on the server if accessed directly, but function as you would expect in the client. We'll use the routing capabilities included with next to create links between the components using pushState and we'll incorporate our own React component. Finally, we'll deploy the application to now with a simple command in the terminal.

react tutorial about Using the Chrome Debugger to Set Breakpoints in React Native

Using the Chrome Debugger to Set Breakpoints in React Native

2:48 react PRO

You can use the JavaScript debugger to set breakpoints in React Native. We'll look at how to use the Chrome developer tools with React Native, and how to work with the debugger and console.log statements.

react tutorial about Animate the Scale of a React Native Button using Animated.spring

Animate the Scale of a React Native Button using Animated.spring

3:12 react PRO

In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.

react tutorial about Animate Styles of a React Native View with Animated.timing

Animate Styles of a React Native View with Animated.timing

3:29 react

In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration.

react tutorial about Use Flex to Scale React Native Background Image

Use Flex to Scale React Native Background Image

1:44 react PRO

In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.

react tutorial about Jest Snapshot Testing with React Storybook

Jest Snapshot Testing with React Storybook

2:26 react PRO

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!

react tutorial about Getting Started with React Storybook

Getting Started with React Storybook

3:41 react PRO

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.

react tutorial about Recompose: Theme React Components Live with Context

Recompose: Theme React Components Live with Context

9:44 react PRO

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.

react tutorial about Styling React Components With Aphrodite

Styling React Components With Aphrodite

2:29 react PRO

Aphrodite is a library styling React components.

You get all the benefits of inline styles (encapsulation, no build step, no CSS cascade, building up styling with JavaScript instead of a preprocessor language) with all the benefits of CSS (animations and transitions, pseudo-classes, media queries).

Learn how to use Aphrodite to style reusable React components.

react tutorial about Set up React apps with zero configuration in two minutes

Set up React apps with zero configuration in two minutes

2:02 react PRO

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

react tutorial about Connect MobX observer components to the store with the React Provider

Connect MobX observer components to the store with the React Provider

1:33 react

Passing down stores through each layer of components can be a tedious job. This lesson demonstrates how Provider can be used to automatically connect observer based components to stores, by leveraging React's context mechanism in the background.

react tutorial about Analyze React components with MobX-React devtools

Analyze React components with MobX-React devtools

1:36 react

The MobX React devtools can be used to analyze when and why React components are re-rendered. They offer three features: 1) visualize when components re-render, 2) show the dependency tree of a component, to see which data it's rendering depends upon, and 3) log in detail which data is changed by your actions, and how these changes propagate through the application.

webpack tutorial about Optimize React size and performance with Webpack production plugins

Optimize React size and performance with Webpack production plugins

5:45 webpack PRO

You can fine tune several webpack plugins to make your bundle as small as it can be for your specific application. However there are a few things you can do for pretty much every application to make it smaller and run faster. In this lesson we’ll combine several webpack plugins to optimize things for a React application (this is also applicable for non-React applications as well).

react tutorial about Applying Basic Styles in React Native

Applying Basic Styles in React Native

5:07 react PRO

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: Filtering Redux State with React Router Params

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.

react tutorial about Redux: Navigating with React Router <Link>

Redux: Navigating with React Router <Link>

2:38 react

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

react tutorial about Redux: Adding React Router to the Project

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.

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 PRO

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 Using React with the FullCalendar jQuery plugin

Using React with the FullCalendar jQuery plugin

2:55 react PRO

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

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

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

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

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

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

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

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

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

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

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

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

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

3:27 react