Web Development


Complete Developers Guide: Ruby on Rails & React with Redux

Ultimate coding for the web! Learn to develop apps with practical projects. Master the fundamentals of coding languages.

4.50 (86 reviews)


50.5 hours


May 2018

Last Update
Regular Price

Unlimited access to 30 000 Premium SkillShare courses

What you will learn

Code in Ruby on Rails.

Make simple web apps.

Lay out a web app in a logical way.

Use JSX, a pre-processor that adds XML syntax to JavaScript.

Build a single-page app using React Router.

Code in ES6 and JavaScript.

Use Web Pack, a bundler for code.

Transition from webpack 1.0 to webpack 2.0.

Write modular CSS.

Use Redux, a predictable state container for JavaScript apps.

Refactor code (alter code to make it simpler and more efficient).

Fix bugs and handle errors.


"Really good, straightforward for the beginner."  ⭐ ⭐ ⭐ ⭐ ⭐ 

Do you want to make web apps? You've come to the right place. Learn how to build a Rails app and (separately) learn how to build a pure React/Redux app.

Enroll now to build your portfolio with projects no one can take away from you!

In Part 1 of this course Tristan Mackinlay teaches you to code in Ruby, one of the most user-friendly programming languages out there. In Part 2, you learn how to build beautiful, well-functioning web apps with React and Redux. Join web developer Chris Veillette to start coding for the Internet.

React is an efficient and flexible JavaScript library for building user interfaces. Many popular websites including Instagram, Facebook, Netflix, and Imgur use React.

Included in this course is material for beginners to get comfortable with the interfaces. Please note that we reuse this content in similar courses because it is introductory material. You can find some material in this course in the following related courses:

  • Make games in GameMaker & learn to code for the web in Ruby!

  • Complete 3D Modeler & C# Unity VR Game Developer Masterclass

  • The Complete VR Course: Build 3D Models and Unity Games

  • The Complete Ruby on Rails & 3D Rendering Humans for Games

  • Become a Web Developer: Learn the Basics and Fundamentals of Ruby!

  • Make Games and Web Apps: Unity, React and Redux Masterclass

  • Complete Modern Developer: React JS with Redux & SpriteKit

  • Introduction to React and Redux. Code Web Apps in JavaScript

You can build your own web apps! This course is full of practical examples. We teach you theory while also building real projects that you can put in your web development portfolio. 

Hands-on training content is the best way to get from A to B. Taking this course means that you learn practical, employable skills immediately.

Learning how to code is a great way to jump in a new career or enhance your current career. Coding is the new math and learning how to code will propel you forward for any situation. 

Learn to program today and get a head start for tomorrow. People who can master technology will rule the future.

You get full lifetime access to this course for a single fee! Join now to meet us


Complete Developers Guide: Ruby on Rails & React with Redux
Complete Developers Guide: Ruby on Rails & React with Redux
Complete Developers Guide: Ruby on Rails & React with Redux
Complete Developers Guide: Ruby on Rails & React with Redux


Introduction to Ruby

Ruby Intro

Ruby Overview

System Requirements

Variable and Data Types - Ruby

Printing to the Console - Ruby

Numbers and Math - Ruby

Strings - Ruby

Booleans and Nil - Ruby

Variables and Expressions - Ruby

Methods - Ruby

Introduction to Methods - Ruby

Methods in Disguise - Ruby

Defining Methods - Ruby

Chaining Methods - Ruby

Built-In Methods - Ruby

Optional Arguments - Ruby

Scopes Introduction - Ruby

Collections - Ruby

Arrays Introduction - Ruby

Accessing Items in an Array - Ruby

Adding and Deleting - Ruby

Hashes Introduction - Ruby

Hashes (Continued) - Ruby

Collections Conclusion - Ruby

Conditionals and Boolean Logic - Ruby

If Else Statements - Ruby

Else If Statements - Ruby

Case Statements - Ruby

One-Line If Statements - Ruby

Boolean Operators - Ruby

Logical AND Statements - Ruby

Logical OR Statements - Ruby

Rock Paper Scissors - Ruby

Truthiness - Ruby

Loops and Iterators - Ruby

While Loops - Ruby

For Loops - Ruby

For Loops (Continued) - Ruby

Mapping Arrays - Ruby

Down to the Filter - Ruby

Reducing Costs (Inject Reduction) - Ruby

Iterating Over Hashes - Ruby

Iterators and Integers - Ruby

REPL Calculator - Ruby

Object Oriented Programming - Ruby

Objects and Classes - Ruby

Defining a Class - Ruby

Inheritance - Ruby

Class Methods - Ruby

Self - Ruby

Scope Review and Class Variables - Ruby

Modules - Ruby

(Project) Playing Card Generator - Ruby

(Finale) Object Oriented Programming - Ruby

Blocks, Procs & Lambdas - Ruby

