JavaSciprt vs ReactJS
JavaScriptni tugatga talab eng kamida 70-80% ReactJS'ni tushinishi kerak bo'ladi. Agar tushunmasa demak javaScriptni qayta o'qishi kerak. Bugungi kunda aksar dasturchilar reactjsda code yozishsada moyihatini to'liq tushunib yetishmaydi. Bunga sabab javaScriptni yaxshi o'zlashtirmaslikda. Ishonmasangiz birgalikda obzor qilamiz.
Webbraining ReactJS darsligida jami 31ta video bor. Ularning 26tasi react'ning core hususiyatlatini ochib beradi. Keling mana shu 26ta darslikni javascript misolida ko'rib chiqamiz.
1-dars | Reactga kirish
— React nima?
— DOM va virtual DOM nima? / 33-dars / DOM
— DOM render / 56-dars / rendering
2-dars | Props | Components
— props / 5-dars / parametor
— components / 56-dars costum elements
— export import / 28-dars / module
— props, children / 56-dasr / slot bo'limi
3-dars | State
- constructor / 24-dars class mavzusi
- super / 24-dars class mavzusi
- onChange, onClick / 35-36-37-dars events
- input, checkbox, select / HTML'dan malum ))
4-dars | Events
- function call / 19-dars apply, call bind
- multi state change /6-7-dars Objects in deep
- student list / 12-dars CRUD
5-dars | Styled Components
- { css } / 7-dars distructure / 5-dars function
- props / 5-dars parametor /
- function call / 19-dars apply, call bind
6-dars | Styled Components advanced
- inheritance / 29-dars inheritance
- keyframse, animation / css
- prototypes / 6-dars object
- project /css
- theme / css
7-dars | YouTube Clone | Project no need JS
- Lifting state up
- Search movies
- delete moveies
8-dars | Rendering
- rendering / 56-dars rendering
- map and key / 10-dars array
- if vs ternary in react / 3-dars if and ternary
- Project navbar.
9-dars | Lifecycle
- Lifecycles / 56-dars filecycle
- binding / 19-dars function bind
10-dars | Hooks | JS
- Class vs Hooks components / 24-dars class / 56-dars lifecycle
- return vs without return hooks components / 5-dars functions
- this in class and hooks / 7-24-dars this va class
- useState / 24-56-dars this
- primitive vs non primitive / js kirish 1-dars
11-dars - useEffect / 41-dars mutationObserver
12-dars - useReducer / 11-dars reduce
13-dars | state management
- prop drilling / / 5-dars params
- lifting state up / 5-dars functions
14-dars | ContextAPI | New to JS
- createContext
- put to the store
- useContext
16-dars | JS 50-dars localstorage 1=1
- LocalStorage
- localStorage.setItem(name,value)
- localStorage.getItem(name)
- localStorage.removeItem(name)
- localStorage.clear()
- array, object
- JSON.stringify(value)
- JSON.parse(localStorage.getItem('count'))
17-dars | Memoization | 21-dars cache
- react optimization
- memo => child component, trigger re-render
- memo vs useMome()
- useMemo = > return value
- useCallback vs useMemo
18-dars | New to JS
- useRef?
- controlled vs Uncontrolled
19-dars | Fetch | 45-46-47-darslar
- restfull API
- fetch?
- endpoint, url,api, link
- CRUD
- GET, POST, PUT, Delete
- swagger
- token
- auth / authorization
- 200 -> 201 -> 401 -> 404 -> 415 -> 500
20-dars | Axios | not react.
- axios
- fetch vs axios
- vanilla js vs 3rd part library
- manually vs automatic => data transform
- npm- install whatwg-fetch --save polyfill for-fetch
21-dars | Router 5 | New to JS
- React Router DOM 5
- BrowserRouter
- Navlink, Link / HTML
- Route
- useHistory, useLocation => window.location / 33-dars DOM
- Switch
- usePrams / 48-dars URL
- privateRoute
- redirect
22-dars | Router 6 | New to JS
- React Router DOM 6
- redirect -> navigate
- useHistory -> useNavigate
- Switch -> Routes
- Route -> component -> element
- Outlet
- Navlink activeStyle -> style={({isActive})=>}
- usePrams
- privateRoute
- optimal navbar yasash
23-dars | HOC | 32 - dars function in depth
- HOC
- High Order Components
24-dars | ReactJS V-18 | New to JS
- React 18V
- batching
- startTransition
- New Suspense
- useId()
- useTransition()
- useDeferredValue()
- useSyncExternalStore()
- useInsertionEffect()