Embark on a comprehensive 11-hour 54-minute video tutorial covering React JS fundamentals and advanced concepts. Learn to create components, understand props, and utilize hooks like useState and useEffect. Master styling with Tailwind CSS, implement routing with React Router, and build interactive features such as modals and forms. Dive into full-stack development by setting up a Django backend, creating REST APIs, and implementing CRUD operations. Explore authentication with JWTs, create custom hooks, and work with TypeScript. Visualize data using Chart.js and delve into GraphQL with Apollo. Perfect for beginners, this course provides hands-on experience in building modern, responsive web applications with React JS.
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
