The Complete React on Rails Course

Learn how to use React.js with Ruby on Rails apps in this hands-on video course. Start with the fundamentals and build a clone of Eventbrite.

Includes React Hooks

3+ hours of video lessons

220+ page Ebook (Download as PDF, Mobi, EPUB)

Full access to Git repositories of project code

Lifetime access

Join 635 others and level up.
The Complete React on Rails Course

The course is very comprehensive and Hrishi is excellent at explaining everything in great detail. It starts with a simple Rails app which you migrate into React components, which gives you a great understanding of how much better a React approach is. I came into the course feeling overwhelmed by the React ecosystem, but I'm now feeling confident in my ability to move RankTracker's Rails views into React components.

You know Rails well. You've been using it for a while, at your job and for your own projects. You've got comfortable using jQuery on the frontend, and come to know its gotchas. Maybe you've dabbled in Angular or looked at Vue.

Recently, you came across React. Everyone's talking about it. Every other job post on Hacker News mentions it. So you decide to up your frontend game and learn it.

Maybe you've picked up the basics from some docs, blog posts and Youtube videos. It seems cool. But you're not sure if it's worth using it with Rails just yet.

It's all too confusing and intimidating. You thought React is just a frontend library, and you could just drop it in like jQuery. But then what's all this stuff about Babel, Webpack, ES6, Redux and five different gems for integrating with Rails.

You have more questions than answers now.

Which gem should I use for integrating React in a Rails app?Can I still use the asset pipeline?Do I need to use Browserify or Webpack?Do I need to make an API to use React?

It's too confusing, so you give up.

"jQuery works fine anyway", you think to yourself.

But you know you need to keep up with the times.

You might be able to get by without React for a few more months, but you know the next client or the next employer will want you to use it.

You won't be able to get that job or expand your freelance business unless you add React to your toolbelt.

You must get good at using React to make sure you get better work and earn more.

Fortunately, there’s a way to address this: by exploring how to use React with Rails using different methods and in different situations, starting from very simple single-form apps to more complex apps with multiple routes and APIs.

How? With this premium course that teaches you everything you need to know about using React with Rails. It’s called The Complete React on Rails Course.

Introducing The Complete React on Rails Course

This course will teach you how you can incorporate React into your Rails apps, starting from a very simple single page app to gradually more complex examples. You'll learn all about the different ways you can use React with Rails and at the end of the course, be able to choose the best option for your needs.

It’s not enough to simply learn React. You need to be able to make React work well with a backend system - in your case, a Rails app. This course will help you learn all the nitty-gritty details so you can confidently upgrade your Rails frontend with the latest hotness in JavaScript land.

But why is learning React so important for a Rails developer?

  • Web UIs have matured a lot over the last decade. We're doing more complex things to build better user experiences on the web. jQuery has served well but even a medium-sized project can now quickly turn into the Flying Spaghetti Monster. React offers a simple yet powerful alternative to spaghetti code.
  • Even if React itself is replaced by something else, the concept of reactive UI - UI as functional components is here to stay. So it'll help you a great deal to learn to use it.
  • In many ways React is to the modern frontend, what Rails is to the backend - there are many alternatives, but React has the best combination of simplicity, power and popularity to make it a great choice.
  • There's a huge and growing market demand for React developers. Many companies are moving their frontend away from plain Rails templates and jQuery over to React, so learning React would give you a unique advantage over others vying for the same jobs.
  • Once you learn to use React with Rails, you can also use React Native to build mobile apps for the same API. This way, your investment in learning React gives you the chance to easily build cross-platform apps.

What are we going to build?

We'll start with a simple single page app and gradually build up a clone of Eventbrite - an events web app.

The React on Rails course takes a hands-on approach to teach you how to confidently start using React in your Rails projects. It includes video lessons and text explanations of all the important aspects of using React with Rails.

As you follow along the course, you will build real applications as projects to make sure you thoroughly understand everything. You will get full access to the project code. You'll also get direct access to the teacher and the community of students for asking any questions and getting all the help you need.

