Browse all React lessons.

showing All 425 lessons...

Make a Button in React Native with TouchableHighlight

P

Get the Dimensions of a React Native Phone Screen

P

Use React.cloneElement to Extend Functionality of Children Components

Understand React.Children Utilities

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

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

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

P

Recompose: Theme React Components Live with Context

P

Recompose: Override Styles & Elements Types in React

P

Styling React Components With Aphrodite

P

Set up React apps with zero configuration in two minutes

P

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)

P

Creating a Stateless Functional Component in React

P

Using the classnames library for conditional CSS in React

P

Applying Basic Styles in React Native

P

Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

P

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

Creating a D3 Force Layout in React

P

Radium: Updating Button Styles via Props

P

Core Concepts of React: Components, Props, and State

P

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

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

Recompose: ButtonGroup - When nesting affects Style

8:23 react PRO

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

Recompose: Override Styles & Elements Types in React

5:54 react PRO

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

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.

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

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

Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

5:30 redux PRO

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

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

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

2:31 react

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

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

react tutorial about Creating a D3 Force Layout in React

Creating a D3 Force Layout in React

9:57 react PRO

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

react tutorial about Radium: Updating Button Styles via Props

Radium: Updating Button Styles via Props

0:47 react PRO

In a CSS library like Bootstrap we can set a button's style to be "primary" or "secondary" by appending classes. For React components we want to be able to do this via props. Radium enables this by composing styles via an array. This mimicks the cascade of CSS.

react tutorial about Core Concepts of React: Components, Props, and State

Core Concepts of React: Components, Props, and State

6:54 react PRO

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

react tutorial about React Router: Named Components

React Router: Named Components

2:28 react PRO

In this lesson we'll learn how to render multiple component children from a single route.

react tutorial about React Router: Nested Routes

React Router: Nested Routes

2:08 react PRO

Since react-router routes are components, creating nested routes is as simple as making one route a child of another in JSX. In this lesson we'll explore nesting routes and accessing the children of parent routes.

react tutorial about React Router: Redirect

React Router: Redirect

1:25 react PRO

The Redirect component in react-router does exactly what it sounds like. It allows us to redirect from from one route to another.

react tutorial about React Router: setRouteWillLeaveHook

React Router: setRouteWillLeaveHook

3:29 react PRO

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

react tutorial about React Router: IndexRoute

React Router: IndexRoute

1:55 react PRO

IndexRoute allows us to define a default child component to be rendered at a specific route when no other sub-route is available.

react tutorial about React Router: Router, Route, and Link

React Router: Router, Route, and Link

2:54 react

In this lesson we'll take our first look at the most common components available to us in react-router; Router, Route, and Link.

react tutorial about React Router: Querystring Parameters

React Router: Querystring Parameters

2:22 react PRO

In this lesson we'll extract props for our component from a querystring in the route url.

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