React

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

COURSES 15

WATCH Joe Maddalone's COURSE

Start Using React to Build Web Applications

Start Using React to Build Web Applications

React is a "javascript library for building user interfaces" from the fine folks at Facebook & Instagram. It strictly focus...

21 lessons

WATCH Andrew Van Slaars's COURSE

Build Your First Production Quality React App

Build Your First Production Quality React App

With the variety of choice we have in building modern web applications using JavaScript, it can make it difficult to understand...

24 lessons

WATCH Dan Abramov's COURSE

Getting Started with Redux

Getting Started with Redux

I had no idea why I'd want to use Redux when I started this course. This course really made it easy to understand the how &...

30 lessons

WATCH Jason Brown's COURSE

Build a React Native Todo Application

Build a React Native Todo Application

In this course we’ll explore getting started with a basic React Native application on both iOS and Android. We’ll learn about u...

13 lessons

WATCH Dan Abramov's COURSE

Building React Applications with Idiomatic Redux

Building React Applications with Idiomatic Redux

This course will pick up where we left off with the Redux Fundamentals course. If you haven't watched that yet, you are highly ...

27 lessons

WATCH Joe Maddalone's COURSE

Getting Started with React Router

Getting Started with React Router

React Router is the defacto router for any React application and it allows us to extract the state of our application from the ...

11 lessons

WATCH Jason Brown's COURSE

Animate React Native UI Elements

Animate React Native UI Elements

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like...

9 lessons

WATCH Michel Weststrate's COURSE

Manage Complex State in React Apps with MobX

Manage Complex State in React Apps with MobX

MobX is designed to enable building web applications with a complex data model in an intuitive and very performant manner. Usin...

9 lessons

WATCH Trevor Miller's COURSE

React Testing Cookbook

React Testing Cookbook

The definition of "legacy code" can be described simply as "code that doesn't have tests." Code you just wrote, 5 minutes ago? ...

13 lessons

WATCH Joe Maddalone's COURSE

React: Flux Architecture (ES6)

React: Flux Architecture (ES6)

As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage ...

10 lessons

WATCH Tyler McGinnis's COURSE

React Native Fundamentals

React Native Fundamentals

If you're a web developer who has been itching to get into native development, now is your chance. In this series we'll be talk...

17 lessons

WATCH Joe Maddalone's COURSE

Add routing to React apps using React Router v4

Add routing to React apps using React Router v4

React Router v4 takes an entirely new approach to routing and handling URLs in your React applications. It fully embraces the c...

14 lessons

WATCH Jason Brown's COURSE

Real World React Native Animations

Real World React Native Animations

In this course we'll explore how to create many popular animated concepts in applications across web and mobile applications. W...

10 lessons

WATCH Tim Kindberg's COURSE

Higher Order Components with Functional Patterns Using Recompose

Higher Order Components with Functional Patterns Using Recompose

In this course, you will learn to use many of the most powerful and convenient higher-order components within Recompose by codi...

15 lessons

WATCH Shane Osbourne's COURSE

Up and running with Preact

Up and running with Preact

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’...

12 lessons

Create a Responsive Animated Progress Bar in React Native

In this lesson we'll show how to structure views to create a responsive progress bar (without defining a set width). It will allow for dynamic border, bar, and fill colors. We'll finish off by show...

Jason Brown
9:24

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined rowHeight on list and allow for dyn...

Jason Brown
3:01

Create an Auto Resizing Virtualized List with react-virtualized

In this lesson we'll show how to use the AutoSizer component from react-virtualized to automatically measure the width/height of our content area. We'll then use theList component to render our set...

Jason Brown
4:35

Use React.cloneElement to Modify and Add Additional Properties to React Children

In this lesson we'll show how to use React.cloneElement to add additional properties to the children of a React element. We'll also show that you can add additional properties not declared on the e...

Jason Brown
2:58

Convert Imperative Code to a Declarative React Component

In this lesson we'll show how to take a beforeUnload call and convert it to a declarative React Component. It will handle subscribing to events, and automatically unsubscribing to prevent memory le...

Jason Brown
4:45

Disable and Ignore Yellow Box Warnings in React Native

