August 31, 2024

React dars savolari.

1-Dars| Kirish.

  • ReactJS nima?
  • SPA(singl page) nima?
  • React yaratuvchisi?
  • React saytda qanday foydalaniladi?
  • React HTML faylini serverdan necha marta olib keladi?
  • Cdn link necha xil bo'ladi?
  • Babel nima?
  • Terminal nima?
  • node -v? , npm -v? , yarn -v?.
  • npx create-react-app nima? spacial harakter?
  • Katta harflar bilan papkani ochmaslik kerak?
  • Har safar create-react-app qilish kerak, va Internet kerak?
  • Clear nima?
  • CRA va Vite farqi tushuntirib bering?
  • Windowsda => dir, Macda esa => ls nima?
  • Export va Import nima? farqlari?
  • Virtual Dom? tushuntiring? ikkta oyna?
  • Render DOM?
  • JSX - JavaScript XML?
  • Reactdagi README nima ?
  • Node_modules nima?
  • Node modules computerga qarab moslashadi, o'zini nastroykalari bor?
  • Publice nima?
  • Src nima?
  • Git ignor nima?
  • Esdlint nima?
  • Package.json nima?
  • Package-lock.json nima?
  • Dependensies nima?
  • devDependensies nima?
  • Npm start and npm run start?
  • Bunde.js nima?
  • Defer script nima?
  • Port 3000nima?
  • Port nima?

2-Dars| Props & Components.

  • Component nima?
  • Componentlar raectda necha xil usulda yaratiladi?
  • Class component nima?
  • Extends nima?
  • Function component nima?
  • JSX nima?
  • JSX expresionlarida nechta Ota bo'ladi?
  • Nima uchun Componetlarda bitta Ota bo'ladi?
  • ClassName nima?
  • ReactStrict mode nima?
  • Componentlar qanday yoziladi?
  • Export nima?
  • Import nima?
  • Export default nima?
  • Props nima?
  • Children props nima?
  • Propsda distrakchaning ahamiyati?
  • Function props nima?
  • Propslarni boshqa componentga jo'natish?
  • Reactda img?
  • Icon?
  • Reactda o'zgaruvchilarni ishlatilishi?
  • Dinamik qiymat?
  • Static qiymat nima?

3-Dars| useState, Map, Multi Component.

  • useState () nima?
  • useState qanday patrametrlari bor?
  • useState() qanday ishlaydi tushuntiring?
  • useState() bilan array and object lar bilan ishlash?
  • Modal bilan ishlash?
  • Map nima?
  • Key nima?
  • && (ampersan) belgini ishlatish?
  • Multi Component nima?
  • Fragment nima?
  • React portal nima?
  • ReactDom.createPortal?

4-Dars| Styles, Css and React bog'liqligi?

  • Style nima?
  • Reactda global style qaysi?
  • Nima uchun har bir component uchun css bo'lishi kerak?
  • Head dagi har bir style larni tushuntirib bering?
  • Reactda css dan foydalanish qanchalik to'g'ri?
  • Css dagi skop nima?
  • Inline css reactda qanday beriladi?
  • Inline css yozib bering?
  • Dynamic Inline Css yozish?
  • Inline css da ternaryni qanday ahamiyati bor?
  • Inline css da camelCase?
  • Inline css useState() bilan dynamic ko'rinishda berish?
  • dynamic class bilan ishlash?
  • className = {ternary }?
  • Module css nima?
  • Module css ni ishlatish qanday afzaligi bor va nimaga ishlatiladi?
  • component.module.css?
  • Module css ni ishlatish => {style.nom}? nom ikkitalik so'z bo'lsa {style["nom-nom"]} dynamic tarzda beriladi?
  • Module css Elements da ko'rinishi? Shiriftlangan bo'ladi?

