Hands-on Video and Text Tutorials

We publish new tutorials every week on topics including React.js, Ruby on Rails, Redux, React Native and more.

Sign up for a free membership

Or

Join as a premium member

How to build an online store using React and Rails - Part 2
PRO

18 Sep 2017

1469121606390 react on rails
Video tutorial

In part 2 of this tutorial, we make our online store's React components functional so that we can add (and remove) items to the cart and checkout using the Stripe Orders API.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

How to build an online store using React and Rails - Part 1
PRO

17 Sep 2017

936104f1508c2537e2032bb30b66f943e658c3ad
Video tutorial

Learn to build an online store with cart functionality using Rails 5.1, React.js, Stripe Orders API and Stripe Checkout.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

The 11-minute guide to building and launching an online store with Rails, Stripe Checkout and Heroku
FREE

10 Sep 2017

7dd315acbfedbbc5eebe836e85e21eed061e6b38
Video tutorial

Learn to build and launch a real online store in this 11-minute video tutorial. We will build a simple store which accepts payments through Stripe checkout.js and deploy it to Heroku.


View Free Tutorial

How to build a chat app with Rails 5.1 ActionCable and React.js Part 2
PRO

04 Sep 2017

D9a90607affc261f74950120b56239eb952cc708
Video tutorial

In part 2 of the ActionCable and React tutorial, we’ll rebuild the frontend of a Rails 5.1 chat app using React components.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

How to build a chat app with Rails 5.1 ActionCable and React.js Part 1
PRO

03 Sep 2017

8dfec18cdd4f1bbe775c3cd1723c5118ee545c92
Video tutorial

In the first part of this 2-part tutorial, learn how to build a chat app with Rails 5.1 and ActionCable. We'll use devise and Github omniauth for user authentication.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

How to animate a component using React Transition Group
FREE

19 Aug 2017

Bbd4dd323fc72640b3890510d5dd3d3c8f433a18
Video tutorial

In this hands-on video tutorial, you'll learn how to animate a React component using the React Transition Group library. This tutorial builds upon a previous tutorial on How to make an Idea board app using a Rails 5 API and React.js.

You'll also get access to the complete code.


View Free Tutorial

Rails 5 API and React.js tutorial - How to make an Idea board app
FREE

18 Aug 2017

9cdf6be54639873e597aeca9c6694390e23193a6
Video tutorial

Build an Idea board app with a Rails 5.1 API app and a separate frontend React app built using Create React App. The tutorial covers stateless functional components, class-based components, use of axios for making API calls, immutability-helper and more.


View Free Tutorial

Fitness dashboard part 3
PRO

11 Aug 2017

4b1990d1eb546a33b9a6557f7fb6c7a4881ca139
Video tutorial

In Part 3 of the Fitness dashboard series based on the Fitbit API, we add some time series bar charts using the Recharts component library and a friends leaderboard.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

Fitness dashboard part 2
PRO

10 Aug 2017

Baa3ab999f8356d90f0c8853f7239148be14d70b
Video tutorial

In part 2, we display lifetime statistics and achievement badges from the Fitbit API. We use axios for fetching data and make use of class-based and stateless functional components.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

Fitness dashboard Part 1
PRO

06 Aug 2017

2c701963c2705540cb7c0a92a99b0403866ae61a
Video tutorial

Learn to build a fitness dashboard app with the Fitbit API using a Rails 5.1 app with inbuilt React support. Connect to the Fitbit API, pull in user data and display it in a dashboard showing statistics and charts built with React components.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

How to use React with the webpacker gem and Rails 5.1
FREE

02 Jul 2017

1469121606390 react on rails
Text tutorial

In this tutorial, we will see how to use React in a Rails app with native support through the webpacker gem and without using gems like react-rails or react_on_rails.


View Free Tutorial

Also available in:
The Free React on Rails 5 course

Using Redux with react_on_rails
PRO

01 May 2017

C70469fdfa10a0e7e51913b4ddface46788b1d8b
Video tutorial

In this lesson, we look at the example HelloWorld app that comes with the react_on_rails gem and see how Redux can be used in a simple React app.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

Introduction to Redux
PRO

01 May 2017

Fc7990d3b69842d527487d44de28dcfd76a69ea9
Video tutorial

In this tutorial we look at Redux, one of the most popular libraries built on the Flux pattern.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

Introduction to Flux
PRO

01 May 2017

7f7661ea791e06b6492c86ea87061445cfbf34bb
Video tutorial

In this tutorial we look at the concepts behind the Flux pattern for building user interfaces.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

CSS Animations and Transitions
PRO

01 May 2017

4999435aba1d5a3067c3d2b027e712ab83e03cbb
Video tutorial

In this lesson we’ll look at how to do simple CSS transitions in React.


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

Using Bootstrap with React
PRO

01 May 2017

92af227318a7a54647da810b1445911b32e9084f
Video tutorial

In this tutorial we look at how to use Bootstrap with React


Subscribe & view tutorial

Also available in:
The Complete React on Rails 5 Course

Testing forms
PRO

01 May 2017

1bd4fafd849102f32117013e8bdbe8073d4435f3
Video tutorial

Snapshot testing
PRO

01 May 2017

1f189312073f32e3d0ae549a68e19c1463278ba0
Video tutorial

Testing with Enzyme
PRO

01 May 2017

86ccfac946e4767c3192bcfd5b64335ea4c848d3
Video tutorial

Testing with Jest
PRO

01 May 2017

254c8c6d92484b12c24a2bd77f34cf1426673d83
Video tutorial

Displaying session data and signing out
PRO

01 May 2017

A2efad26c0118068ff2f65afe617a54602b64968
Video tutorial

API User authentication with devise_token_auth
PRO

01 May 2017

