Część 14 - Podstawy React
Czas najwyższy na zapoznanie się z React'em, czyli biblioteki wydanej i utrzymywanej przez Facebooka, która znacznie ułatwia tworzenie interfejsów.
01. Wstęp
02. Co to jest React - framework a biblioteka
03. Używanie React bez bundlera - React.createElement
04. Drzewo DOM vs Virtual DOM
05. JSX bez bundlera
06. Create React App
07. ESLint.
08. Emmet w JSX.
09. JSX vs HTML (różnice)
10. Co JSX potrafi wyrenderować
11. Key i renderowanie tablic
12. Renderowanie zagnieżdżonych tablic
13. Renderowanie warunkowe
14. Filtrowanie elementów
15. onClick
16. onChange
17. Komponenty funkcyjne
18. Komponenty klasowe
19. Stan w komponencie
20. Pola klas
21. Mutowanie stanu bezpośrednio
22. forceUpdate
23. async setState
24. Własny CRA template cz. 1
25. Własny CRA template cz. 2
26. Warunkowe renderowanie ze stanem
27. Filtrowanie oparte o stan
28. React devtools
29. Project 1 - ToDo lista w React
30. Propsy
31. Co można przekazać propsem
32. Spread propsów - otherProps
33. Domyślna wartość propsów
34. prop-types
35. Domyślne propsy dla komponentu
36. Counter z komponentów
37. Counter z propsami
38. Lifting state up - wynoszenie stanu do góry
39. children
40. Inline styles
41. Inline styles based on props
42. Importowanie CSS
43. Prefixowanie klas
44. CSS modules
45. CSS in JS
46. Wstęp do metod cyklu życia (lifecycle)
47. Mounting lifecycle methods
48. Updating lifecycle methods
49. Unmounting lifecycle methods
50. Error boundaries
51. Project 1 – handling random errors
52. Fetchowanie danych
53. Stany ładowania
54. Wyświetlanie pobranych tablic
55. Project 2 – fetching with intervals
56. SVG icons
57. Project 3.0 ToDo lista z komponentów
58. Project 3.1 - ToDo lista z komponentów + style
59. Project 3.2 Zapis do localStorage
60. Project 3.3 Zapis do bazy danych
61. Project 3.4 Publikowanie Firebase Hosting
62. React.Fragment
63. React DOM refs
64. React components refs
65. Project 4.0 design w Figma
66. Project 4.1 Stan aplikacji
67. Project 4.2 Loader
68. Project 4.3 Typografia
69. Project 4.4 Przyciski
70. Project 4.5 Info messages
71. Projekt 4.6 Kompozycja komponnetów
72. Projekt 4.7 Module templates
73. Projekt 4.8 TextField
74. Projekt 4.9 LoginForm
75. Projekt 4.10 CreateAccountForm
76. Projekt 4.11 RecoverPasswordForm
77. Projekt 4.12 Basic routing
78. Projekt 4.13 Logowanie przez Firebase
79. Projekt 4.14 Walidacja e-maila
80. Projekt 4.15 Walidacja pozostałych formularzy
81 Projekt 4.16 Rejestracja i odzwskiwanie hasła
82. Projekt 4.17 AppBar
83. Projekt 4.18 UserDropdown
84. Projekt 4.19 UserDropdown toggling list
85. Projekt 4.20 UserDropdown list item + log outt
86. Project 4.21 Faker Mockaroo
87. Projekt 4.22 Pobieranie kursów z Firebase
88. Projekt 4.23 CourseCard
89. Projekt 4.24 CoursesList
90. Projekt 4.25 MainLayout
91. Projekt 4.26 Search
92. Projekt 4.27 Polishing
93. Projekt 4.28.0 Refactor - PageCoursesList
94. Projekt 4.28.1 Refactor - PageLogin
95. Projekt 4.28.2 Refactor - PageCreateAccount
96. Projekt 4.28.3 Refactor - PageRecoverPassword
97. Projekt 4.28.4 Refactor - handling async actions
98. Projekt 4.29 Deployment
React pod względem popularności bije na głowę inne dostępne rozwiązania, a praca z nim jest bardzo zbliżona do pracy z czystym JS-em (z wyjątkiem drzewa DOM).
Nauczysz się jak działa React i jak pisać w nim kod, aby na końcu tej części własnoręcznie napisać dużą, pełnoprawną aplikację z rejestracją i logowaniem.