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>]