5a0f89f67499fe7e84851c7d28603bfa34357a1d
Video tutorial

Porting React components from react_on_rails to React
PRO

01 May 2017

10c90ebae906981fe1cd60ff606eec7799444f08
Video tutorial

Setting up a Rails API app and Create React App
PRO

01 May 2017

D9a62c6f4409bf81e67b3e724533782e105ceed4
Video tutorial

Using Devise with React
PRO

01 May 2017

B008d57daf5fc9a7822d5403d50b8540d443f91c
Video tutorial

Recap
PRO

01 May 2017

05f499c7f91dd4007866ca5e7eceefa544c40e4d
Video tutorial

Deleting a record
PRO

01 May 2017

23e8eac5bff589004720f6a3dfaaed322fe85917
Video tutorial

Editing a record - Part 2
PRO

01 May 2017

58d2232b75794782ac763753d8577755bc8e3a88
Video tutorial

Editing a record - Part 1
PRO

01 May 2017

C77e6b08857f56144f4919832791751f07506782
Video tutorial

Keeping data fresh with componentDidMount
PRO

01 May 2017

B28a352aea5893b7d8bfbf153999a659d4ba39d4
Video tutorial

Navigating between routes
PRO

01 May 2017

960086e08d7e2836c1069ae3b4c4a63551c273c2
Video tutorial

Viewing a record on its own route
PRO

01 May 2017

F076e769ea6e790074cad0396dd704213f1e8e48
Video tutorial

Introduction to React Router v4
PRO

01 May 2017

F6242baeb7da69765d24d85306720ee5e3ab0d5f
Video tutorial

Refs
PRO

30 Apr 2017

C9fd824f28945bdc0f9883a2d2e4bf317d5699b3
Video tutorial

Typechecking With PropTypes
PRO

30 Apr 2017

47060d24ffe212343585cf52aef6182910c14e94
Video tutorial

Generalised form validations
PRO

30 Apr 2017

E340b859457d1d3a43d40e33184b9875de81f52b
Video tutorial

Client side validation errors
PRO

28 Feb 2017

6f578dfd0695745e8bbbbda2ce19bec6f3ce7e41
Video tutorial

Refactor client side validations
PRO

28 Feb 2017

4f778c8f0c5a96cc93bab4bedcfbbfad12fbc2be
Video tutorial

Multiple field validations on client side
PRO

28 Feb 2017

A6cef2eb9bb305bdc9a66c4a5c077b953f23040c
Video tutorial

Code refactor and corrections
PRO

22 Jan 2017

2ef963edd18c1d2d0934c2721bbe326f9e3ebfbd
Video tutorial

Client-side form validation in React
PRO

22 Jan 2017

Ec020d9d8c07a4e4ab82df18a64a1c46813d30aa
Video tutorial

Basic form validation
PRO

22 Jan 2017

9d1288f50049a5f2fa74c6562983f54474c5c670
Video tutorial

Hot Module Replacement
PRO

22 Jan 2017

31832e566449f57970da74fee820c944028dc338
Video tutorial

Deploying to Heroku
PRO

22 Jan 2017

E6fff83705faa1c1ab62c132c09902076cbe47ca
Video tutorial

Server-side rendering
PRO

22 Jan 2017

Ec7c75996ce7a53a48a0a573e0b5c0852e62b72f
Video tutorial

Migrating the Calendar appointments app to react_on_rails
PRO

22 Jan 2017

C68fb92e5878bed8c3bb62d08f3271a5d4e219eb
Video tutorial

Introduction and setup of Webpack with react_on_rails gem
PRO

22 Jan 2017

Ccc203d544d1df4d99f6638e648b21643cb662e7
Video tutorial

Stateless Functional Components in React
FREE

20 Jan 2017

66d8fef5d556458ae12752e666f911614b2321d6
Video tutorial

ES6 Arrow functions in React
FREE

20 Jan 2017

F7c8d4cdc50c06992191e8655cee1dd7384b7638
Video tutorial

ES6 classes in React
FREE

20 Jan 2017

6b462c9854fd6f93b2fe96c36cba9b876e8d17be
Video tutorial

Introduction to ES6 using the react-rails component generator
FREE

20 Jan 2017

Da88736b477ecee8624db327ab1cec82469dc95a
Video tutorial

Deploying a react-rails app to Heroku
FREE

19 Jan 2017

Afec80327abd9fea41d18d269a0eb3a56a2fc411
Video tutorial

Styling with CSS in React
FREE

14 Jan 2017

B0c840d1c9d96d047aca7794fde954d5d7c3ba44
Video tutorial

Using a third-party React component - react-datetime
FREE

14 Jan 2017

44302de490ad5de0d2756a84cea69df643216530
Video tutorial

Using a third-party JavaScript library - Moment.js
FREE

14 Jan 2017

53cd6363b7c2228e7da514222a0d2f99acac2644
Video tutorial

React State - Handling form submission
FREE

14 Jan 2017

Fe5de54eeaf739e8f6a0565ff8720fb8480eacc6
Video tutorial

React State - Handling user form input
FREE

14 Jan 2017

Bf8f8a31a17af3588ffe438b93638cc7815f3297
Video tutorial

React props and nested components
FREE

14 Jan 2017

600eec1c90fb920a65bd4d52bdedef6c426b01ce
Video tutorial

Calendar appointments app with jQuery and Haml
FREE

14 Jan 2017

B6597a9a17aa44edd6e33a092aa5b64a220cd1e9
Video tutorial

Installation and setup of Rails 5 app with react-rails gem
FREE

14 Jan 2017

3dc715f4f9e3444b559cef7bc42b60ab0a8681b4
Video tutorial

Quick Introduction to key React concepts
FREE

14 Jan 2017

0f21f308d82fbdb61e7e28f93571e32f9c86a050
Video tutorial