Yellow box warnings in react native can be intrusive. We will use console.disableYellowBox to disable the yellow box entirely. We'll also use console.ignoredYellowBox to selectively disabled warnin...

Jason Brown
2:04

Cleanly Map Over A Stateless Functional Component with a Higher Order Component

In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any...

Andrew Van Slaars
4:46

React Playground Styled for Component Docs

React Playground Styled is a responsive playground that can be configured with styled-components. It is built for documenting React components in the minimum space possible. You will normally wrap ...

Phil Holden
6:27

Bootstrap a Zero Configuration React App with Neutrino

Setting up tooling for a basic React app is typically very hard to do and requires a lot of configuration. In this lesson, we will setup a new React project with Neutrino with zero configuration. N...

Mark Shust
1:05

Update State in React with Ramda's Evolve

In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolve function to make our updater func...

Andrew Van Slaars
4:29

Update Component State in React With Ramda Lenses

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing...

Andrew Van Slaars
4:37

Use create-react-native-app to Set Up a Simple React Native App

React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install create-react-native-app globa...

Bram Borggreve
0:55

FEATURED REACT PLAYLISTS

Browse all React lessons.

showing All 288 lessons...

Create a Responsive Animated Progress Bar in React Native

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

Handle Simple Routing with preact-router

Use Redux Dev-Tools with Preact

Integrate react-router with Preact

Integrate Redux with Preact

Configure Webpack 2 and Babel for use with Preact

Define Stateful Components in Preact

Use Link State to Automatically Handle State Changes

Reduce the Size of a React App in Two Lines with preact-compat:

Install Development Tools for Preact

Use State and Props in the Component Render Function

Create a Hello World App with Preact

Define Functional Components in Preact

Create an Auto Resizing Virtualized List with react-virtualized

Use React.cloneElement to Modify and Add Additional Properties to React Children

Convert Imperative Code to a Declarative React Component

Disable and Ignore Yellow Box Warnings in React Native

Cleanly Map Over A Stateless Functional Component with a Higher Order Component

React Playground Styled for Component Docs

Optimize Component Rendering using Recompose

P

Learn How Recompose Optimizes Higher Order Components

P

Optimize Expensive Computations in Recompose

P

Show Error Messages based on Non-Optimal States with Recompose

P

Set the HTML Tag of a Component via a Prop using Recompose

P

Render Components Based on Predicates in Recompose

P

Show a Spinner While a Component is Loading using Recompose

P

Add Lifecycle Hooks to a Functional Stateless Component using Recompose

P

Flatten a Prop using Recompose

P

Lock Props by using the Recompose withProps Higher Order Component

P

Transform Props by using the Recompose mapProps Higher Order Component

P

Compose Multiple Higher Order Components Together using Recompose

P

Add Local State to a Functional Stateless Component using Recompose

P

Add Local State with Redux-like Reducers using Recompose

P

Write a Higher Order Component from Scratch

P

Bootstrap a Zero Configuration React App with Neutrino

Build a Collapsible React Native Header Bar

P

Create an Expanding Notify Input with Success Message in React Native

P

Use React Native to Animate a Swipe Away Comment Modal

P

Toggle Hidden Details on a React Native Event Card

P

Animate a React Native Information Callout View

P

Build an Animated Floating Action Button in React Native with Springy Menu

P

Create a Tap to Show Love React Native Animation

P

Create An Exploding Heart Button in React Native

P

Create a Horizontal Parallax ScrollView in React Native

P

Bounce a Heart Shaped Button in React Native on Press

P

Update State in React with Ramda's Evolve

Update Component State in React With Ramda Lenses

Use create-react-native-app to Set Up a Simple React Native App

Render Catch-All Routes with React Router v4 using the Switch Component

P
react tutorial about Create a Responsive Animated Progress Bar in React Native

Create a Responsive Animated Progress Bar in React Native

9:24 react

In this lesson we'll show how to structure views to create a responsive progress bar (without defining a set width). It will allow for dynamic border, bar, and fill colors. We'll finish off by showing how to add animation to make the progress indicator smoothly transition.

react tutorial about Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

3:01 react

