ReactJS | 2022 | Updated 2024

🚀 Alhamdulillah Yangi ReactJS darslari tayyor. Ushbu darslik ReactJS bo'yicha bilishingiz kerak bo'lgan barcha mavzularni o'z ichiga oladi. Darslikni o'rganish uchun birinchi sizda HTML, CSS, JavaScript bilimlari bo'lishi kerak.

Darslik ReactJS mavzusini endi boshlamoqchi bo'lganlardan boshlab mana shu sohada ishlayotgan barcha dasturchilar uchun foydalib o'ladi. Darslik doimiy ravishda yangilangan versiyalari bilan to'ldirib boriladi.

Mualliflik huquqiga amal qiling. Ruhsatsiz foydalanilgan kontent va video darsliklar ham diniy ham dunyoviy qoidalarga to'g'ri kelmaydi!

Kontentdan foydalanmoqchi bo'lganlar uchun eslatma barcha foydalanilgan kontent varoqalarida Webbrain Academy tamonidan tayorlanganligi haqidagi ma'lumot bo'lishi shart!

Video darsliklar Webbrain Academy bosh mentori Sardorbek Muhtorov tomonidan tayorlandi!

Videoni to'liq sotib olish uchun: https://teletype.in/@webbrain_ceo/video_darsliklar

0 - dars | React Darsligi Kimlar uchun? — Darslik haqida umumiy tushuncha

1 - dars | React'ga Kirish. — Create ReactJS (npx)
— React structure and file usage.
— SPA - Single Page Application.
— Virtual DOM.
— DOM Render.
— JSX - JavaScript XML.

2 - dars | Props and Components — Props and Components.
— Module - export / import / default import
— Children props.
— Class Components.

3 - dars | State Basics — State / rendering
— Constructor / super methods.
— Events - onChange, onClick
— State with input, checkbox, select

4 - dars | State Advanced — Functions in React
— Multi-state change
— Student CRUD / Mini Project

5 - dars | State Advanced Project — Table student list
— Filter students by name, status, and ID
— Edit student by ID
— Delete student by ID
— Dynamic filter

6 - dars | Styled Components — Styled-components (SC)
— Css property of SC
— Props in SC
— function usage in SC

7 - dars | Advanced SC — Inheritance
— Keyframes in animation
— Prototypes and Theme
— Project with SC

8 - dars | YouTube Clone Project — YouTube structurasi yasash.
— Sidebar yasash
— Body yasash
— Navbar yasash

9 - dars | YouTube Clone Advanced — Lifting state up
— Generic Card.
— Search and filter movies
— Delete movies
— Refresh logic.

10 - dars | Map and Rendering — Keys in map
— Logical Operations in React / if and ternary
— Navbar, attr, container, Components
— Signin and Signup page usage.

11 - dars | Lifecycles and Binding — ReactJS Lifecycles nima?
— Lifeyscels -> Render / Constructor / shouldComponentUpdate / componentDidMount / componentWillMount / componentWillRecieveProps
— Function binding in React

12 - dars | Hooks and useState — Class vs Hooks components
— Return vs without return hooks components
— This in class and hooks
— useState
— Primitive vs non-primitive

13 - dars | useEffect — useEffect default
— useEffect with dependencies
— Multiple useEffects

14 - dars | useReducer — useReducer nima?
— useState vs useReducer
— counter with useReducer

15 - dars | ContextAPI Basics — State management?
— Prop drilling?
— Lifting state up? — createContext / useContext
— createStore
— Provider / Consumer

16 - dars | ContextAPI Advanced — useContext advanced
— file management
— how to make general context
— useReducer with useContext

17 - dars | localStorage
— localStorage nima?
— localStorage methods
— Storing array, object
— JSON with localStorage

18 - dars | React Optimization - 1 — memo
— useMemo
— useCallback
— memo vs useMome
— useMemo vs useCallback

19 - dars | React Optimization - 2 — useRef?
— Controlled vs Uncontrolled

20 - dars | Fetch 1-2 — what is restful API?
— what is fetch?
— Theory -> endpoint / URL / API / link
— CRUD -> GET, POST, PUT, Delete
— Swagger platform
— Token and authorization
— Status Code -> 200 / 201 / 401 / 404 / 415 / 500

21 - dars | Axios — What is axios?
— Fetch vs axios.
— VanillaJS vs 3rd part libraries.
— Manual vs automatic data transform
— whatwg-fetch --save polyfill

22 - dars | React Router DOM 5 — BrowserRouter / Route
— Navlink / Link
— useHistory vs useLocation vs window.location
— Switch / Redirect
— usePrams
— Private route

23 - dars | React Router DOM 6 — Redirect -> navigate
— useHistory -> useNavigate
— Switch -> Routes
— Route's component -> element
— Outlet
— Navlink activeStyle -> style={({isActive})=>}
— usePrams
— privateRoute
— Create professional Navbar Project

24 - dars | High Order Component — High Order Components
— HOC usage and purpos

25 - dars | React 18V
— Batching
— startTransition
— New Suspense
— useId()
— useTransition()
— useDeferredValue()
— useSyncExternalStore()
— useInsertionEffect()

26 - dars | React Advanced — Profilers
— Lazy load
— Portals

27 - dars | Libraries | Bonus video — AntDesign -> ANTD
— Material UI -> MUI

28 - dars | Recording, coming soon | Bonus — React Charts
— Biz Chart
— Victory chart

39-dars | Recording, coming soon | Bonus Video — google maps
— yandex-maps

30 - dars | Interview | Bonus Video - React Interview Questions

BONUS
Interview savollari va amaliy mashqlar: https://t.me/reactjs_homework