Slide 3

Latest Updates

In a world of infinite possibilities, Ability is everything. We develop Website & Mobile app for Business.

React JS Course for Beginners - 2021 Tutorial

This is a full premium course. Learn React.js from the ground up with fundamentals to more intermediate and advanced topics. You will learn by building a real app! ???? Starter files: https://github.com/weibenfalk/react-rmdb-v3-starter-files Course

This is a full premium course. Learn React.js from the ground up with fundamentals to more intermediate and advanced topics. You will learn by building a real app!

???? Starter files: https://github.com/weibenfalk/react-rmdb-v3-starter-files

Course from Thomas Weibenfalk. Check out his channel: https://www.youtube.com/channel/UCnnnWy4UTYN258FfVGeXBbg

Learn:

- React

- JSX

- Styled Components

- React Router

- State and Props

- Context

- CSS

- API handling

- Hooks

- Typescript

- Persist state in SessionStorage

- Deploy to Netlify

- And MUCH more ...

⭐️ Course Contents ⭐️

⌨️ (0:00:10) Introduction

⌨️ (0:00:57) The App

⌨️ (0:03:27) The Movie DB - API Key

⌨️ (0:05:09) What is React?

⌨️ (0:10:49) Starter Files

⌨️ (0:14:16) Quick about tooling

⌨️ (0:15:50) Bootstrap with CRA

⌨️ (0:19:11) Install dependencies

⌨️ (0:24:17) Copy fils from starter files

⌨️ (0:28:34) Setup API Key and walkthrough of API files

⌨️ (0:33:24) React without JSX

⌨️ (0:40:10) Short about JSX

⌨️ (0:42:52) Crash course in Props and State

⌨️ (0:55:12) Short about Styled Components

⌨️ (0:58:23) Global Styles

⌨️ (1:08:01) Header Component

⌨️ (1:21:09) Header Component - Styles

⌨️ (1:25:40) Home Component - Scaffold

⌨️ (1:33:45) Short about built-in hooks in React

⌨️ (1:38:55) Fetch data from the API for Home Page

⌨️ (1:52:44) Custom hook for Home Page

⌨️ (1:59:49) HeroImage Component

⌨️ (2:11:22) HeroImage Component - Styles

⌨️ (2:20:23) Grid Component

⌨️ (2:26:06) Grid Component - Styles

⌨️ (2:29:44) Thumb Component

⌨️ (2:34:59) Thumb Component - Styles

⌨️ (2:37:28) Spinner Component

⌨️ (2:42:03) SearchBar Component

⌨️ (2:57:54) SearchBar Component - Styles

⌨️ (3:02:16) SearchBar Component - Logic

⌨️ (3:06:51) Button Component

⌨️ (3:10:42) Button Component - Styles

⌨️ (3:13:06) Button Component - Logic

⌨️ (3:19:50) Short about React Router

⌨️ (3:21:59) Routing with React Router

⌨️ (3:34:15) Movie Component - Scaffold

⌨️ (3:36:26) Fetch movie data from the API

⌨️ (3:49:38) BreadCrumb Component

⌨️ (3:54:49) BreadCrumb Component - Styles

⌨️ (3:57:46) MovieInfo Component

⌨️ (4:08:41) MovieInfo Component - Styles

⌨️ (4:17:35) MovieInfoBar Component

⌨️ (4:23:26) MovieInfoBar Component - Styles

⌨️ (4:26:38) Actor Component

⌨️ (4:32:09) Actor Component - Styles

⌨️ (4:34:16) Short about PropTypes

⌨️ (4:37:38) Validate Props with PropTypes

⌨️ (4:48:17) Short about SessionStorage

⌨️ (4:50:32) SessionStorage - Home

⌨️ (4:59:34) SessionStorage - Movie

⌨️ (5:03:17) Build and prepare for Netlify

⌨️ (5:05:58) Netlify drag and drop and Netlify CLI

⌨️ (5:10:29) Netlify Continous Deployment

⌨️ (5:13:48) Bonus - Classes - SearchBar Component

⌨️ (5:22:04) Bonus - Classes - Home Component

⌨️ (5:33:14) Bonus - Classes - Movie Component

⌨️ (5:40:39) Bonus - Typescript - Introduction

⌨️ (5:42:20) Bonus - Typescript - Bootstrap project and copy files

⌨️ (5:47:19) Bonus - Typescript - Refactor base files

⌨️ (6:04:16) Bonus - Typescript - Refactor Home and Components

⌨️ (6:14:55) Bonus - Typescript - Refactor Movie and Components

⌨️ (6:25:52) Bonus - Login - Short about TMDB login and rating system

⌨️ (6:29:25) Bonus - Login - Global Context

⌨️ (6:34:34) Bonus - Login - Login Component

⌨️ (6:50:49) Bonus - Login - Login Component - Styles

⌨️ (6:53:47) Bonus - Login - Login from Header

⌨️ (7:00:27) Bonus - Login - Rate Component

⌨️ (7:04:35) Bonus - Login - Rating from MovieInfo

???? Thanks to our Champion and Sponsor supporters:

???? Wong Voon jinq

???? hexploitation

???? Katia Moran

???? BlckPhantom

???? Nick Raker

???? Otis Morgan

???? DeezMaster

???? Treehouse

Slide
From a small room table to large meeting rooms

We’re working with companies of all sizes ranging from startups to large scale business industries! We have extensive experience working with companies in Canada, USA and global to help them build a great website and effectively improve their ROI.

Slide
wordpress-development-toronto
Joomla-web-development-toronto
magento-web-development-toronto
shopify-web-development-toronto
html-web-development-toronto
Drupal-Web-Development-toronto
square space web development toronto
Contact
Image is not available
We'd love to hear from you.

We’re accepting new projects and would love to hear about yours. Got a question? Let's chat!

Glass Button
Request a Call
Glass Button
Chat Now
Copyright © 2007 – 2025 All rights reserved. Website Design & Web Development Company Located in Toronto, Ontario, Canada.

Yes for your convenience we have premade different packages which includes Logo design, Branding, Hosting, And different types of website.

Request a Call