ReactJS - 2025
Ushbu postda ReactJS‘dan bilishingiz kerak bo‘lgan barcha asosiy ma’lumotlar jamlangan. Agar post sizga dasturlashni o‘rganishda foydali va manfaatli bo'lgan bo‘lsa, g‘oyibona duo qilishingizning o‘zi kifoya.
Barcha ma‘lumotlar ustozim Webbrain Academy asoschisi Sardorbek Muhtorov darsligiga asoslanib tayyorlandi.
Hurmat bilan Foziljon Azimov.
React darsligi kimlar uchun? — Darslik haqida umumiy tushuncha
1 - dars | React'ga Kirish.
— Create ReactJS
— npx create-react-app@latest my-project
— npm create vite@latest my-project
— what is npm, yarn, npx, vite ?
— React structure and file usage.
— SPA - Single Page Application.
— Virtual and React DOM.
— DOM Render.
— JSX - JavaScript XML.
— JSX → React.createElement → Virtual DOM → ReactDOM → Real DOM → document.createElement().
— what is Babel?
— StrictMode, Fragment.
2 - dars | Props and Components.
— “uni-directional data flow”
— props and components.
— component - class / functional.
— render(), this, return.
— JS module - import / export / export default.
— different ways of using props.
— children props.
3 - dars | State Basics
— state / rendering.
— re-render
— events - onClick, onChange, ...
— state with input, select, checkbox, ...
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
— media query
— prototypes and Theme
— project with SC
— SVGR installation npm install -D vite-plugin-svgr
8 - dars | Project Basic
— Project structurasi yasash.
— Sidebar yasash
— Body yasash
— Navbar yasash
9 - dars | Project 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
11 - dars | Lifecycles and Binding
— ReactJS Lifecycles nima?
— Mounting -> Updating -> Unmounting
— Lifecycles - Mounting stage:
constructor -> render -> componentDidMount
— Lifecycles - Updating stage:
getDerivedStateFromProps -> shouldComponentUpdate -> render -> componentDidUpdate
— Lifecycles - Unmounting stage:
componentWillUnmount
— Function binding in React
12 - dars | Hooks
— useState - (cc-> this.state )
— useEffect - (cc -> componentDidMount, componentDidUpdate, componentWillUnmount)
— useReducer
— useContext
— useMemo
— useCallback
— useRef
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 / PATCH, Delete
— Swagger platform
— Token and authorization
— Status Code -> 200 / 201 / 401 / 404 / 415 / 500
— AbortController / signal
21 - dars | Axios
— What is axios?
— Fetch vs axios.
— timeout
— interceptors
— VanillaJS vs 3rd part libraries.
— whatwg-fetch --save polyfill
22 - dars | React Router DOM v5
— BrowserRouter
— Navlink / to, activeStyle, attrs
— Route / path, component, exact
— Switch
— Link
— useHistory vs useLocation vs window.location
— Redirect / to
— goBack, goForward
23 - dars | React Router DOM v6 , v7
— BrowserRouter
— Navlink style={({isActive})=>}
— Switch -> Routes
— Route's component -> element
— Redirect -> Navigate
— useHistory, useLocation -> useNavigate
— Outlet
— privateRoute
— Create professional Navbar Project
— usePrams
— useSearchParams
— useRoutes / path, element, children->(index, caseSensitive)
24 - dars | Tailwind Css
— Tailwind Css installation
— npm install tailwindcss @tailwindcss/vite
— Tailwind Css configuration
— difference between Bootstrap and Tailwind CSS
25 - dars | Redux & RTK - Basics
— What is Redux and Redux Toolkit?
— Redux Toolkit recommended
— Installation: npm install @reduxjs/toolkit , npm install react-redux
— configureStore: reducer
— Provider
— createSlice: name / initialState / reducers
— hooks: useSelector / useDispatch
26 - dars | RTK - Advanced
— createAsyncThunk
— createSlice: extraReducers
— pending / fulfilled / rejected
27 - dars | High Order Component ⚠️
— High Order Components
— HOC usage and purpos
28 - dars | Difference between React v17 & v18, v19
— batching
— flushSync
— useTransition()
— useDeferredValue()
— difference between useTransition() and useDeferredValue()
— useId() / useId() purpose / unique ID -> crypto.randomUUID()
29 - dars | React Advanced
— Profilers
— Lazy load
30 - dars | Libraries
— AntDesign -> ANTD
— Material UI -> MUI
31-dars | Maps
— google maps / -> example
— yandex-maps / -> example
32-dars | Deployment
— Netlify
— Vercel