5-Dars| Styled Components. Basic?

  • Style Components nima?
  • npm saytga kirish? Malumotlarni tekshirish?
  • Style Componentni Css dan afzaligi?
  • Css bilan Style-componentni farqlari nimada?
  • Style Component bilan Componentni nima farqi bor? tushuntiring?
  • Style Componentni o'rnatish qanday?
  • npm i style-components?
  • import styled from "styled-components"?
  • Style Component doimo katta harfda yasaladi?
  • Sintaksis => const H1 = styled.h1`property: xossa; `
  • Props orqali malumotlarni jo'natish?
  • Proplarni function yozib tutib olamiz?
  • color: ${(props) => props.cl };
  • Distrakcha sintaksis color: ${ ({cl}) => cl};
  • Bitta yasalgan Title ni boshqa caselarni tushuntiring? prop orqali boshqa xossalaridan foydalanish?
  • Title.Main qilib ishlatishni tushuntiring?
  • Syntax => Title.Main = style(Title)``;
  • Style componentda Meros olishni tushuntiring?
  • Style componentda hover and class ishlatishlarni tushuntiring?
  • Class larni eng katta o'rab turuvchisi orqali boshqariladi?
  • hover => &:,
  • Login page yasash? vazifa?
  • Fayl strukturasini tushuntiring?
  • mock, root utils, view, pages, components, img, icons?
  • Root fayl nima qiladi?
  • main.jsx assosiy nima vazifani bajaradi?

6-Dars| Styled Components. Advanced.

  • Styled Components Advanced?
  • Style componentsni Switch bilan ishlatish?
  • Nima uchun switch bilan ishlatish kerak?
  • If bilan ishlatsa ham bo'ladimi?
  • Qanday afzaliklari bor switch bilan ishlatishni?
  • Nima uchun style components ishlatish kerak? props
  • Style componentdagi afzaliklar?
  • Style componentni murakab caselarini yasash?
  • Tushuntirish? Amaliyot qilish?

7-Dars| Formlar.

  • React da formalar qanday bo'ladi?
  • React formalar bilan tanishish?
  • Reactda Formadagi malumotlarni yaratish? Component shaklida ishlatish? Ummumiy tushunchalar?
  • Formadagi malumotlarni console.log ga chiqarish?
  • onChange eventi haqida malumot bering? onChange eventi qanday ishlaydi?
  • onChange () eventi ichidagi malumotlarni olish ko'rish? e.target.value?
  • Formadagi malumotlarni useState () ga saqlash ular bilan ishalashni tushuntiring?
  • Formadagi malumotlarni state ga saqlab? => const [data, setData] = useState(" ")
  • Formalar bilan ishlashda funksiyalar qo'shish?
  • Formdagi maliumotlarni reset qilish qanday?
  • Formadagi button ni type qanday holatda bo'ladi?
  • Formadagi buttonlarni type button and submit nima farqi bor?
  • Formadagi onClick vazifasi?
  • Inputdagi value lar nima vazifani bajaradi?
  • Input ga value berishni amaliyot qilish?
  • Form tagi ga onSubmit berish qanday?
  • e.preventDefault() nima?
  • Forma dagi malumotlarni object shaklida chiqarish?
  • Form and objectlar bilan ishlash?
  • uuid () nima? Qanday o'rnatiladi? Qanday foydalaniladi? npm uuid saytdga kirish? npm i uuid o'rnatish?
  • Id ni formdagi ahamiyati qanday? id nima uchun ishlatiladi? Takrorlanmas?
  • Import {u4 as uuidv4 } from "uuid";
  • Ishlatish => uuid() ;
  • Add event => yaratilgan eventni qo'shib qo'yish qanday bo'ladi?
  • Add eventda spred operatoridan foydalanish?
  • Label ni ichida select bo'lsa afzalroq?
  • Selectni ishlatishni amaliyot qilib? tushuntirib bering?
  • Select ni ichidagi malumotlarni object shaklida ham jo'natishni tushuntirib bering?

