YoVDO

React JS Course for Beginners - 2021 Tutorial

Offered By: freeCodeCamp

Tags

React Courses Computer Science Courses Web Development Courses React Router Courses JSX Courses Styled-components Courses

Course Description

Overview

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.

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

30 Days to Learn Laravel
Laracasts
3D Graphics for Web Developers
Pompeu Fabra University via FutureLearn
A Beginner’s Guide to Web Development with HTML5
Packt via FutureLearn
Accessibility Audit
Amazon Web Services via AWS Skill Builder
Expanding Your JS Skills with Angular
A Cloud Guru