Front End DevelopmentJavascriptIntermediate
REACT JS
Learn the main concepts of REACT JS and build stunning user interfaces!
🚀 Start✓ Free access
📋 Course syllabus
Introduction
1
00 - Introduction
Lesson
5m
2
01 - Installation
Lesson
2m30
3
02 - Creating an application
Lesson
8m59
4
03 - Hello World
Lesson
5m23
Understanding JSX syntax
5
01 - Understanding the syntax
Lesson
1m36
6
02 - JSX expressions
Lesson
8m50
7
03 - JSX and ES6 expressions
Lesson
1m02
8
04 - Specifying attributes in JSX
Lesson
2m38
9
05 - Specifying child elements
Lesson
3m40
10
06 - JSX represents objects
Lesson
3m44
Rendering elements
11
01 - Explanations
Lesson
7m08
12
02 - Updating a displayed element the JS way
Lesson
3m51
Components and props
13
01 - Function Components and Class Components
Lesson
10m07
14
02 - Props and functions
Lesson
5m03
15
03 - Props and classes
Lesson
4m44
16
04 - Understanding classes
Lesson
0m50
17
05 - Wrap-up before the practical exercise
Lesson
1m15
18
06 - Introduction to the exercise
Lesson
3m03
19
07 - Exercise solution - Managing components
Lesson
14m23
20
08 - Exercise solution - Managing the Props object
Lesson
6m23
21
09 - Outro
Lesson
0m23
State and lifecycle
22
01 - Introduction to state management
Lesson
7m12
23
02 - Setting up state
Lesson
5m53
24
03 - How to update a component
Lesson
11m16
25
04 - Lifecycle methods
Lesson
1m53
26
05 - Summary
Lesson
1m32
27
06 - Going further with state
Lesson
6m43
Event handling
28
01 - Handling events
Lesson
17m08
Conditional rendering
29
01 - Conditionally displaying components
Lesson
4m38
30
02 - Storing elements in variables
Lesson
3m58
31
03 - Linking state and conditional rendering
Lesson
6m05
32
04 - Updating state and handling conditional rendering
Lesson
6m24
33
05 - The && operator
Lesson
4m20
34
06 - Ternary conditions
Lesson
1m59
Lists and keys
35
01 - Managing lists in React JS with the map() method
Lesson
6m55
36
02 - Basic list components
Lesson
3m34
37
03 - Keys
Lesson
3m35
38
04 - Extracting components with keys
Lesson
5m21
Forms
39
01 - Controlled components
Lesson
10m07
40
02 - Handling multiple inputs
Lesson
16m59
41
03 - Outro
Lesson
0m24
Weight converter exercise - Lifting state up
42
01 - Intro
Lesson
3m18
43
02 - Composition and inheritance
Lesson
5m48
44
03 - Lifting state up
Lesson
8m33
45
04 - Binding state to input values
Lesson
11m46
46
05 - Setting up the conversion methods
Lesson
7m11
47
06 - Conversion
Lesson
6m10
48
07 - Debug
Lesson
1m22
49
08 - Ternary condition
Lesson
4m01
50
09 - Handling the form reset
Lesson
7m33
51
10 - Debug
Lesson
0m39
52
11 - Conclusion
Lesson
1m52
Useful concepts
53
01 - Spread operator & object destructuring
Lesson
7m23
54
02 - The map() and filter() methods
Lesson
7m33
55
03 - Backticks and destructuring the Props object
Lesson
4m32
56
04 - Adding style to a React component
Lesson
2m08
57
05 - Conditionally applying classes
Lesson
2m54
58
06 - Introduction to building the Todo app
Lesson
1m08
Introduction to hooks
59
01 - Introduction
Lesson
2m10
60
02 - The State Hook
Lesson
10m50
61
03 - The Effect Hook
Lesson
3m19
62
04 - Effects with and without cleanup
Lesson
7m48
63
05 - Explanations
Lesson
2m57
64
06 - Introduction to the exercise
Lesson
2m00
65
07 - Creating the component
Lesson
10m34
66
08 - Linking a state to useEffect
Lesson
2m32
67
09 - Lab outro
Lesson
0m45
Practical lab - Building a Todo app
68
01 - Introduction
Lab
1m00
69
02 - Creating the application
Lab
8m30
70
03 - Setting up the architecture
Lab
6m10
71
04 - Creating the components
Lab
9m53
72
05 - Setting up the state and the list of todos
Lab
9m31
73
06 - Handling the addition of a Todo
Lab
16m03
74
07 - Handling the deletion of a Todo
Lab
8m07
75
08 - Handling the toggle on the reminder property
Lab
37m30
76
09 - Handling the toggle of the form display - onClick
Lab
11m33
77
10 - Handling the todo counter and displaying a message if the list is empty
Lab
2m42
78
11 - Handling the delete button
Lab
3m23
79
12 - Handling the toggle on the reminder property of all todos
Lab
9m46
80
13 - Setting up navigation in React JS
Lab
18m35
Connecting the Todo app to a fake backend API
81
01 - Installing a fake JSON server
Lab
2m43
82
02 - Configuring the JSON server
Lab
2m59
83
03 - Loading todos from the server
Lab
4m13
84
04 - Handling the deletion of a todo on the server
Lab
3m43
85
05 - Handling the addition of a TODO
Lab
5m32
86
06 - Handling the update of a TODO
Lab
6m49
87
07 - Outro
Lab
1m27