In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined rowHeight on list and allow for dynamically sized rows.

react tutorial about Handle Simple Routing with preact-router

Handle Simple Routing with preact-router

6:35 react

Some applications only need a very minimal routing solution. This lesson will cover a practical example showing the router in use. We’ll build a simple search feature that accepts user input and then calls the github API. We’ll see how to access route parameters, how to manually & automatically navigate around, and finally how to handle un-matched path. https://github.com/developit/preact-router

react tutorial about Use Redux Dev-Tools with Preact

Use Redux Dev-Tools with Preact

1:41 react

Preact and Redux is a great combination, made even more so by the amazing dev tools extension that can be installed into both Chrome and Firefox. In this lesson we’ll see how to enable it and how it works seamlessly with Preact.
https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

react tutorial about Integrate react-router with Preact

Integrate react-router with Preact

6:43 react

React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router

react tutorial about Integrate Redux with Preact

Integrate Redux with Preact

6:23 react

Redux is one of the most popular state-management libraries and although not specific to React, it is widely used with it. This is why the author of Preact has released a package called preact-redux, which is a simple wrapper around the main react-redux package that enables it to be used in a Preact application without any other changes to your codebase. In this lesson we refactor a stateful component to use Redux + Redux-thunk. https://github.com/developit/preact-redux

react tutorial about Configure Webpack 2 and Babel for use with Preact

Configure Webpack 2 and Babel for use with Preact

5:44 react

In this lesson we will create a ‘webpack.config.js’ file from scratch. Along the way we’ll learn about the entry point, how to specify output, how to configure loaders, the Preact-specific parts of the Babel configuration, and finally how to use the ‘webpack-dev-server’ via a script in the ‘package.json’ file

react tutorial about Define Stateful Components in Preact

Define Stateful Components in Preact

6:13 react

When dealing with Components, there’s often the need to either have some local state controlled by the component (such as form input fields) or to tap into the lifecycle events of the component. In this lesson we’ll give some practical examples of both.

react tutorial about Use Link State to Automatically Handle State Changes

Use Link State to Automatically Handle State Changes

5:25 react

Storing and updating values inside a component’s local state (known as controlled components) is such a common pattern that Preact offers a really handy feature called ‘link state’ that not only removes the need to bind class methods, but also handles the setting of new values. This can remove the need for ‘setter’ style methods on classes and in this lesson we’ll look at an example of tracking the value of a ‘text input’

react tutorial about  Reduce the Size of a React App in Two Lines with preact-compat:

Reduce the Size of a React App in Two Lines with preact-compat:

4:03 react

Not every app is greenfield, and it would be a shame if existing React apps could not benefit from the micro-size of Preact. In this lesson we’ll discuss what preact-compat is, how to use it, and some examples of the file-size savings available. https://github.com/developit/preact-compat

react tutorial about Install Development Tools for Preact

Install Development Tools for Preact

3:24 react

Although technically you can run Preact without any tools or pre-compiling, we’ll get a much better development experience by using modern versions of Javascript along with JSX. To achieve this, we'll be installing babel-core along with babel-preset-env. This combination will provide us with a set of plugins suitable for transpiling our code for use in modern browsers. It doesn't include support for JSX however, so we'll add the babel-plugin-transform-react-jsx plugin to handle that part. Along with creating a Javascript file that can be executed in the browser, we also want to preview our work each time we change a file - so we install Webpack and the Webpack Dev Server to handle both of those tasks. The final dependency we install is babel-loader which will allow the source files being accessed by Webpack to first be processed by Babel and the plugins we specified.

react tutorial about Use State and Props in the Component Render Function

Use State and Props in the Component Render Function

2:00 react

Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructuring can make it even nicer to work with.

react tutorial about Create a Hello World App with Preact

Create a Hello World App with Preact

4:57 react

By creating a simple ‘hello world’ example application first in vanilla Javascript, and then in Preact without any tools, we’ll learn what type of problems Preact is solving for us and how is works at a low level. Then we’ll switch to a Webpack + Babel setup we’ll cover some fundamental concepts such as, which imports we need, how to create a component, how to use JSX and finally how to render our component into a target element in a web page.