What You'll Get With This Course

  • Lifetime access to well-structured text and video lessons
  • Full access to well-structured Git repositories of project code
  • Access to discussion forum for getting help from the teacher and other students

The course is wonderful, it's put together very well and helps both with understanding the theoretical concepts as well as their practical implementation. I've learned a lot from it and would recommend it to anyone, both seasoned developers and people who are just starting out.

About The Author

Hi, I'm a senior web developer with over a decade of experience. I've built and shipped software products for many different organisations including small startups, large government departments and enterprise SaaS companies.

I'm the founder of Learnetto (this site!) and the creator of the free Full-Stack Rails Masterclass, the Complete React on Rails Course, Get Your First Developer Job course and the author of the R Graphs Cookbook published by Packt.

I have always wanted to build single page application connecting a frontend React App with a backend Rails API application, even though I have tried to look through tutorials and blogs, it still feels so incomplete leaving me exhausted and unable to build something useful and working. with the course, The Complete React on Rails Course on the Learnetto platform I was able to build and deploy working applications even as someone without lots of experience.

Table of Contents

What's inside the course?

  • 1. Introduction to the course
    • 1.1. Code, resources and downloads
    • 1.2. What you'll learn in this course
    • 1.3. How to get help
  • 2. Introduction to React
    • 2.1. What is React?
    • 2.2. Why do we need React?
    • 2.3. What is a React Component?
    • 2.4. What is JSX?
    • 2.5. What are Props?
    • 2.6. What is State?
  • 3. Your first React Rails app
    • 3.1. How to use React inside Ruby on Rails
    • 3.2. Setting up the Eventlite app with webpacker
    • 3.3. Eventlite app components structure
    • 3.4. Listing Events
    • 3.5. Adding a backend Event data model
    • 3.6. Adding a React form component to create new records
    • 3.7. Handling form submissions in React
    • 3.8. Lifting state up
    • 3.9. Deploying your React Rails app to Heroku
    • 3.10. Server side rendering (SSR) with React and Rails
  • 4. Forms in depth
    • 4.1. Basic React form validation in a Rails app
    • 4.2. Client-side form validation in Rails with React
    • 4.3. Generalised Form Validations - Part 1
    • 4.4. Generalised form validations - Part 2
    • 4.5. Typechecking With PropTypes
    • 4.6. Controlled vs Uncontrolled Components - What are Refs?
  • 5. Using React with a Rails API
    • 5.1. Creating a Rails API
    • 5.2. Using Create React App to build a standalone frontend app
    • 5.3. API User authentication with devise_token_auth
    • 5.4. Adding a Login form
    • 5.5. Linking the User and Event models
    • 5.6. Displaying session data and signing out
    • 5.7.  Adding a Signup form
    • 5.8. Exercises for Rails API Authentication with React
  • 6. React Router
    • 6.1. Introduction to React Router
    • 6.2. Home and authentication routes
    • 6.3. React Router Links for navigating between routes
    • 6.4. Redirection
    • 6.5. Viewing a single record on its own Route
    • 6.6. Editing a record - Part 1
    • 6.7. Editing an event - Part 2
    • 6.8. Deleting a record
    • 6.9. Exercises for React Router
  • 7. React Hooks
    • 7.1. What are React Hooks?
    • 7.2. useState - The State Hook
    • 7.3. useEffect - The Effect Hook
    • 7.4. React Router hooks
    • 7.5. Exercises for React Hooks
  • 8. Styling React apps
    • 8.1. Introduction to Styling React components
    • 8.2. How to use Bootstrap with React (react-bootstrap)
    • 8.3. How to style your React app with Material UI
    • 8.4. Exercises for Styling React apps
  • 9. Testing React Apps
    • 9.1. How to test React apps
    • 9.2. How to test text and image elements in React components
    • 9.3. Snapshot Testing React Components
    • 9.4. Testing React forms
    • 9.5. React tests setup and teardown
    • 9.6. Exercises for Testing React apps
This course is now part of the Full Stack Rails Mastery Career Bundle.