-
1. Introduction to the course
-
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