react tutorial about Define Functional Components in Preact

Define Functional Components in Preact

4:31 react

Many components within an application can be rendered using only data that is ‘passed’ to them by a parent. We call these “Functional Components” as they do not contain any internal state. In this lesson we look at how to define these types of components and how to pass data to them.

react tutorial about Create an Auto Resizing Virtualized List with react-virtualized

Create an Auto Resizing Virtualized List with react-virtualized

4:35 react

In this lesson we'll show how to use the AutoSizer component from react-virtualized to automatically measure the width/height of our content area. We'll then use theList component to render our set of data as a virtualized list into the DOM using windowing.

react tutorial about Use React.cloneElement to Modify and Add Additional Properties to React Children

Use React.cloneElement to Modify and Add Additional Properties to React Children

2:58 react

In this lesson we'll show how to use React.cloneElement to add additional properties to the children of a React element. We'll also show that you can add additional properties not declared on the element.

react tutorial about Convert Imperative Code to a Declarative React Component

Convert Imperative Code to a Declarative React Component

4:45 react

In this lesson we'll show how to take a beforeUnload call and convert it to a declarative React Component. It will handle subscribing to events, and automatically unsubscribing to prevent memory leaks.

react tutorial about Disable and Ignore Yellow Box Warnings in React Native

Disable and Ignore Yellow Box Warnings in React Native

2:04 react

Yellow box warnings in react native can be intrusive. We will use console.disableYellowBox to disable the yellow box entirely. We'll also use console.ignoredYellowBox to selectively disabled warnings.

react tutorial about Cleanly Map Over A Stateless Functional Component with a Higher Order Component

Cleanly Map Over A Stateless Functional Component with a Higher Order Component

4:46 react

In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the key prop on the component for us based on the property name that we specify.

react tutorial about React Playground Styled for Component Docs

React Playground Styled for Component Docs

6:27 react

React Playground Styled is a responsive playground that can be configured with styled-components. It is built for documenting React components in the minimum space possible. You will normally wrap it in your own component to provide sensible defaults that make it blend with the look and feel your style guide.

react tutorial about Optimize Component Rendering using Recompose

Optimize Component Rendering using Recompose

6:14 react PRO

Learn how and when to use the ‘pure’, ‘onlyUpdateForKeys’,
‘onlyUpdateForPropTypes’, and ‘shouldUpdate’ higher order components.
Each one provides a certain granularity of control over prevent
unnecessary renders. Learn how they build upon each other to provide
different options.

react tutorial about Learn How Recompose Optimizes Higher Order Components

Learn How Recompose Optimizes Higher Order Components

3:36 react PRO

Learn about optimizations (like component squashing) that Recompose uses behind the scenes. More reading on Performance.

react tutorial about Optimize Expensive Computations in Recompose

Optimize Expensive Computations in Recompose

1:33 react PRO

Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop computations are only executed when necessary. Simply specify which props are “expensive” and provide a factory function for those props.

react tutorial about Show Error Messages based on Non-Optimal States with Recompose

Show Error Messages based on Non-Optimal States with Recompose

4:34 react PRO

Learn how to use the ‘branch’ and ‘renderComponent’ higher-order components to show errors or messaging when your component is in a non-optimal state. Avoid putting extraneous logic to show errors or messaging into your core component by organizing your non-optimal states into custom higher-order components.

react tutorial about Set the HTML Tag of a Component via a Prop using Recompose

Set the HTML Tag of a Component via a Prop using Recompose

2:33 react PRO

Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap the underlying html tag of your component. Sometimes we want a component to behave the same overall but to use a different element in the HTML output. An example is swapping an for a or even a react router depending on circumstance.

react tutorial about Render Components Based on Predicates in Recompose

Render Components Based on Predicates in Recompose

1:43 react PRO

Learn how to use the ‘branch’ and ‘renderNothing’ higher-order
components to render nothing when a certain prop condition is
met. Sometimes you only want to render a component when valid
props exist or are in a certain condition; ‘renderNothing’ is
an easy way to completely remove the component when you don’t
need to show it.

react tutorial about Show a Spinner While a Component is Loading using Recompose

