O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hands-on with React and Ruby on Rails

Video Description

In this Hands-on with React and Ruby on Rails training course, expert author Jonathan Lebensold will teach you how to build a web application from setup to deployment with React and Ruby on Rails. This course is designed for users that already have experience with web development and scripting languages.

You will start by learning about the Flux application pattern, including how to integrate Flux into React components, introduce ES6 with Ruby on Rails, and mitigate Flux JavaScript to Flux ES6. From there, Jonathan will teach you how to finalize the Flux architecture. This video tutorial also covers complex UI interactions in Flux and configuring NodeJS and Rails. Finally, you will learn about automated testing, including how to use code coverage, write model specs, and test Flux with RSpec.

Once you have completed this computer based training course, you will be capable of designing and building your own web applications with React and Ruby on Rails. Working files are included, allowing you to follow along with the author throughout the lessons.

Table of Contents

  1. Getting Started With Rails And React
    1. Architectural Overview 00:10:50
    2. Scaffolding The Ruby On Rails Application 00:08:15
    3. Setting Up The Model Layer 00:07:43
    4. Defining Our Views 00:09:55
    5. Defining Rails Routes 00:02:46
    6. Our First React Component 00:07:10
    7. Preparing JSon Data For React 00:06:41
    8. Rendering Ruby Models In React 00:05:58
    9. How To Access Your Working Files 00:01:15
  2. Introduction To The Flux Application Pattern
    1. Architectural Overview Of Flux 00:06:49
    2. A Simple Flux Store - Part 1 00:05:11
    3. A Simple Flux Store - Part 2 00:08:09
    4. Integrating Flux Into React Components 00:08:59
    5. Introducing ES6 With Ruby On Rails 00:03:59
    6. Migrating Flux Javascript To Flux ES6 00:08:47
    7. ES6 Module Loading - Part 1 00:08:08
    8. ES6 Module Loading - Part 2 00:10:32
  3. Finalizing The Flux Architecture
    1. Introducing Reacts Notion Of Context 00:05:09
    2. Migrating React Components To ES6 00:07:47
    3. Making React Components Context-Aware 00:04:10
    4. React Forms With Flux 00:10:15
    5. Leveraging Action Creators With Context 00:05:28
    6. Reading Server Data 00:05:31
    7. Sending Server Data 00:12:48
    8. Working With Promises 00:03:48
  4. Complex UI Interactions In Flux
    1. Nesting Components 00:05:50
    2. Component Trees 00:05:58
    3. Improving Component Styles 00:09:08
    4. Incorporating Bi-Directional Data Flow 00:05:30
    5. Reviewing Concepts By Example - Implementing Ranking 00:09:45
    6. Reviewing Concepts By Example - Implementing Ordering 00:09:54
  5. Real-Time
    1. Real-Time Overview 00:04:33
    2. Implementing Long Polling 00:04:33
  6. Isomorphic Flux - Configuring NodeJS
    1. Refactoring For Isomorphic Code 00:05:58
    2. Setting Up Webpack With Rails 00:07:44
    3. Overview Of Node Dependencies 00:07:59
    4. Moving Sprockets Code To Webpack 00:06:00
    5. Bridging Rails And Webpack - Part 1 00:06:25
    6. Bridging Rails And Webpack - Part 2 00:11:01
  7. Isomorphic Flux - Configuring Rails
    1. Architectural Review 00:01:13
    2. Bundling Processes With Foreman 00:02:19
    3. Writing A Component Rendering Server 00:03:46
    4. Finishing The Isomorphic Spike 00:07:05
    5. Adding Support For Isomorphic And Non-Isomorphic Rails Configurations 00:02:14
  8. Automated Testing
    1. Setting Up Rspec 00:04:15
    2. Using Code Coverage 00:04:00
    3. Writing Model Specs 00:09:41
    4. Writing Browser-Based Specs 00:05:52
    5. Testing Flux With Rspec 00:08:05
    6. Completing Ruby Code Coverage 00:07:02
  9. A Look At Another Flux Implementation
    1. Flux Fringes With Redux 00:02:37
    2. Redux Container And Middleware 00:03:46
    3. Reduxs Take On Action Creators 00:04:09
    4. Redux React Components 00:05:52
  10. Conclusion
    1. Wrap Up 00:00:46