Browse all React lessons.

showing All 269 lessons...

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

Debugging components with the React Developer Tools extension

P

Building an accordion component with React

Increasing reusability with React container components

P

React-Motion: TransitionSpring Basics

React-Motion: Animate Multiple Elements with a Single Spring

React-Motion: Configuring a Spring Component

React-Motion: Introduction to the Spring Component

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

React Native: TabBarIOS Customization

P

React Native: Debugging on an iOS Device

React Native: TabBarIOS Basics

Reloading React component tests using webpack-dev-server

Building a React.js App - ES6 Refactor: Firebase and React Binding with re-base

P

Building a React.js App - ES6 Refactor: Routing without Mixins

P

Building a React.js App - ES6 Refactor: propTypes in ES6

P

Building a React.js App - ES6 Refactor: createClass to JavaScript Classes and propTypes

P

Building a React.js App - ES6 Refactor: Non Components

P

Building a React.js App: componentWillReceiveProps and React Router

P

Building a React.js App: Rendering a UI of Dynamic Data

P

Building a React.js App: Making Server Requests in React with Axios

P

Building a React.js App: Transitions with React Router

P

Building a React.js App: Managing State in Child Components

P

Building a React.js App: Component Validation with PropTypes

P

Building a React.js App: Using ReactFire to Add Data Persistence

P

Building a React.js App: State, Props, and Thinking in React

P

Building a React.js App: Basic Routing with React Router

P

Building a React.js App: Up and Running with React and Webpack

Building a React.js App: Notetaker Introduction

DOM Event Listeners in a React Component

P

Normalize Events with Reacts Synthetic Event System

Isomorphic Routing in React with react-engine

P

Isomorphic React with react-engine

P

Use JSX as an Express templating engine with react-engine

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

react tutorial about Debugging components with the React Developer Tools extension

Debugging components with the React Developer Tools extension

3:39 react PRO

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.

react tutorial about Building an accordion component with React

Building an accordion component with React

8:11 react

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.

react tutorial about Increasing reusability with React container components

Increasing reusability with React container components

4:32 react PRO

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.

react tutorial about React-Motion: TransitionSpring Basics

React-Motion: TransitionSpring Basics

2:59 react

In this lesson we'll look at how to animate the adding and removing of components using React-Motion's TransitionSpring and how it differs from a standard Spring component.

react tutorial about React-Motion: Animate Multiple Elements with a Single Spring

React-Motion: Animate Multiple Elements with a Single Spring

4:03 react

In this lesson we'll configure a single react-motion Spring component to manage the animation of multiple elements.

react tutorial about React-Motion: Configuring a Spring Component

React-Motion: Configuring a Spring Component

3:47 react

In this lesson we'll configure our React-Motion Spring to animate multiple values simultaneously and also look at how those animations can be more finely controlled by setting our Spring's stiffness and damping values.

react tutorial about React-Motion: Introduction to the Spring Component

React-Motion: Introduction to the Spring Component

2:03 react

Spring is the simplest component available to us in React-Motion. It allows us to transition from a defaultValue to an endValue leaving what to do with that value as it transitions up to us. In this lesson we'll create a simple Spring and use it to update the style of our component.

react tutorial about Intro to inline styles in React components

Intro to inline styles in React components

5:32 react PRO

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!

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

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

6:17 react PRO

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.

react tutorial about Linting React JSX with ESLint (in ES6)

Linting React JSX with ESLint (in ES6)

4:55 react PRO

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.

react tutorial about React Native: Create a Swipe Panel

React Native: Create a Swipe Panel

7:03 react PRO

In this lesson we'll use PanResponder and LayoutAnimation to create a smoothly animated Swipe Panel commonly implemented in iOS and Android applications.

react tutorial about React Native: PanResponder Basics

React Native: PanResponder Basics

5:38 react PRO

In this lesson we'll look at the PanResponder API in React Native and create a draggable view. PanResponder is a high level wrapper around Gesture Responder System providing us with new and simpler object called gestureState to track the state of pan gestures.

react tutorial about React Native: LayoutAnimation Basics

React Native: LayoutAnimation Basics

4:57 react

React Native's LayoutAnimation provides a simple method for animating styles as they are applied to our views.

react tutorial about React Native: TabBarIOS Customization

React Native: TabBarIOS Customization

3:22 react PRO

In this lesson we'll look at some simple ways to customize TabBarIOS, creating a scrollable tab area, and implementing custom icons in TabBarIOS.Item.

react tutorial about React Native: Debugging on an iOS Device

React Native: Debugging on an iOS Device

4:15 react

In this lesson we'll explore debugging our React Native application in an actual iOS device.

react tutorial about React Native: TabBarIOS Basics

React Native: TabBarIOS Basics

4:22 react

In this lesson we'll create a tabbed interface using the React Native TabBarIOS & TabBarIOS.Item components

react tutorial about Reloading React component tests using webpack-dev-server

Reloading React component tests using webpack-dev-server

2:16 react

Unit testing a React component using Webpack and Jasmine, can involve slow and repetitive tasks when confirming that tests are passing when your code changes. For example, manually running commands instructing webpack to compile code plus refreshing the browser. This lesson demonstrates how to speed up your development time by automating these tasks using webpack-dev-server.

react tutorial about Building a React.js App - ES6 Refactor: Firebase and React Binding with re-base

Building a React.js App - ES6 Refactor: Firebase and React Binding with re-base

7:37 react PRO

