Browse all React lessons.

showing All 334 lessons...

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

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

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

Introduction to Isomorphic React

P

React CSS in JavaScript with Radium

P

Introduction to Server-Side React

P

Reflux - Aggregate Stores

P

Reflux - Using Any Library for Model Changes

P

Using React Contexts for Nested Components

P

Reflux - Manually Triggering Actions

P

Reflux - Creating Your First Action in React

P

Add Custom propType Validation to React Components

Static Methods in React

P

Reflux - Loading data with Superagent

P

Connecting to a Reflux Store in React

P

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

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 PRO

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 PRO

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 PRO

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

react tutorial about Unit testing a React component using Jasmine and Webpack

Unit testing a React component using Jasmine and Webpack

4:04 react PRO

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 tutorial about React Mixins with ES6 Components

React Mixins with ES6 Components

3:36 react PRO

Sometimes called higher order functions or wrapper components, the React mixin functionality can be recreated easily with a simple function in ES6.

react tutorial about React components in ES6 classes

React components in ES6 classes

3:29 react PRO

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 tutorial about Complete the Notes view in React Native

Complete the Notes view in React Native

2:38 react PRO

In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code.

react tutorial about Build a View with React Native's ListView Component

Build a View with React Native's ListView Component

9:37 react PRO

Displaying lists of data efficiently is an important aspect of native applications. React Native provides the ListView component to accomplish this. We will use the ListView component to display our application's notes that we persisted in Firebase.

react tutorial about Persist data in React Native with Firebase REST API

Persist data in React Native with Firebase REST API

3:28 react PRO

For our demo React Native application, we want to persist some notes about Github users. To make that quick and easy, we are going to take advantage of FireBase's REST API to have data persistence in minutes.

react tutorial about Access Web Pages through React Native's WebView Component

Access Web Pages through React Native's WebView Component

4:20 react PRO

We can access web pages in our React Native application using the WebView component. We will connect the links in our repository component to their Github web page when a user click on them.

react tutorial about Navigate to a React Native component

Navigate to a React Native component

2:36 react PRO

Now that we've created the React Native component for our repositories view, we still need to wire it into the routing so that we can visit its view.

react tutorial about Build a Github Repositories Component in React Native

Build a Github Repositories Component in React Native

5:52 react PRO

We'll walk through building a Repositories component which receives an array of repositories on Github and loops over those creating a list of React Native View components.

react tutorial about Build a Reusable React Native UI Component

Build a Reusable React Native UI Component

2:02 react PRO

In this lesson we'll create a reusable React Native separator component which manages it's own styles.

react tutorial about Create a Scrollable React Native Component with ScrollView

Create a Scrollable React Native Component with ScrollView

7:20 react PRO

To show a list of unchanging data in React Native you can use the scroll view component. In this lesson, we'll map through the data we got back from the Github API, and fill complete ScrollView component for the user profile.

react tutorial about Use propTypes in Reusable React Native Components

Use propTypes in Reusable React Native Components

2:50 react PRO

In this React Native lesson, we will be creating a reusable Badge component. The component will also make use of propTypes to validate that its required data is being passed in when it is used.

react tutorial about Use Images in a React Native Application

Use Images in a React Native Application

7:03 react PRO

Let's take a look at the basics of using React Native's Image component, as well as adding some reusable styling to our Dashboard component buttons.

react tutorial about Use React Native's Error Handle and ActivityIndicatiorIOS

Use React Native's Error Handle and ActivityIndicatiorIOS

2:51 react PRO

With React Native you use ActivityIndicatorIOS to show or hide a spinner. In this lesson we combine ActivityIndicatorIOS with our HTTP requests in order to give the user feedback about data loading.

react tutorial about Pass Data when Changing Routes in React Native

Pass Data when Changing Routes in React Native

2:51 react PRO

As we build application components, we will need to pass data along as we change routes and bring them into view. With React Native we can do this easily and deliver the appropriate data to our native Dashboard component.

react tutorial about Use Fetch to Load External Data in React Native

