Learnetto
Learn Teach
Log in
Learn Teach
Log in
The Complete React on Rails 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
Code, resources and downloads What you'll learn in this course How to get help What is React? Why do we need React? What is a React Component? What is JSX? What are Props? What is State? How to use React inside Ruby on Rails Setting up the Eventlite app with webpacker Eventlite app components structure Listing Events Adding a backend Event data model Adding a React form component to create new records Handling form submissions in React Lifting state up Deploying your React Rails app to Heroku Server side rendering (SSR) with React and Rails Basic React form validation in a Rails app Client-side form validation in Rails with React Generalised Form Validations - Part 1 Generalised form validations - Part 2 Typechecking With PropTypes Controlled vs Uncontrolled Components - What are Refs? Creating a Rails API Using Create React App to build a standalone frontend app API User authentication with devise_token_auth Adding a Login form Linking the User and Event models Displaying session data and signing out  Adding a Signup form Exercises for Rails API Authentication with React Introduction to React Router Home and authentication routes React Router Links for navigating between routes Redirection Viewing a single record on its own Route Editing a record - Part 1 Editing an event - Part 2 Deleting a record Exercises for React Router What are React Hooks? useState - The State Hook useEffect - The Effect Hook React Router hooks Exercises for React Hooks Introduction to Styling React components How to use Bootstrap with React (react-bootstrap) How to style your React app with Material UI Exercises for Styling React apps How to test React apps How to test text and image elements in React components Snapshot Testing React Components Testing React forms React tests setup and teardown Exercises for Testing React apps Building your first React Rails app - Part 1 [#<Tutorial id: 857, title: "Code, resources and downloads", body: "<div>Welcome and thank you for enrolling in The Co...", video: "", course_id: 28, created_at: "2019-09-24 16:10:33.395368000 +0000", updated_at: "2020-12-01 13:23:49.231006000 +0000", previewable: false, audio: nil, course_module_id: 26, slug: "code-resources-and-downloads", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7280, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 859, title: "What you'll learn in this course", body: "<div>This is a practical course designed around bu...", video: "", course_id: 28, created_at: "2019-11-05 15:41:47.720483000 +0000", updated_at: "2020-05-30 13:06:50.823058000 +0000", previewable: false, audio: nil, course_module_id: 26, slug: "what-you-ll-learn-in-this-course", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7290, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 861, title: "How to get help", body: "<div>If you get stuck, have any questions or need ...", video: "", course_id: 28, created_at: "2019-11-05 15:41:47.787188000 +0000", updated_at: "2020-05-30 13:06:50.834420000 +0000", previewable: false, audio: nil, course_module_id: 26, slug: "how-to-get-help", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7300, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 862, title: "What is React?", body: "<div>React is an open-source JavaScript library fo...", video: "", course_id: 28, created_at: "2019-11-05 15:44:41.950198000 +0000", updated_at: "2020-08-30 15:44:34.524522000 +0000", previewable: false, audio: nil, course_module_id: 27, slug: "what-is-react", description: "In this lesson, we look at what React is, using a ...", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: true, position: 7310, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 863, title: "Why do we need React?", body: "<div>The four main reasons, I think, that React is...", video: "", course_id: 28, created_at: "2019-11-05 15:44:41.973124000 +0000", updated_at: "2020-08-30 15:44:55.876293000 +0000", previewable: false, audio: nil, course_module_id: 27, slug: "why-do-we-need-react", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: true, position: 7320, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 864, title: "What is a React Component?", body: "<div>A React Component is a building block for mak...", video: "", course_id: 28, created_at: "2019-11-05 15:44:41.996221000 +0000", updated_at: "2020-08-30 15:45:08.942701000 +0000", previewable: false, audio: nil, course_module_id: 27, slug: "what-is-a-react-component", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: true, position: 7330, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 865, title: "What is JSX?", body: "<div>JSX is a syntax extension to JavaScript. It’s...", video: "", course_id: 28, created_at: "2019-11-05 15:44:42.017542000 +0000", updated_at: "2020-08-30 15:45:20.568191000 +0000", previewable: false, audio: nil, course_module_id: 27, slug: "what-is-jsx", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: true, position: 7340, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 866, title: "What are Props?", body: "<div>Props are a way to pass data to React compone...", video: "", course_id: 28, created_at: "2019-11-05 15:44:42.040633000 +0000", updated_at: "2020-08-30 15:45:31.284333000 +0000", previewable: false, audio: nil, course_module_id: 27, slug: "what-are-props", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: true, position: 7350, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 867, title: "What is State?", body: "<div>State is a way for React components to mainta...", video: "", course_id: 28, created_at: "2019-11-05 15:44:42.061730000 +0000", updated_at: "2020-08-30 15:45:45.737953000 +0000", previewable: false, audio: nil, course_module_id: 27, slug: "what-is-state", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: true, position: 7360, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 868, title: "How to use React inside Ruby on Rails", body: "<div>There are a few different ways of using React...", video: "hbj3cbghi2", course_id: 28, created_at: "2019-11-05 15:55:19.807104000 +0000", updated_at: "2020-11-02 14:56:26.776754000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "how-to-use-react-inside-ruby-on-rails", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7370, visible_to_anyone_with_link: true, list_on_site: false, featured: true>, #<Tutorial id: 869, title: "Setting up the Eventlite app with webpacker", body: "<div>For our main project in this course, we will ...", video: "rhnzxf6aok", course_id: 28, created_at: "2019-11-05 15:55:19.829743000 +0000", updated_at: "2020-08-30 15:41:44.923874000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "setting-up-the-eventlite-app-with-webpacker", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7380, visible_to_anyone_with_link: true, list_on_site: false, featured: false>, #<Tutorial id: 870, title: "Eventlite app components structure", body: "<div>Before we proceed with building our app furth...", video: "", course_id: 28, created_at: "2019-11-05 15:55:19.853562000 +0000", updated_at: "2020-08-30 15:42:18.718731000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "eventlite-app-components-structure", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7390, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 871, title: "Listing Events", body: "<div>Let’s start building the component hierarchy ...", video: "4mg6lhb1f6", course_id: 28, created_at: "2019-11-05 15:55:19.881153000 +0000", updated_at: "2020-08-30 15:42:36.205654000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "listing-events", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7400, visible_to_anyone_with_link: true, list_on_site: false, featured: false>, #<Tutorial id: 872, title: "Adding a backend Event data model", body: "<div>Now that we have our basic components in plac...", video: "2nucdwm88t", course_id: 28, created_at: "2019-11-05 15:55:19.903915000 +0000", updated_at: "2020-08-30 15:42:53.337862000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "adding-a-backend-event-data-model", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7410, visible_to_anyone_with_link: true, list_on_site: false, featured: false>, #<Tutorial id: 873, title: "Adding a React form component to create new record...", body: "<div>Now that we’ve created all the components for...", video: "qlt1xcx0an", course_id: 28, created_at: "2019-11-05 15:55:19.939119000 +0000", updated_at: "2020-08-30 15:43:17.200417000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "adding-a-react-form-component-to-create-new-record...", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7420, visible_to_anyone_with_link: true, list_on_site: false, featured: false>, #<Tutorial id: 978, title: "Handling form submissions in React", body: "<div>Now that we have the form in place, let’s com...", video: "58cd3qq6ol", course_id: 28, created_at: "2020-08-12 17:03:16.386168000 +0000", updated_at: "2020-08-30 15:43:32.482876000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "handling-form-submissions-in-react", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7425, visible_to_anyone_with_link: true, list_on_site: false, featured: false>, #<Tutorial id: 874, title: "Lifting state up ", body: "<div>We now have our app state stored partly in th...", video: "nj39b96ton", course_id: 28, created_at: "2019-11-05 15:55:19.972278000 +0000", updated_at: "2020-08-30 15:43:46.231119000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "lifting-state-up", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7430, visible_to_anyone_with_link: true, list_on_site: false, featured: false>, #<Tutorial id: 876, title: "Deploying your React Rails app to Heroku", body: "<div>Now that we’ve got our events app running loc...", video: "", course_id: 28, created_at: "2019-11-05 15:55:20.042169000 +0000", updated_at: "2020-07-29 06:10:54.516310000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "deploying-your-react-rails-app-to-heroku", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7440, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 977, title: "Server side rendering (SSR) with React and Rails", body: "<div>In this lesson, we are going to have a quick ...", video: "", course_id: 28, created_at: "2020-07-26 00:32:20.396800000 +0000", updated_at: "2020-07-26 00:34:19.789586000 +0000", previewable: false, audio: nil, course_module_id: 28, slug: "server-side-rendering-ssr-with-react-and-rails", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7445, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 877, title: "Basic React form validation in a Rails app", body: "<div>In this lesson we’re going to look at handlin...", video: "8ef0fe8417", course_id: 28, created_at: "2019-11-05 16:02:49.158527000 +0000", updated_at: "2020-08-12 20:23:10.372157000 +0000", previewable: false, audio: nil, course_module_id: 29, slug: "basic-react-form-validation-in-a-rails-app", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: true, position: 7450, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 878, title: "Client-side form validation in Rails with React", body: "<div>In this lesson, we’ll see how to do form vali...", video: "er4idzlas6", course_id: 28, created_at: "2019-11-05 16:02:49.175212000 +0000", updated_at: "2020-08-12 17:06:48.514002000 +0000", previewable: false, audio: nil, course_module_id: 29, slug: "client-side-form-validation-in-rails-with-react", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: true, position: 7460, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 880, title: "Generalised Form Validations - Part 1", body: "<div>We now have form validations with error messa...", video: "p9m6p49gwd", course_id: 28, created_at: "2019-11-05 16:02:49.210001000 +0000", updated_at: "2020-08-12 23:15:14.397198000 +0000", previewable: false, audio: nil, course_module_id: 29, slug: "generalised-form-validations-part-1", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7470, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 881, title: "Generalised form validations - Part 2", body: "<div>Now, we’ll refactor the code further so that ...", video: "k2stz7ktrq", course_id: 28, created_at: "2019-11-05 16:02:49.226970000 +0000", updated_at: "2020-08-12 23:15:25.911176000 +0000", previewable: false, audio: nil, course_module_id: 29, slug: "generalised-form-validations-part-2", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7480, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 882, title: "Typechecking With PropTypes", body: "<div>In this lesson, we’re going to look at how to...", video: "nzlvgfhmkm", course_id: 28, created_at: "2019-11-05 16:02:49.246399000 +0000", updated_at: "2020-08-13 00:01:00.676232000 +0000", previewable: false, audio: nil, course_module_id: 29, slug: "typechecking-with-proptypes-cb237100-2878-4d39-ba5...", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7490, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 883, title: "Controlled vs Uncontrolled Components - What are R...", body: "<div>As we’ve seen in our app so far, the React co...", video: "", course_id: 28, created_at: "2019-11-05 16:02:49.270178000 +0000", updated_at: "2020-08-05 08:37:59.500171000 +0000", previewable: false, audio: nil, course_module_id: 29, slug: "controlled-vs-uncontrolled-components-what-are-ref...", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7500, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 891, title: "Creating a Rails API", body: "<div>In this module, we will look at how to use Re...", video: "2x5bddslz4", course_id: 28, created_at: "2019-11-05 16:17:35.175556000 +0000", updated_at: "2020-08-29 09:15:38.903124000 +0000", previewable: false, audio: nil, course_module_id: 31, slug: "creating-a-rails-api", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7520, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 949, title: "Using Create React App to build a standalone front...", body: "<div>Now that we have a Rails API, let’s build a n...", video: "i1gp7r7etz", course_id: 28, created_at: "2020-06-23 16:20:32.201767000 +0000", updated_at: "2020-08-13 01:22:33.095785000 +0000", previewable: false, audio: nil, course_module_id: 31, slug: "using-create-react-app-to-build-a-standalone-front...", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7524, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 892, title: "API User authentication with devise_token_auth", body: "<div>In this lesson, we’ll add user accounts to ou...", video: "m6sabojyjt", course_id: 28, created_at: "2019-11-05 16:17:35.198146000 +0000", updated_at: "2020-08-12 17:07:15.525192000 +0000", previewable: false, audio: nil, course_module_id: 31, slug: "api-user-authentication-with-devise_token_auth-92a...", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7530, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 893, title: "Adding a Login form", body: "<div>Now that we have an authentication API endpoi...", video: "sgc6gjr5xn", course_id: 28, created_at: "2019-11-05 16:17:35.224599000 +0000", updated_at: "2020-08-08 07:00:46.956847000 +0000", previewable: false, audio: nil, course_module_id: 31, slug: "adding-a-login-form", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: true, position: 7540, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 950, title: "Linking the User and Event models", body: "<div>In this lesson, we’ll link our app’s users to...", video: "", course_id: 28, created_at: "2020-06-30 19:45:55.351445000 +0000", updated_at: "2020-07-07 06:51:33.699999000 +0000", previewable: false, audio: nil, course_module_id: 31, slug: "linking-the-user-and-event-models", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7542, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 951, title: "Displaying session data and signing out", body: "<div>In this lesson, we’ll add a way to indicate w...", video: "gel9lefmj6", course_id: 28, created_at: "2020-07-01 07:37:41.784363000 +0000", updated_at: "2020-08-12 17:07:34.330057000 +0000", previewable: false, audio: nil, course_module_id: 31, slug: "displaying-session-data-and-signing-out-76ffec22-5...", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7544, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 952, title: " Adding a Signup form", body: "<div>To complete our user authentication setup, no...", video: "0xcwnuci04", course_id: 28, created_at: "2020-07-01 07:43:58.581367000 +0000", updated_at: "2020-08-12 17:07:51.653507000 +0000", previewable: false, audio: nil, course_module_id: 31, slug: "adding-a-signup-form", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7546, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 956, title: "Exercises for Rails API Authentication with React ", body: "<div>There are a number of simple improvements we ...", video: "", course_id: 28, created_at: "2020-07-08 07:43:35.688901000 +0000", updated_at: "2020-08-11 09:48:18.366258000 +0000", previewable: false, audio: nil, course_module_id: 31, slug: "exercises-for-rails-api-authentication-with-react", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7548, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 885, title: "Introduction to React Router", body: "<div>Now that we have our frontend React app and R...", video: "", course_id: 28, created_at: "2019-11-05 16:11:38.769698000 +0000", updated_at: "2020-07-15 06:37:33.470430000 +0000", previewable: false, audio: nil, course_module_id: 30, slug: "introduction-to-react-router-51b05218-d2ed-47fb-92...", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7550, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 886, title: "Home and authentication routes", body: "<div>Let’s start by adding routes for the homepage...", video: "0up76qntvz", course_id: 28, created_at: "2019-11-05 16:11:38.787403000 +0000", updated_at: "2020-08-12 17:08:09.016719000 +0000", previewable: false, audio: nil, course_module_id: 30, slug: "home-and-authentication-routes", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7560, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 887, title: "React Router Links for navigating between routes", body: "<div>Now we have our login and signup forms on sep...", video: "yrfg3e8sym", course_id: 28, created_at: "2019-11-05 16:11:38.802988000 +0000", updated_at: "2020-08-12 17:08:20.129661000 +0000", previewable: false, audio: nil, course_module_id: 30, slug: "react-router-links-for-navigating-between-routes", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7570, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 888, title: "Redirection", body: "<div>Now, even if you’re logged in, if you go to <...", video: "5lmjq1zj8t", course_id: 28, created_at: "2019-11-05 16:11:38.822218000 +0000", updated_at: "2020-08-13 11:08:52.218199000 +0000", previewable: false, audio: nil, course_module_id: 30, slug: "redirection", description: "", published: true, video_thumbnail: nil, teacher_id: 1, youtube_video: nil, tier_id: nil, paid: false, text_public_for_seo: false, position: 7580, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 959, title: "Viewing a single record on its own Route", body: "<div>One common feature in most CRUD apps is to vi...", video: "kv3qiayj7o", course_id: 28, created_at: "2020-07-17 07:51:13.238427000 +0000", updated_at: "2020-08-13 07:33:46.717259000 +0000", previewable: false, audio: nil, course_module_id: 30, slug: "viewing-a-single-record-on-its-own-route", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7582, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 889, title: "Editing a record - Part 1", body: "<div>In this lesson, we’ll look at adding the abil...", video: "b1ju69w7n5", course_id: 28, created_at: "2019-11-05 16:11:38.841156000 +0000", updated_at: "2020-08-13 16:36:51.193507000 +0000", previewable: false, audio: nil, course_module_id: 30, slug: "editing-a-record-part-1-ac29629f-cfa5-49f1-830a-1e...", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7584, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 965, title: "Editing an event - Part 2", body: "<div>Now, while editing an event, we want to load ...", video: "iub6s97mo3", course_id: 28, created_at: "2020-07-20 12:43:42.981231000 +0000", updated_at: "2020-08-13 16:52:05.023707000 +0000", previewable: false, audio: nil, course_module_id: 30, slug: "editing-an-event-part-2", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7585, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 890, title: "Deleting a record", body: "<div>The last CRUD feature left to implement in ou...", video: "2o4krl6672", course_id: 28, created_at: "2019-11-05 16:11:38.857785000 +0000", updated_at: "2020-08-13 11:18:03.380095000 +0000", previewable: false, audio: nil, course_module_id: 30, slug: "deleting-a-record-5ac41fbb-3103-4c1a-99f9-a618d5db...", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7587, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 963, title: "Exercises for React Router", body: "<div>1. Add more fields to the Event and User mode...", video: "", course_id: 28, created_at: "2020-07-18 11:07:47.494488000 +0000", updated_at: "2020-08-05 17:31:52.503257000 +0000", previewable: false, audio: nil, course_module_id: 30, slug: "exercises-for-react-router", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7588, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 960, title: "What are React Hooks?", body: "<div><a href=\"https://reactjs.org/docs/hooks-intro...", video: "", course_id: 28, created_at: "2020-07-17 13:49:39.290935000 +0000", updated_at: "2020-08-14 13:41:46.331961000 +0000", previewable: false, audio: nil, course_module_id: 35, slug: "what-are-react-hooks", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7590, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 961, title: "useState - The State Hook", body: "<div>As the name suggests, the useState hook allow...", video: "mj1q9ngbhm", course_id: 28, created_at: "2020-07-17 14:09:38.008931000 +0000", updated_at: "2020-08-13 12:15:58.303418000 +0000", previewable: false, audio: nil, course_module_id: 35, slug: "usestate-the-state-hook", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7600, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 962, title: "useEffect - The Effect Hook", body: "<div>Now that we’ve set up our Event component as ...", video: "uzepjwva96", course_id: 28, created_at: "2020-07-17 16:05:54.616493000 +0000", updated_at: "2020-08-13 13:58:36.981365000 +0000", previewable: false, audio: nil, course_module_id: 35, slug: "useeffect-the-effect-hook", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7605, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 964, title: "React Router hooks", body: "<div>As I mentioned in my introduction to React Ro...", video: "evyyqwg8ho", course_id: 28, created_at: "2020-07-18 21:05:52.430959000 +0000", updated_at: "2020-08-13 14:12:09.519209000 +0000", previewable: false, audio: nil, course_module_id: 35, slug: "react-router-hooks", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7610, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 966, title: "Exercises for React Hooks", body: "<div>1. Convert Eventlite, Login and Signup from c...", video: "", course_id: 28, created_at: "2020-07-20 17:15:58.815478000 +0000", updated_at: "2020-07-20 17:17:04.795156000 +0000", previewable: false, audio: nil, course_module_id: 35, slug: "exercises-for-react-hooks", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7620, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 967, title: "Introduction to Styling React components", body: "<div>So far, we have used very little styling in o...", video: "", course_id: 28, created_at: "2020-07-20 22:29:27.497210000 +0000", updated_at: "2020-07-20 22:32:58.930695000 +0000", previewable: false, audio: nil, course_module_id: 33, slug: "introduction-to-styling-react-components", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7710, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 968, title: "How to use Bootstrap with React (react-bootstrap)", body: "<div>While you may want to style your app complete...", video: "a2fv382zl5", course_id: 28, created_at: "2020-07-21 09:35:08.506772000 +0000", updated_at: "2020-08-13 19:04:43.280458000 +0000", previewable: false, audio: nil, course_module_id: 33, slug: "how-to-use-bootstrap-with-react-react-bootstrap", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7720, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 969, title: "How to style your React app with Material UI", body: "<div>Another popular design framework for apps is ...", video: "q0kqe64ssc", course_id: 28, created_at: "2020-07-23 11:28:45.276674000 +0000", updated_at: "2020-08-13 19:04:55.850352000 +0000", previewable: false, audio: nil, course_module_id: 33, slug: "how-to-style-your-react-app-with-material-ui", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7730, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 970, title: "Exercises for Styling React apps", body: "<div>1. Refactor the form input field components i...", video: "", course_id: 28, created_at: "2020-07-23 11:34:28.175109000 +0000", updated_at: "2020-08-14 13:45:11.333573000 +0000", previewable: false, audio: nil, course_module_id: 33, slug: "exercises-for-styling-react-apps", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7740, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 971, title: "How to test React apps", body: "<div>Testing UIs is important for building reliabl...", video: "vnl33nj3yv", course_id: 28, created_at: "2020-07-24 21:39:22.670633000 +0000", updated_at: "2020-08-13 20:48:46.108763000 +0000", previewable: false, audio: nil, course_module_id: 32, slug: "how-to-test-react-apps", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7810, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 972, title: "How to test text and image elements in React compo...", body: "<div>Now, let’s test that our key components are r...", video: "n0xvvg0ohy", course_id: 28, created_at: "2020-07-25 10:04:55.774341000 +0000", updated_at: "2020-08-13 20:48:57.630114000 +0000", previewable: false, audio: nil, course_module_id: 32, slug: "how-to-test-text-and-image-elements-in-react-compo...", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7820, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 973, title: "Snapshot Testing React Components", body: "<div>In this lesson, we’ll look at snapshot testin...", video: "e0ycax6q8w", course_id: 28, created_at: "2020-07-25 16:59:46.954489000 +0000", updated_at: "2020-08-13 21:56:07.506666000 +0000", previewable: false, audio: nil, course_module_id: 32, slug: "snapshot-testing-react-components", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7830, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 974, title: "Testing React forms", body: "<div>We’ve seen how to test simple functional comp...", video: "kirldlh6gn", course_id: 28, created_at: "2020-07-25 22:21:26.188772000 +0000", updated_at: "2020-08-13 22:18:04.287146000 +0000", previewable: false, audio: nil, course_module_id: 32, slug: "testing-react-forms", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7840, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 975, title: "React tests setup and teardown", body: "<div>You might have noticed that we have a lot of ...", video: "", course_id: 28, created_at: "2020-07-25 23:33:32.485688000 +0000", updated_at: "2020-07-25 23:35:04.678787000 +0000", previewable: false, audio: nil, course_module_id: 32, slug: "react-tests-setup-and-teardown", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7850, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 976, title: "Exercises for Testing React apps", body: "<div>1. Test that the event image has the correct ...", video: "", course_id: 28, created_at: "2020-07-25 23:38:46.279331000 +0000", updated_at: "2020-07-25 23:39:32.458633000 +0000", previewable: false, audio: nil, course_module_id: 32, slug: "exercises-for-testing-react-apps", description: "", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: 7860, visible_to_anyone_with_link: false, list_on_site: false, featured: false>, #<Tutorial id: 858, title: "Building your first React Rails app - Part 1", body: "<div>There are a few different ways of using React...", video: "", course_id: 28, created_at: "2019-10-16 17:30:21.206448000 +0000", updated_at: "2019-10-17 09:48:32.814390000 +0000", previewable: false, audio: nil, course_module_id: nil, slug: "building-your-first-react-rails-app-part-1", description: "We are going to build a web app for creating, list...", published: true, video_thumbnail: "", teacher_id: 1, youtube_video: "", tier_id: nil, paid: false, text_public_for_seo: false, position: nil, visible_to_anyone_with_link: false, list_on_site: false, featured: false>]
The Complete React on Rails 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

useEffect - The Effect Hook

This video is part of the The Complete React on Rails Course

Enroll now to view this video

This lesson is from the The Complete React on Rails Course

Get the full course

<- Previous
Next ->