In this lesson, we’ll finish refactoring our application to ES6. Along the way, we’ll learn how to get route parameters in React Router without mixins as well as learn about re-base, a library for building React applications with Firebase in ES6

react tutorial about Building a React.js App - ES6 Refactor: Routing without Mixins

Building a React.js App - ES6 Refactor: Routing without Mixins

4:23 react PRO

In this video, we’ll walk through refactoring the routing of our application to get away from mixins and be compatible with JavaScript Classes through context.

react tutorial about Building a React.js App - ES6 Refactor: propTypes in ES6

Building a React.js App - ES6 Refactor: propTypes in ES6

2:50 react PRO

In this video, we’ll refactor our Repos and UserProfile components and along the way we’ll learn how to utilize propTypes in React with JavaScript classes.

react tutorial about Building a React.js App - ES6 Refactor: createClass to JavaScript Classes and propTypes

Building a React.js App - ES6 Refactor: createClass to JavaScript Classes and propTypes

9:15 react PRO

In this video, we’ll walk through refactoring all of our note components to learn how to go from createClass to utilize JavaScript classes to build our React components as well as how to handle propTypes with ES6.

react tutorial about Building a React.js App - ES6 Refactor: Non Components

Building a React.js App - ES6 Refactor: Non Components

9:49 react PRO

In this video, we’ll walk through refactoring all of our non component files to utilize new ES6 features like the module system, template strings, destructuring, and arrow functions.

react tutorial about Building a React.js App: componentWillReceiveProps and React Router

Building a React.js App: componentWillReceiveProps and React Router

5:18 react PRO

In this lesson, we’ll learn how React Router uses the componentWillReceiveProps life cycle method in order to give you any route changes that occurs in your application. We’ll leverage this to fetch new data about different users when the user requests that data.

react tutorial about Building a React.js App: Rendering a UI of Dynamic Data

Building a React.js App: Rendering a UI of Dynamic Data

4:08 react PRO

In this lesson, we’ll fix up our UserProfile component as well as our Repos component to more elegantly display the data we’re getting from the Github API.

react tutorial about Building a React.js App: Making Server Requests in React with Axios

Building a React.js App: Making Server Requests in React with Axios

9:30 react PRO

In this lesson, we’ll walk through implementing Axios into our application in order to communicate with the Github API.

react tutorial about Building a React.js App: Transitions with React Router

Building a React.js App: Transitions with React Router

5:30 react PRO

In this video, we’ll walk through how to use React Router to transition from one Route to another while passing that new Route data via route parameters.

react tutorial about Building a React.js App: Managing State in Child Components

Building a React.js App: Managing State in Child Components

10:26 react PRO

In this video, we’ll walk through how to better manage your state by learning how to manipulate the state of a parent component from a child component.

react tutorial about Building a React.js App: Component Validation with PropTypes

Building a React.js App: Component Validation with PropTypes

4:04 react PRO

In this video, we’ll add PropTypes to some of our existing components to ensure that each component gets the data it needs to function properly.

react tutorial about Building a React.js App: Using ReactFire to Add Data Persistence

Building a React.js App: Using ReactFire to Add Data Persistence

14:09 react PRO

In this video, we’ll tie in ReactFire from Firebase in order to implement persistence into our application for our Notes component as well as walk through how to properly display a list of data.

Click here for JSON data to seed your database.

react tutorial about Building a React.js App: State, Props, and Thinking in React

Building a React.js App: State, Props, and Thinking in React

12:00 react PRO

In this video, we’ll build out the skeleton of our main React.js components. We’ll talk about how to think in terms of components as well as learn about state and props.

react tutorial about Building a React.js App: Basic Routing with React Router

Building a React.js App: Basic Routing with React Router

10:34 react PRO

React Router is the most popular, and arguably the best solution for adding Routing to your React application. In this video, we’ll talk about the ideology around React Router as well as set up basic routing for our application.

react tutorial about Building a React.js App: Up and Running with React and Webpack

Building a React.js App: Up and Running with React and Webpack

7:57 react

In this video, we’ll talk about JSX and learn the necessity of Webpack and specifically babel-loader for JSX to JavaScript transformation. We’ll also set up our basic architecture and build our very first React component.

react tutorial about Building a React.js App: Notetaker Introduction

Building a React.js App: Notetaker Introduction

1:32 react

In this video, we introduce our sample application and discuss our objectives for this series on React.js.

react tutorial about DOM Event Listeners in a React Component

DOM Event Listeners in a React Component

3:43 react PRO

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

react tutorial about Normalize Events with Reacts Synthetic Event System

Normalize Events with Reacts Synthetic Event System

2:45 react

Event handlers are passed an instance of SyntheticEvent in React. In this video we'll take a look at the wide range of events available to us, including Touch events.

react tutorial about Isomorphic Routing in React with react-engine

Isomorphic Routing in React with react-engine

7:30 react PRO

In React, Using react-router (which installs alongside react-engine), we can create isomorphic routing for our application.

react tutorial about Isomorphic React with react-engine

Isomorphic React with react-engine

4:31 react PRO

Outside of providing an express template engine for JSX, react-engine allows us to utilize the same templates for client side interaction.

react tutorial about Use JSX as an Express templating engine with react-engine

Use JSX as an Express templating engine with react-engine

5:25 react PRO

react-engine from Paypal eliminates the need for third-party template engines and allows us to use JSX directly to generate server side views in Express.

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