Why do we need React | Cozy Code Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

React Application Development

Preparation

Course introduction (1:04)
Installation - chrome (1:22)
Installation - visual code (0:50)

Overview of web

How the web works - internet (2:50)
How the web works - HTTP (3:59)
URL (2:38)
How the website works (2:25)

HTML

CSS

What is css (1:37)
CSS syntax (1:06)
Overview of CSS selector (1:40)
CSS selector - simple selector (3:02)
CSS selector - combinator selector (2:58)
CSS selector - pseudo-class selector (1:04)
CSS selector - exercise (2:44)
Internal, external, inline CSS (1:33)
Specificity hierarchy (4:29)
Useful properties - text (5:03)
Useful properties - background (6:26)
Useful properties - size (1:14)
Useful properties - font (1:29)
Useful properties - position (5:54)
Useful properties - display (3:04)
Useful properties - flexbox (10:35)
Useful properties - overflow (1:32)
CSS inheritance (2:24)
Useful properties - exercise (10:02)
Units (6:14)
Units - exercise (0:51)
Box model (5:43)
Box model - exercise (2:44)
CSS tips & tricks (2:20)
Responsive web design (8:34)
Responsive web design - exercise (6:38)
Practice - flexbox trial (11:04)
Practice - avatar (6:52)
Practice - website layout (16:34)
Practice - responsive website layout (11:21)
Practice - Login page (14:08)
Practice - web app layout (8:57)
Practice - responsive web app layout (2:41)
Practice - responsive menu (15:38)

Assessment - HTML & CSS

Copy ninja (1:15)

JavaScript basics

Prepare your coding environment (1:54)
What is programming (3:09)
Declaring variables (6:04)
Difference between var, let & const (4:25)
Variable naming convention (5:06)
Variable - exercise (1:40)
Data type - string (4:38)
Data type - number (2:22)
Data type - boolean, undefined, null (2:44)
Data type - exercise (2:47)
Comment on your code (2:35)
Practice - swapping variables (2:14)
What is operator (0:56)
Arithmetic operators (9:58)
Arithmetic operators - exercise (5:15)
Assignment operators (3:41)
Assignment operators - exercise (1:58)
String operators (4:17)
Comparison operators (6:49)
Comparison operators - exercise (1:21)
Logical operators (3:19)
Logical operators - exercise (4:57)
Logical operators with comparison (1:25)
Practice - seconds to time (8:12)

JavaScript conditional handling

if statement (3:38)
Indentation of JavaScript (4:04)
if-else statement (2:49)
else-if statement (4:18)
Multiple conditions handling (1:34)
if-else - exercise (4:44)
switch statement (4:52)
switch & break statement (5:10)
switch - exercise (2:21)
Practice - determine a pikachu (3:21)
Practice - vowel (1:47)
Practice - grading (3:03)
Practice - finding largest number (2:26)
Practice - simple calculator (3:00)

JavaScript looping

What is looping (2:57)
while loop (6:36)
do-while loop (4:04)
while loop - exercise & debugger (12:37)
for loop (10:12)
Infinite loop (2:11)
for loop - exercise (7:33)
Nested loop (9:20)
Nested loop - exercise (5:07)
Can I break or skip the loop? (1:52)
Practice - code reading (0:24)
Practice - prime number (7:08)
Practice - factorial (3:28)
Practice - sum of multiples (3:38)

JavaScript function

What is function (4:20)
Function with parmeter (5:49)
Function can be stored (1:27)
Function override (1:01)
Function inside a function (0:21)
Reminder for using parameter (0:44)
Function - exercise (3:55)
Function with return - part 1 (5:45)
Function with return - part 2 (3:31)
Reminder for using return (1:13)
Function with return - exercise (3:33)
Function expression (5:11)
Self invoking function (1:47)
Function declaration vs function expression (2:48)
Function expression - exercise (1:57)
Practice - factorial (2:47)
Practice - factorial v2 (2:43)
Practice - finding largest (1:54)
Practice - finding largest v2 (2:13)
Practice - function expression (1:11)
Practice - return (1:55)
Practice - returning a function (2:38)

JavaScript scope

What is scope (2:23)
Global scope (2:18)
Global scope - exercise (1:15)
Function scope (4:33)
Function scope - exercise (2:52)
Block scope (5:06)
Block scope - exercise (0:41)

JavaScript basic object oriented programming

What is object (4:05)
Accessing object properties (5:20)
Modifying object properties (2:17)
Deleting object properties (0:45)
Calling method (1:08)
Nested object structure (2:38)
Using object as a dictionary (0:41)
Absence of any object value (0:23)
Object - exercise (4:31)
Object reference (4:34)
Passing an object into the function - part 1 (4:43)
Passing an object into the function - part 2 (3:26)
Object reference - exercise (9:27)
Object with this (5:44)
Value of this depends on context (3:01)
Object with this - exercise (3:17)
Practice - calculator (1:59)
Practice - properties access (2:00)
Practice - properties access 2 (1:35)
Practice - repeated word (3:51)
Practice - nested object (2:19)
Practice - translator (3:25)

