Browse all React lessons.

showing All 288 lessons...

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

Break up components into smaller pieces using Functional Components

Create a Button Shake Animation in React Native

Creating a component with React on Rails

Create A Login Screen in React Native

Make a Button in React Native with TouchableHighlight

Get the Dimensions of a React Native Phone Screen

Use React.cloneElement to Extend Functionality of Children Components

Understand React.Children Utilities

Installing Third-Party Libraries from npm with React Native

Create a Custom Map Marker with React Native Maps

Measure and Get the Position of a React Native Element

Animate Colors with React Native Interpolate

P

Animate a Sequence of React Native Animations with Animated.sequence

P

Animate Multiple Animations at the Same Time with Animated.parallel

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

Using the Chrome Debugger to Set Breakpoints in React Native

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

Jest Snapshot Testing with React Storybook

Getting Started with React Storybook

Recompose: ButtonGroup - When nesting affects Style

Recompose: Theme React Components Live with Context

Recompose: Override Styles & Elements Types in React

Styling React Components With Aphrodite

Set up React apps with zero configuration in two minutes

Handle user input and asynchronous actions with MobX

Write custom MobX reactions with when and autorun

Derive computed values and manage side effects with MobX reactions

Connect MobX observer components to the store with the React Provider

Use MobX actions to change and guard state

Use observable objects, arrays, and maps to store state in MobX

Pass observable data through props in MobX

Analyze React components with MobX-React devtools

Setup Nuclide to use Flow and Eslint (Mac)

Creating a Stateless Functional Component in React

P

Using the classnames library for conditional CSS in React

P
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 Break up components into smaller pieces using Functional Components

Break up components into smaller pieces using Functional Components

2:21 react

We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.

react tutorial about Create a Button Shake Animation in React Native

Create a Button Shake Animation in React Native

2:38 react

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

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

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

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.

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

Get the Dimensions of a React Native Phone Screen

1:10 react

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 Use React.cloneElement to Extend Functionality of Children Components

Use React.cloneElement to Extend Functionality of Children Components

2:14 react

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

react tutorial about Understand React.Children Utilities

Understand React.Children Utilities

2:40 react

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

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

Installing Third-Party Libraries from npm with React Native

3:05 react

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

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

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 Animate Multiple Animations at the Same Time with Animated.parallel

Animate Multiple Animations at the Same Time with Animated.parallel

1:26 react PRO

In this lesson we'll use Animated.parallel to animate multiple Animated.timing and Animated.spring animations at the same time.

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

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

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

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

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

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: ButtonGroup - When nesting affects Style

Recompose: ButtonGroup - When nesting affects Style

8:23 react

In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React we don't need to consider this most of the time because this nesting of elements happens within the bounds of a single component.

However occasionally the nesting of components affects the styles. In these rare cases we can use context to influence styles yielding a user friendly api to our components.

react tutorial about Recompose: Theme React Components Live with Context

Recompose: Theme React Components Live with Context

9:44 react

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 Recompose: Override Styles & Elements Types in React

Recompose: Override Styles & Elements Types in React

5:54 react

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

react tutorial about Styling React Components With Aphrodite

Styling React Components With Aphrodite

2:29 react

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

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 Handle user input and asynchronous actions with MobX

Handle user input and asynchronous actions with MobX

4:07 react

In this lesson we will finally do something useful with our temperatures. We extend it into a small app in which users can enter a location, which is used as input for an external API to fetch weather data. In the mean time MobX keeps our UI in sync with the current state of the request.

react tutorial about Write custom MobX reactions with when and autorun

Write custom MobX reactions with when and autorun

3:27 react

So far we have been talking briefly about reactions. In this lesson you will learn how reactions can be used to observe state until some condition is met. After that you will see how autorun can be used to automatically trigger side effects. This is used internally by observer as well. We will test this by replacing React with our own handcrafted rendering which is still kept in sync with the state by MobX!

react tutorial about Derive computed values and manage side effects with MobX reactions

Derive computed values and manage side effects with MobX reactions

4:50 react

Derivations form the backbone of MobX and come in two flavors: computed values are values that can be derived from the state automatically. And reactions can be used to manage side effects, such as drawing the user interface. In this lesson you will learn how these concepts relate to each other and how they are optimized automatically by MobX.

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 Use MobX actions to change and guard state

Use MobX actions to change and guard state

3:01 react

This lesson explains how actions can be used to control and modify the state of your application. They help you to structure your code base and integrate well with the MobX React Devtools. Actions automatically create transactions, which group changes together.

react tutorial about Use observable objects, arrays, and maps to store state in MobX

Use observable objects, arrays, and maps to store state in MobX

3:46 react

So far we have used the observable decorator extensively. Let's take a closer look on what it does and see how the extendObservable and observable functions can be used to create observable objects, arrays and maps.

react tutorial about Pass observable data through props in MobX

Pass observable data through props in MobX

3:34 react

This lesson explains how you can build larger trees of react component and how they are managed efficiently by MobX. You will learn how to pass observable data structures around in props and how the Devtools can be used to analyze the performance of your UI.

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.

react tutorial about Setup Nuclide to use Flow and Eslint (Mac)

Setup Nuclide to use Flow and Eslint (Mac)

7:18 react

Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how.

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.

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