Overview
Syllabus
- Introduction
- Intro to React
- Create React App Files Explained
- Our First Component
- Understand Props in Components
- Intro to useState Hook
- Install Tailwind CSS for React
- Styling React with Tailwind CSS Classes
- Map through State Array Loop
- Create a Popup Modal with React Bootstrap
- Create and Style HTML Form
- Profile Form Data in Modal
- Update Parent Component State in Child Component
- How to Push to State Array
- Pass a Component to Props
- Create a Navbar with Tailwind CSS
- Pages and props.children
- Routing with React Router
- Create an Active Page Link in Navbar
- Finishing up Our Header
- Intro to useEffect Hook
- useEffect Dependency Array Explained
- Fetch an API to Display on Page
- URL Parameters in Router
- Redirect with useNavigate Hook
- Create 404 Not Found Page
- Fetch Response Status Codes and Errors
- Build and Style a Search Component
- Setup a Django Backend Full Stack App
- Create a REST API Backend
- Consume Backend API
- Create a Details by ID API
- Create a Details Page
- Return 404 From Backend API Django
- Code a Full CRUD API Crate, Read, Update, Delete
- DELETE Request with Fetch
- Popup Modal to Add Data POST
- Close modal on POST Success and Add Results to State
- Dynamic Edit Form to Update API Data
- Comparing State Objects
- Display Form Errors on Page
- Tailwind CSS Form and Button Styling
- Intro to JWTs and Authentication JSON Web Tokens
- Create a Login Page
- localStorage and Bearer Auth Tokens
- useLocation and useNavigate State Redirect to Previous Page on Login
- useContexct Hook Introduction
- Create a Logout Button
- Auth Refresh Tokens
- User Register Form and API
- Create a Custom Hook useFetch
- Destructuring Explained Custom Hook Parameters and Return Data
- Default Values and Nested Data with Restructuring
- Custom Hook on Button Click onClick POST with useFetch
- TypeScript and Axios Intro
- TypeScript Components
- Generate Drop Down List from API
- Crypto Price Chart with Chart.js
- Dynamic Chart with Multiple Drop Downs Chart.js
- Calculate Crypto Values
- Aggregate Data with map and reduce
- Pie Chart with Chart.js react-charts-2
- GraphQL API and Apollo Intro
- GraphQL in Django Backend Graphene
Taught by
Caleb Curry