-
Introduction to the course
-
Introduction to React
- What is React?
- Why do we need React?
- What is a React Component?
- What is JSX?
- What are Props?
- What is State?
-
Your first React Rails app
- 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
-
Forms in depth
- 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?
-
Using React with a Rails API
- 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
-
React Router
- 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
-
React Hooks
- What are React Hooks?
- useState - The State Hook
- useEffect - The Effect Hook
- React Router hooks
- Exercises for React Hooks
-
Styling React apps
- 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
-
Testing React Apps
useEffect - The Effect Hook
Updated:
Learn how to use the useEffect Hook in React to manage side effects and lifecycle events in functional components. Master React on Rails development.
This lesson is from The Complete React on Rails Course.