JavaScript Classes

How to create object effectively (1:21)
Using function to create object (3:35)
Overview of class (2:20)
Constructor & instantiation (4:14)
Method in class (3:04)
How to check the class of an object belonging to (1:23)
class - exercise (3:47)
Encapsulation (6:18)
Getter & setter (6:17)
Encapsulation - exercise (4:07)
Static properties (4:30)
Static properties - exercise (3:36)
Practice - calculator (2:17)
Practice - weapon (5:16)
Practice - soldier (9:42)

JavaScript number & string

Numeric data type conversion (4:47)
Overview of string methods (1:12)
Methods for searching string (2:57)
Methods for extracting string (2:43)
Methods for modifying string (5:08)
Number & string - exercise (7:20)
String comparison (3:56)
String comparison - exercise (0:20)
Practice - palindrome (5:23)
Practice - counting space (1:41)
Practice - finding domain (1:35)

Assessment - JavaScript programming

Binary string to decimal number (5:59)

JavaScript array

What is array (2:41)
Array is also an object (1:37)
Initializing an array (1:16)
Accessing / modifying the array items (1:32)
Adding items to an array (0:38)
Inserting / removing items of an array (1:29)
Looping an array (1:12)
2D array (3:47)
Array - exercise (3:08)
Methods for searching item in array (1:18)
Methods for modifying array (2:56)
Methods for array iteration (2:29)
Mapping a new array (4:00)
Filtering an array (3:54)
Array - exercise (5:11)
Converting string to array (2:17)
Converting string to array - exercise (1:29)
Practice - sum of odd numbers (2:25)
Practice - code reading (1:49)
Practice - finding max & min (3:17)
Practice - array of arrays (2:34)
Practice - joining an array (3:10)
Practice - array and object (1:49)

More about JavaScript function

What is recursion (6:35)
Recursion - exercise (4:55)
What is callback (5:46)
Using setTimeout() to delay function call (6:31)
Callback - exercise (3:22)
What is closure (5:34)
Closure - exercise (3:47)
Practice - palindrome (3:50)
Practice - callback delay (2:14)
Practice - foreach & map (2:37)
Practice - bank (2:24)

JavaScript error handling

How to handle errors (1:52)
Using try, catch, throw & finally (6:46)
Error handling - exercise (2:53)

Web application

Website vs web app (1:33)
Architecture of web app (4:58)
Flow of web app (1:36)

DOM manipulation

Concept of document object model (2:00)
JavaScript in the HTML (2:38)
Getting DOM element (4:34)
Getting DOM element - exercise (1:43)
Overview of updating DOM element (0:53)
Updating DOM element text (1:32)
Updating DOM element style (1:31)
Updating HTML inside DOM element (2:18)
Updating DOM element classes (2:07)
Accessing DOM element attribute (2:43)
Accessing input box value (2:30)
Updating DOM element - exercise (5:07)
Creating DOM element by method (4:11)
Creating DOM element by HTML (2:12)
Creating DOM element - exercise (2:49)
Deleting DOM element (1:13)
Deleting DOM element - exercise (1:37)
Practice - Facebook post (10:44)

DOM event

What is event (2:29)
What is event listener (2:04)
Using HTML attribute to add event listeners (5:15)
Using JavaScript to add event listeners (3:35)
Information in event object (6:25)
Event - exercise (5:41)
Event bubbling (2:18)
Practice - calculator (4:28)
Practice - input validator (3:48)
Practice - side navigation bar (9:59)
Practice - todo list (7:29)
Practice - photo gallery (16:06)

Data storage for web app

What is web storage (2:52)
Local storage (2:05)
Session storage (1:23)
Saving objects to web storage (3:48)
Web storage - exercise (2:46)
What is cookie (4:06)
Using cookie (2:14)
Cookie - exercise (0:59)

The connection between web app and server

How to communicate with the server (5:33)
Preparing a HTTP request (3:19)
HTTP methods (0:58)
API endpoint (1:18)
Data types that the server accepts (2:13)
Examples of HTTP request (3:50)
Receiving a HTTP response (3:27)
Request & response - exercise (3:09)
Fetching data from server (5:44)
Installation of Nodejs - Windows (1:00)
Installation of Nodejs - Mac (0:52)
Installation of API server (2:04)
Explanation of using the API server (5:18)
Fetching data from server - exercise (13:33)
Practice - todo list (16:36)
Practice - stock price - part 1 (10:41)
Practice - stock price - part 2 (12:08)
The problem of using fetch() (3:07)
Fetching with async/await (7:56)
Returning data from async function (4:23)
Error handling with async/await (2:33)
Practice - todo list with async/await (6:33)
Practice - login/register - part 1 (7:13)
Practice - login/register - part2 (5:58)
Practice - login/register - part 3 (2:30)
Practice - login/register - part 4 (5:25)
Practice - fetching private data (6:20)