Methods Taking a Block - Ruby

Custom Iterators - Ruby

Procs Introduction - Ruby

Wolf and Lambda - Ruby

Closures - Ruby

Closures (Continued) - Ruby

Ruby Development Environment

Introduction to Ruby Development Environment

Making and Removing Directories - Ruby

Reading and Writing Text Files - Ruby

Project (Continued) - Ruby

Sublime Text Run from Command Line - Ruby

Sublime Text Configuring - Ruby

Sublime Workflow and Features - Ruby

Development Environment (Conclusion) - Ruby

Programming Ruby Across Multiple Files

Requiring Files - Ruby

Scope and Require Relative - Ruby

Splitting Program Across Files - Ruby

Require Libraries and Gems - Ruby

(Project) Tic Tac Toe - Ruby

Creating Game Board - Ruby

Check Rows for Winner - Ruby

Checking Column - Ruby

Checking Diagonally - Ruby

Defining Square Bracket Method - Ruby

Creating Player and Game Classes - Ruby

Defining a Player Turn - Ruby

Refactoring Print Grid - Ruby

Numbering and Lettering Grid - Ruby

Translating User Input - Ruby

Validating User Input - Ruby

Refactoring Row and Get Column - Ruby

Playing Until Somebody Wins - Ruby

Ending Game on a Tie - Ruby

Creating a Session Class - Ruby

Advancing Session Class - Ruby

Refactoring with Sessions Class - Ruby

Getting Player Names and More Refactoring - Ruby

Adding InputHelper Module - Ruby

(Project) To-Do List - Ruby on Rails

Installing Rails on Ruby

Routing to Home Page - Ruby on Rails

Rendering HTML with ERB (Embedded RuBy)

Making Model Routes and Controller for Tasks

Making New Tasks - Ruby on Rails

Adding Edit and Update Actions

Partials in Ruby on Rails

Deleting Task - Ruby on Rails

Adding Show Page - Ruby on Rails

Validating Task Title - Ruby on Rails

Making Migration - Ruby on Rails

Task Views - Adding Ability to Complete Task

Restarting or Seeding Database with Rake Tool

Generating User Scaffold

Associating User to Tasks

Sessions Controller Routes & Views

Actions, Current User and Adding Header

Errors And Flash Messages

If Getting Error Message

Show Current User's Tasks

Authorization - Ruby on Rails

Cleaning Bonus User Material

(Project) Photo Sharing App - Ruby on Rails

Set up App, Users & Sessions

Generating Scaffold - Ruby on Rails

Using CarrierWave Gem to Upload Images

Make Different Versions of Photo

Adding Authorization Checks

Adding CSS Styling with Bulma

Introduction to React and Redux Section

Common Pitfalls

Quick Win Example

Top 10 Things You Will Learn

Webpack Version Explanation (To Be Watched Before Starting)

Introduction to React and JSX

Introducing JSX - React

React and JSX Intro Part 2

React and JSX Intro Part 3

React and JSX Intro Part 4

($55 value) Source Code

React Components

React Virtual Dom and Classes

ES6 Webpack Dev Server

React Components

Splitting Another Component

React Component Validators

($55 value) Source Code

React States


Extracting Button into Separate Component

Reusing a Component

Splitting Component into Sub-Components

Creating a Timer


Webpack Hot Reloading

($55 value) Source Code

React Event Handling


Simple Event Handling

Getting Values

Using Events to Influence App Display

Splitting Function into Components

($55 value) Source Code

React Routers


Introduction to React Router

Direct URL



Making a Name Profile

Nested Routes

User Profile

React Router Redirects

Making Params Optional

Making Profile and Calling on History

Back Button


Active Inline Styles

Navlinks Components

($55 value) Source Code

React Slight Refactoring

Improving Layout

Additional Refactoring

React Product Components

Making a Web Store Example

Building out the Project

Routing to Products

Rendering Product Profile

Adding Images to the Web App

Reusing Component

($55 value) Source Code

React CSS

Basic CSS Framework

Organizing Information with CSS Grids

CSS Modules

CSS Styling

Adding a Menu in the Navigation Bar

Making a Background

Adding Margins to Products

Styling the Name List

React CSS Styling Part 6

React CSS Extract to Separate file

React CSS Extract to Separate file (Continued)

($55 value) Source Code

Introduction to Redux

Intro to Redux Part 1

Intro to Redux Part 2

Intro to Redux Part 3

Intro to Redux Part 4

Redux Store

Redux Store Continued

Redux Store Subscribe

Redux Store Subscribe Continued

Redux Combine Reducers

Adding Redux to React

Adding Redux to React 1

Adding Redux to React 2

Adding Redux to React 3

Adding Redux to React 4

Delete Names

Babel and Spread Operators

($55 value) Source Code

Redux Action Creator and Product Refactor

