Embark on a comprehensive 7-hour React.js tutorial designed for beginners, covering fundamental to advanced concepts through the development of a real-world application. Master React essentials including JSX, Styled Components, React Router, state management, props, context, and hooks. Dive into API handling, TypeScript integration, and state persistence using SessionStorage. Learn to deploy your application to Netlify and explore bonus topics such as class components, TypeScript refactoring, and implementing a login system with TMDB API integration. Build a feature-rich movie database application while gaining hands-on experience with modern web development practices and tools.
Overview
Syllabus
) Introduction.
) The App.
) The Movie DB - API Key.
) What is React? .
) Starter Files.
) Quick about tooling.
) Bootstrap with CRA.
) Install dependencies.
) Copy fils from starter files.
) Setup API Key and walkthrough of API files.
) React without JSX.
) Short about JSX .
) Crash course in Props and State.
) Short about Styled Components.
) Global Styles.
) Header Component.
) Header Component - Styles.
) Home Component - Scaffold.
) Short about built-in hooks in React.
) Fetch data from the API for Home Page.
) Custom hook for Home Page.
) HeroImage Component.
) HeroImage Component - Styles.
) Grid Component.
) Grid Component - Styles.
) Thumb Component.
) Thumb Component - Styles.
) Spinner Component.
) SearchBar Component.
) SearchBar Component - Styles.
) SearchBar Component - Logic.
) Button Component.
) Button Component - Styles.
) Button Component - Logic.
) Short about React Router.
) Routing with React Router.
) Movie Component - Scaffold.
) Fetch movie data from the API.
) BreadCrumb Component.
) BreadCrumb Component - Styles.
) MovieInfo Component.
) MovieInfo Component - Styles.
) MovieInfoBar Component.
) MovieInfoBar Component - Styles.
) Actor Component.
) Actor Component - Styles.
) Short about PropTypes.
) Validate Props with PropTypes.
) Short about SessionStorage.
) SessionStorage - Home.
) SessionStorage - Movie.
) Build and prepare for Netlify.
) Netlify drag and drop and Netlify CLI.
) Netlify Continous Deployment.
) Bonus - Classes - SearchBar Component.
) Bonus - Classes - Home Component.
) Bonus - Classes - Movie Component.
) Bonus - Typescript - Introduction.
) Bonus - Typescript - Bootstrap project and copy files.
) Bonus - Typescript - Refactor base files.
) Bonus - Typescript - Refactor Home and Components.
) Bonus - Typescript - Refactor Movie and Components.
) Bonus - Login - Short about TMDB login and rating system.
) Bonus - Login - Global Context.
) Bonus - Login - Login Component.
) Bonus - Login - Login Component - Styles.
) Bonus - Login - Login from Header.
) Bonus - Login - Rate Component.
) Bonus - Login - Rating from MovieInfo.
Taught by
freeCodeCamp.org
Related Courses
-
Advanced React Projects and Ecommerce Development
-
React JavaScript Framework for Beginners – Project-Based Course
-
Learn React JS - Full Course for Beginners - Tutorial 2019
4.7 -
Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks
-
Learn React
5.0 -
React Fundamentals - Full Course for Beginners
Related articles
-
100+ Free Courses to Learn JavaScript, React, Node
-
15 Best React Courses for 2024: Hooks and Components
-
900 Free Computer Science Courses from World’s Top 50 Universities
-
150+ Stanford On-Campus Computer Science Courses Available Online
-
5 Best Free Web Development Courses for 2024: Over 900 Hours of Learning
Reviews
5.0 rating, based on 1 Class Central review
-
Manoj KumarThe react js course is very good I liked this course and I gained knowledge and enjoy a lot and last this is demanding skills and helpful for me in upcoming carrier
