1. Introduction to React
1.1. Quick Introduction to key React concepts
2. Getting started with React in Rails
2.1. Installation and setup of Rails 5 app with react-rails gem
3. Your first Rails app with React
3.1. Calendar appointments app with jQuery and Haml
3.2. React props and nested components
3.3. React State - Handling user form input
3.4. React State - Handling form submission
3.5. Using a third-party JavaScript library - Moment.js
3.6. Using a third-party React component - react-datetime
3.7. Styling with CSS in React
3.8. Deploying a react-rails app to Heroku
4. ECMAScript 6 (ES6)
4.1. Introduction to ES6 using the react-rails component generator
4.2. ES6 classes in React
4.3. ES6 Arrow functions in React
4.4. Stateless Functional Components in React
4.5. How to use React with the webpacker gem and Rails 5.1
5. Using React with Webpack in Rails
5.1. Introduction and setup of Webpack with react_on_rails gem
5.2. Migrating the Calendar appointments app to react_on_rails
5.3. Server-side rendering
5.4. Deploying to Heroku
5.5. Hot Module Replacement
6. Forms in depth
6.1. Basic form validation
6.2. Client-side form validation in React
6.3. Code refactor and corrections
6.4. Multiple field validations on client side
6.5. Refactor client side validations
6.6. Client side validation errors
6.7. Generalised form validations
6.8. Typechecking With PropTypes
6.9. Refs
7. React Router v4
7.1. Introduction to React Router v4
7.2. Viewing a record on its own route
7.3. Navigating between routes
7.4. Keeping data fresh with componentDidMount
7.5. Editing a record - Part 1
7.6. Editing a record - Part 2
7.7. Deleting a record
7.8. Recap
8. User authentication with Devise
8.1. Using Devise with React
9. Using React with a Rails API
9.1. Setting up a Rails API app and Create React App
9.2. Porting React components from react_on_rails to React
9.3. API User authentication with devise_token_auth
9.4. Displaying session data and signing out
10. Testing React
10.1. Testing with Jest
10.2. Testing with Enzyme
10.3. Snapshot testing
10.4. Testing forms
11. Styling and animations
11.1. Using Bootstrap with React
11.2. CSS Animations and Transitions
12. Flux and Redux
12.1. Introduction to Flux
12.2. Introduction to Redux
12.3. Using Redux with react_on_rails
13. BONUS Example Apps
13.1. Fitness dashboard Part 1
13.2. Fitness dashboard part 2
13.3. Fitness dashboard part 3
13.4. How to build a chat app with Rails 5.1 ActionCable and React.js Part 1
13.5. How to build a chat app with Rails 5.1 ActionCable and React.js Part 2
13.6. How to build an online store using React and Rails - Part 1
13.7. How to build an online store using React and Rails - Part 2

Fitness dashboard Part 1

Linked Projects:

React Fit

Hrishi Mittal
Last Update: 01 Sep 2017

✨ 4 people thanked Hrishi Mittal for this tutorial.

👍 Send Thanks

Code - https://github.com/learnetto/reactfit

The Complete React on Rails 5 Course

Fitness dashboard Part 1

Fitness dashboard Part 1

Linked Projects:

✨ 4 people thanked Hrishi Mittal for this tutorial.

Liked this tutorial? Get more like this in your inbox