Show a Spinner While a Component is Loading using Recompose

2:48 react PRO

Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while a component loads.

react tutorial about Add Lifecycle Hooks to a Functional Stateless Component using Recompose

Add Lifecycle Hooks to a Functional Stateless Component using Recompose

2:56 react PRO

Learn how to use the 'lifecycle' higher-order component to conveniently use hooks without using a class component.

react tutorial about Flatten a Prop using Recompose

Flatten a Prop using Recompose

1:10 react PRO

Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread each of its fields out as a prop.

react tutorial about Lock Props by using the Recompose withProps Higher Order Component

Lock Props by using the Recompose withProps Higher Order Component

2:32 react PRO

Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden.

react tutorial about Transform Props by using the Recompose mapProps Higher Order Component

Transform Props by using the Recompose mapProps Higher Order Component

2:49 react PRO

Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field.

react tutorial about Compose Multiple Higher Order Components Together using Recompose

Compose Multiple Higher Order Components Together using Recompose

3:46 react PRO

Learn how to use the 'compose' function to mix together HOCs, even ones from other libraries like 'connect' from redux.

react tutorial about Add Local State to a Functional Stateless Component using Recompose

Add Local State to a Functional Stateless Component using Recompose

6:21 react PRO

Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local state to—and create a reusable local state pattern for—your functional stateless components. No need for classes!

react tutorial about Add Local State with Redux-like Reducers using Recompose

Add Local State with Redux-like Reducers using Recompose

2:36 react PRO

Learn how to use the 'withReducer' higher order component using the alternative reducer form. If you like using reducers in redux, you’ll be able to reuse that same technique but for local state.

react tutorial about Write a Higher Order Component from Scratch

Write a Higher Order Component from Scratch

3:15 react PRO

Learn the proper patterns for writing a higher order component from scratch.

react tutorial about Bootstrap a Zero Configuration React App with Neutrino

Bootstrap a Zero Configuration React App with Neutrino

1:05 react

Setting up tooling for a basic React app is typically very hard to do and requires a lot of configuration. In this lesson, we will setup a new React project with Neutrino with zero configuration. Neutrino uses Webpack and Babel behind the scenes, so you still get great build technology, but without all the heavy lifting of needing to configure it.

react tutorial about Build a Collapsible React Native Header Bar

Build a Collapsible React Native Header Bar

4:27 react PRO

In this lesson we'll create a collapsible header bar. This technique is used to show additional information or actions but hide when the user scrolls to expose more of the information they are looking at.
We'll use a combination of ScrollView, onScroll, and the Animated.event function to update our Animated.Value every time the user scrolls. Then with a series of interpolate calls we can define a scroll threshold to show/hide pieces of information, as well as shrink the fontSize of our title.

react tutorial about Create an Expanding Notify Input with Success Message in React Native

Create an Expanding Notify Input with Success Message in React Native

7:07 react PRO

In this lesson we'll create a notify button that expands from the middle to show a TextInput with a send button and once sent will hide the TextInput and show a thank you message. We'll use the helper method StyleSheet.absoluteFill to position our input inside of our wrapping View. This allows us to animate our TextInput and our messages in and out without effecting layout of each other.
When pressed to show the TextInput and when we show the thank you message a combination of animating the width and justifyContent: "center" to make it appear as if we're animating the view from the center. We'll use Animated.timing and a success boolean on state to control what is rendered, and what is animating. interpolate will be used heavily to scale in and out views when they are needed.

react tutorial about Use React Native to Animate a Swipe Away Comment Modal

Use React Native to Animate a Swipe Away Comment Modal

8:33 react PRO

In this lesson we'll use PanResponder gesture handlers to add the ability to swipe a modal closed in either direction. We'll need ScrollView callbacks to allow us to still scroll through comments and only close when desired.
We'll use the Animated.setValue function to translate our Modal up or down depending on the direction of the swipe.

react tutorial about Toggle Hidden Details on a React Native Event Card

Toggle Hidden Details on a React Native Event Card

4:14 react PRO