8-Dars| React-Optimasition.

  • React Optimasition nima?
  • Optimasition nima? Tushuntiring?

Dars| UseRef (), useEffect (), useCallback (), Custom hooklar.

  • Ref nima? qanday ishlatiladi?
  • useRef () qayerdan chaqiriladi?
  • Refni ishlashi qanday tushuntirib bering?
  • Ref nima uchun ishlatamiz?
  • Nimaga Statedan ko'ra ref ishlatish afzalroq? tushuntiring?
  • Ref js dagi querySelectorlarga o'xshab ishlaydi?
  • Sahifani render qilmasdan olishni tushuntirib bering?
  • Ko'p render bo'lish nimaga olib keladi?

Dars| useReducer(), useFetch ().

  • /
  • /
  • /
  • /

Dars|Contex API, LocalStorage.

  • /
  • //
  • /
  • /
  • /

Dars| React-Router-Dom.

  • React-Router-Dom nima?
  • React router dom bilan nima ishlar qila olamiz?
  • Yuklash => npm i react-router-dom?
  • React Router Dom afzaliklari qanday? Nimga uni ishlatishimiz kerak?
  • React Router Dom ni versiyalari haqida?
  • BrowserRouters nima?
  • BrowserRouters qayerda ishlatiladi? qayerga yoziladi?
  • Routes nima? vazifasi qanday?
  • Route nima? vazifasi qanday?
  • Routeni parametrlari yokida attributelari qaysi?
  • Routedagi path nima? qanday vazifani bajaradi?
  • Routedagi element nima? qanday vazifani bajaradi?
  • Link nima?
  • Linkni afzaligi nimada? prosmotr codeda qanday ko'rinishda bo'ladi?
  • Linkdagi to nima vazifanin bajaradi?
  • to bilan hrefni farqi nimada?
  • NavLink nima?
  • NavLinkning afzaligi nimada?
  • NavLinkni style component bilan ishlatish? meros olish Item => NavLinkdan?
  • Link bilan NavLinkning farqi nimada?
  • Outlet nima? Tushuntiring?
  • Navigate nima? qayerga yoziladi qanday holatlarda ishlatiladi? element = {<Navigate to ="home"/>}?
  • CreateBrowserRouter nima?
  • createRouteFromElement nima?
  • RouterProvider nima?
  • Nested Route haqida malumot bering? Tushuntiring?
  • 404 pages not found nima?
  • 404 pages not found ni yasash?
  • path = "*" nima?

10-Dars | React-Router-Dom 2.

  • React router dom ni object shaklida yozish?
  • React router dom dagi codalarni optimal ko'rinishga keltirish?
  • Aloxida js ochib object shakliga keltirib amaliyotda qo'lash?
  • useNavigate() nima? qanday ishlaydi? ishlatishni tushuntiring?
  • useParams() nima? qanday ishlaydi? Tushuntiring?
  • Murakkab data lar bilan ishlash?
  • Routing ni advanced qisimlarini tushuntirib bering?
  • Amaliyot?
  • Figma?

00-Dars| AntDesign, Material UI (MUI).

  • AntDesign nima? Qanday vazifalarni bajaradi ? NIma maqsada ishlatiladi?
  • Material UI (MUI) nima? Qanaday vazifalarni bajaradi? Nima maqsada ishlatiladi?
  • Nima uchun Component based library deyiladi?
  • AntDesign and MUI nima farqi bor?
  • AndDesign and MUI solishtirish? npm mui and npm antdesign?
  • npm mui saytga kirib documentatsiyalar bilan tanishish?
  • npm antdesign saytga kirib documentatsiyalar bilan tanishish?
  • npm mui ni ikki xil usuli bor? style components and style bilan?
  • npm and yarn => mui bilan antdesign ishlatish?
  • npm ni components bo'limidagi muamolar va yangliklarni ko'rish?
  • Amaliyot qilish?
  • ////////////////////

00-Dars | Exam.