Action Creators

Profile Page

Dispatch and onEnter

Refactor into Separate Files

Refactor into Separate Files Continued

Product Page

Product Profile Page

($55 value) Source Code

Redux State in createStore

Initial State in createStore

Initial State in createStore Continued

Adding Generated Names with Faker

($55 value) Source Code

Redux Middleware and Async Dispatching

Fake Backend and Middleware

Thunk Middleware

Thunk Checking State

Get Profile Part 1

Get Profile Part 2

Get Profile Part 3

Get Profile Part 4

Get Names Refactor

Add Random Name

Add Random Name Continued

($55 value) Source Code

Redux Refactoring, Logging, and Error Handling

Refactor Name Reducers

Using Actions

Error Handling Part 1

Error Handling Part 2

Error Handling Part 3

($55 value) Source Code

Products Lists and Profiles

Product List

Product List Continued

Product Profile

Product Profile Continued

Error Handling Refactor

Error Handling Refactor Continued

($55 value) Source Code

Loading Spinner and Error Component

Loading Spinner

Loading Spinner Continued

Error Component

($55 value) Source Code

Adding User-Written Reviews

Adding Reviews 1

Adding Reviews 2

Adding Reviews 3

Adding User Reviews

Refining Review Containers Part 1

Refining Review Containers Part 2

Refining Review Containers Part 3

($55 value) Source Code

Prototypes and Refactoring Error Handling

Adding Prototypes

Adding Prototypes Continued

Action Types

Refactoring Error Handling

Refactoring Error Handling Continued

($55 value) Source Code

Updating to Webpack 2 And Building Production Abundle

Migrating to Webpack2

Hot Reloading

Hot Reloading Continued

HTML Webpack Plugin

Simple Production Build

Dev Config File Update

($55 value) Source Code

Styling the App

Final Styling Part 1

Final Styling Part 2

Final Styling Part 3

Final Styling Part 4

Final Styling Part 5

Styling NavBar

Styling Product List Part 1

Styling Product List Part 2

Styling Product List Part 3

Styling Product Profile

Styling Product Profile Continued

Styling Review

Styling Review Continued

Styling Continued

Styling Namelist Part 1

Styling Namelist Part 2

Styling Namelist Part 3

Styling Layout Footer

Styling Layout Footer Continued

General Layout Styling

General Layout Styling Continued

Font Work and More Styling

($55 value) Source Code


Final Thoughts

Please leave us a rating.

Bonus Lecture: Get 130 courses!


Vincent29 October 2020

I touched ruby in a bootcamp last summer, so expected to know the basic but decided to watch the first chapters anyways. I have learned a whole lot even in the beginning. It is well explained and a step by step great for beginners as well as intermediary devs. Great details, awesome course!

Luis25 August 2020

For someone who knows rails this course is senseless. There is not relation between rails and react and vaguely an example to setup the webpacker. So if you are expecting use rails as backend and react as frontend then this course is not accomplish that as those framework are explained separately. This is a waste of time.

Gokil27 November 2019

i just went through couple of videos and i did not like. If a beginner wants to learn ruby, atleast the instructor should tell how to open irb before starting to writing some code. I am sorry may be its not for me .

Stephen31 January 2019

He’s using JavaScript in a way that I am completely unaware of, I wish he would teach me that stuff about react before showing me the react stuff

Panji14 January 2019

ask Complete Developers Guide Ruby on Rails & React with Redux hey Mammoth Interactive , i'am a question video part 19 React Router 2. Introduction to React Router now in reactjs new version while video in course reactjs old version please update the video to the new version

Ashlyn5 December 2018

The title and description is misleading. Good for beginners -- you will learn rails basics and you will learn react basics.... BUT you won't learn how to use both of these technologies together. React & Rails is relatively tricky to configure together and thus I was hoping to learn more about the mechanics of using these combined technologies. I was expecting to learn how to build a Rails/Redux app with a Rails backend or something utilizing both. I was not expecting to learn how to build a Rails app and (separately) learn how to build a pure React/Redux app.

Jeffrey11 May 2018

Very knowledgeable about this subject. Great examples... Great hands on course.. Title is a little mis-leading.. I was hoping that he would be giving examples of using React as the front-end for Rails....

Steve12 April 2018

This course is very comprehensive and each lesson is well explained in detail. It helps me a lot to improve my skills so I can do my job better as well.

Julian6 January 2018

Almost every step of the course is so far behind from current versions. You will spend a lot of time running into error after error when trying to start your server every time anything in this course is installed. I had to search for specific older versions of the install for just about everything before I could get anything to work.

Yuriy3 November 2017

уделяется много внимания мелочам которые могут много боли причинить, для новичков - отличный курс, бывалым - выборочно есть много чего полезного.


Udemy ID


Course created date


Course Indexed date
Course Submitted by