-
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
Generalised form validations - Part 2
Updated:
Learn advanced form validation techniques in React on Rails. Explore generalised validation methods to streamline your development process and enhance user experience.