In this lesson we'll create an event details card with basic information displayed. On press basic information will slide up to present additional information. We'll use state and the componentDidUpdate callback to trigger our animations.
Depending our state we'll use Animated.timing to animate the information in and out. We'll use a series interpolate on our Animated.Value to rotate the arrow, and translate our information into view.

react tutorial about Animate a React Native Information Callout View

Animate a React Native Information Callout View

6:38 react PRO

In this lesson we'll create a tap to show more information animation card. This is a great technique for exposing minimal information and then revealing more information if a user needs it.
We'll use Animated.timing and rely heavily on interpolate to coordinating the sliding of the card, and scaling image animations. Finally we will need to disablethe ScrollView to allow for our gestures to work correctly.

react tutorial about Build an Animated Floating Action Button  in React Native with Springy Menu

Build an Animated Floating Action Button in React Native with Springy Menu

7:43 react PRO

In this lesson we'll create an animated floating action button. This technique can be used as a quick action menu to hide additional options. When pressed we'll use Animated.parallel to execute our stagger menu options and execute our Animated.timing animation which will rotate our button and change our background color with interpolate. We use Animated.stagger to create a delay of our buttons sliding up. Animated.spring will give our buttons a spring effect as they shoot upwards.

react tutorial about Create a Tap to Show Love React Native Animation

Create a Tap to Show Love React Native Animation

7:14 react PRO

In this lesson we'll build a "tap to show love" animation. This technique is commonly used on many streaming sites to show the streamer they appreciate the content. When the screen is pressed an Animated.Value will be created. We will measure the screen dimensions with Dimensions so we can place our heart in a random location. Then we'll use Animated.timing to animate the heart upwards. Finally a series of interpolate will allow the heart to explode from nothing to full sized heart, wobble side to side, move upwards, and then fade out.

react tutorial about Create An Exploding Heart Button in React Native

Create An Exploding Heart Button in React Native

6:18 react PRO

In this lesson we'll create a like button that explodes with hearts. We'll use Animated.parallel to execute the bouncy heart animation as well as the series of hearts exploding at the same time. Then we'll use an array of Animated.timing animations and then use Animated.stagger to make the hearts appear with a 50ms stagger. We use Animated.delay to wait before we then use Animated.stagger again to hide the hearts in. Finally our Animated.sequence will cause each of those animations to happen one after the other.

react tutorial about Create a Horizontal Parallax ScrollView in React Native

Create a Horizontal Parallax ScrollView in React Native

9:57 react PRO

In this lesson we'll create a Twitter Moments clone with a horizontal parallax image scrolling effect. We'll use Animated.event, and interpolation to make the effect work.

react tutorial about Bounce a Heart Shaped Button in React Native on Press

Bounce a Heart Shaped Button in React Native on Press

4:25 react PRO

In this lesson we'll create a heart shaped like button that bounces when it is pressed. This technique is a great way to show feedback for when a user likes a piece of content. We'll Animated.spring to create a realistic feeling spring animation with the use of friction. We'll also use interpolate to our animated value to scale our heart up and down to make it look like it's bouncing.

react tutorial about Update State in React with Ramda's Evolve

Update State in React with Ramda's Evolve

4:29 react

In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolve function to make our updater function a reusable utility that isn't tied to the React API.

react tutorial about Update Component State in React With Ramda Lenses

Update Component State in React With Ramda Lenses

4:37 react

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.

react tutorial about Use create-react-native-app to Set Up a Simple React Native App

Use create-react-native-app to Set Up a Simple React Native App

0:55 react

React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install create-react-native-app globally and create a new project.

After creating the project we will run the development server which will print a QR code on the terminal. We will install the app called Expo Client on our mobile phone and use it to scan the QR code.

This will load our app on our mobile phone in development mode. When make adjustments to our project the changes will be reflected on our phone. If we use console.log the messages will be printed in our terminal.

Download the Expo Client from App Store or Google Play

react tutorial about Render Catch-All Routes with React Router v4 using the Switch Component

Render Catch-All Routes with React Router v4 using the Switch Component

1:24 react PRO

There are many cases where we will need a catch-all route in our web applications. This can include 404-style routes when nothing is match or other use cases where where we receive an invalid route in React Router v4.

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