Use Fetch to Load External Data in React Native

6:26 react PRO

The way you make HTTP requests in React Native is with fetch. In this video, we'll add integration with the github API into our app using fetch.

react tutorial about Understand the fetch API

Understand the fetch API

4:20 react PRO

The way you make HTTP requests in React Native is with the Fetch API. In this video we'll talk about Fetch and how to work with promises.

react tutorial about Use State and Touch Events in React Native

Use State and Touch Events in React Native

7:07 react PRO

In React, components manage their own state. In this lesson, we'll walk through building a component which manages it's own state as well as using TextInput and TouchableHighlight to handle touch events.

react tutorial about Set up Basic iOS Routing with React Native

Set up Basic iOS Routing with React Native

6:00 react

In React Native you utilize the NavigatorIOS component in order to implement routing. In this tutorial, we'll walk through the app we'll be building in this series as well as how to add routing to your app.

react tutorial about Start Building a React Native Application

Start Building a React Native Application

9:58 react

We'll download the requirements for getting started with React Native, refactor our app to ES6, walk through debugging, and talk about the philosophy behind React and React Native.

react tutorial about Introduction to Isomorphic React

Introduction to Isomorphic React

5:47 react PRO

React enables us to write isomorphic applications that pre-render on the server and then respond to user interaction on the client side.

react tutorial about React CSS in JavaScript with Radium

React CSS in JavaScript with Radium

3:33 react PRO

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.

react tutorial about Introduction to Server-Side React

Introduction to Server-Side React

3:22 react PRO

Rendering React components from the server allows you to pre-render the initial state of your components and speed up initial page loads by not requiring the browser to wait for any JavaScript to load before presenting the component.

react tutorial about Reflux - Aggregate Stores

Reflux - Aggregate Stores

4:26 react PRO

Reflux allows stores to listen for other stores to update. This helps you build more complex data models. In this video, John walks you through building a store which can watch for data updates in two other stores.

react tutorial about Reflux - Using Any Library for Model Changes

Reflux - Using Any Library for Model Changes

2:30 react PRO

Reflux actions and stores can be used with any library. In this video, John shows how to listen to store changes without using React.

react tutorial about Using React Contexts for Nested Components

Using React Contexts for Nested Components

2:02 react PRO

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.

react tutorial about Reflux - Manually Triggering Actions

Reflux - Manually Triggering Actions

4:18 react PRO

Reflux actions don't need to be used within React components, you can trigger them from anywhere. John demonstrates this concept by extracting the actions away and then invoking them through jquery.

react tutorial about Reflux - Creating Your First Action in React

Reflux - Creating Your First Action in React

2:44 react PRO

Reflux uses Actions to tell the Stores when to update. We will wire Actions and Stores together to create a simple updatable age field React component.

react tutorial about Add Custom propType Validation to React 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

react tutorial about Static Methods in React

Static Methods in React

2:11 react PRO

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.

react tutorial about Reflux - Loading data with Superagent

Reflux - Loading data with Superagent

5:05 react PRO

Neither React nor Reflux come with a built-in library for loading data. Many people use jQuery, but this jQuery is heavy for the task. In this lesson, John shows you how to easily load in some data using Superagent and walks you through the process of displaying and formatting the data in your component.

react tutorial about Connecting to a Reflux Store in React

Connecting to a Reflux Store in React

3:37 react PRO

Reflux makes connecting to a store extremely simple. Let's refactor a React component so that the data now comes from a Reflux store and allows the data store to trigger future updates.

react tutorial about Setting up a React Playground Dev Environment

Setting up a React Playground Dev Environment

6:07 react PRO

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!

react tutorial about Use React the cloneWithProps method to interact with child components

Use React the cloneWithProps method to interact with child components

3:02 react PRO

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 tutorial about React Animation with CSSTransitionGroup

React Animation with CSSTransitionGroup

3:07 react PRO

React.addons provides CSSTransitionGroup for easily implementing basic CSS animations and transitions.

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