Assessment - web application

Trend prediction game (6:21)

Version control - Git

Why do we need version control (1:48)
Installation of git - Windows (1:27)
Installation of git - Mac (0:46)
Command-line interface (7:14)
Preparation before using git (3:29)
Commit & log (10:23)
Branching (8:24)
Uploading git repo to github (4:58)
Cloning git repo from github to your computer (1:48)
Updating local git repo from github (1:03)
Ignoring the unwanted files (3:06)

Overview of React

Why do we need React (2:40)
State in React (4:35)
Component in React (5:09)
Creating React project (4:01)
Installation of browser dev tool (0:36)

React JSX

What is JSX (2:30)
JSX basic (5:39)
JSX basic - exercise (1:41)
JSX expression (11:22)
JSX expression - exercise (1:49)

React component

Overview of component & properties (6:31)
Defining & using component (6:21)
Using properties with component (6:56)
Handling component logic (1:36)
Component - exercise (3:37)
Exporting & importing component - part 1 (5:46)
Exporting & importing component - part 2 (4:05)
Exporting & importing component - exercise (2:11)
Inline css (3:04)
CSS module (7:24)
Using CSS - exercise (2:15)
Adding image (3:06)
Practice - face (4:22)
Practice - watch (4:39)
Practice - CSS class name (1:55)
Practice - component design (4:39)

React list rendering

Using map() & filtering to render list (6:09)
Key (4:02)
List rendering - exercise (2:03)

React event

HTML event vs react event (3:59)
Inline event handler (2:27)
Named function event handler (3:13)
Event - exercise (2:05)

React state

State in component (5:04)
Adding view logic based on state (3:56)
State - exercise (2:24)
Updating state (4:27)
Mutable & immutable (3:33)
More on immutable (7:04)
Mutable & immutable - exercise (3:17)
Immutable state (1:40)
How does react render (5:43)
Parent and child re-rendering (4:47)
How does react render - exercise (1:22)
More about useState() (7:52)
More about useState() - exercise (2:13)
State sharing (3:26)
State sharing - exercise (4:38)
Changing state of ancestor (5:10)
Changing state of ancestor - exercise (8:55)
Practice - click counter (3:13)
Practice - mouse coordinate (4:15)
Practice - immutable (2:58)
Practice - ATM - part 1 (2:51)
Practice - ATM - part 2 (6:56)

React form & DOM handling

Form handling (6:56)
Forma handling - exercise (3:38)
DOM element handling (6:11)
DOM element handling - file (1:53)
DOM element handling - exercise (3:01)
Practice - image reader (7:36)
Practice - input validator (5:38)
Practice - search list (5:36)
Practice - todo list (12:22)

React side effect

What is side effect (2:33)
Adding side effect (2:43)
Adding dependencies of side effect (6:44)
Running side effect on mount (3:20)
Clean up function for side effect (5:07)
Clean up function for side effect with dependencies (8:15)
Side effect - exercise (10:23)
Custom hook (5:27)
Custom hook - exercise (5:21)
Practice - clock (4:00)
Practice - countdown (5:07)
Practice - deferred value (5:25)
Please start the API server (0:28)
Installation of API server (2:04)
Setting vite proxy server (8:02)
Practice - todo list (12:08)
Practice - stock price (11:57)

Redux

State management (3:08)
Why redux (3:23)
What is action (2:55)
What is reducer (3:30)
What is store (1:46)
Overview of redux implementation (3:57)
Implementation of action (1:38)
Implementation of reducer (2:51)
Configuring store (3:05)
React with redux (7:23)
Redux implementation - exercise (5:33)
Redux toolkit (5:47)
Redux toolkit - exercise (4:45)
Asynchronous handling (6:53)
Asynchronous handling - exercise (4:32)
Practice - todo list - part 1 (9:56)
Practice - todo list - part 2 (7:35)
Practice - multi-language app (14:07)

React router

Problem of single page app (3:14)
Setting routes (6:19)
Setting routes - exercise (2:39)
Getting parameter from URL (7:33)
Getting parameter from URL - exercise (3:16)
Nesting routes (5:36)
Link (3:31)
Nesting routes - exercise (6:28)
Handling route not found (1:44)
Protecting your routes - part 1 (3:42)
Protecting your routes - part 2 (4:58)
Code splitting (8:05)
Practice - simple login logout - part 1 (6:14)
Practice - simple login logout - part 2 (3:07)
Practice - simple login logout - part 3 (6:21)
Practice - simple login logout - part 4 (3:04)
Practice - simple login logout - part 5 (2:20)
Practice - simple login logout - part 6 (2:05)

Assessment - react

Social app (8:09)

Teach online with

Why do we need React

Complete and Continue

Discussion

0 comments