React tips for learners 2024

1. REACT kirish

• Nima uchun React???
• (Netflix va Instagram kabi platformalar React.js da yaratilgan.)
• Facebook kompaniyasi tominidan yaratilgan va qo'llab quvvatlanadi
• React.js- bu Javascript kutubxonasi xisoblanadi. (Faqat Reactda yaratilgan saytlar SPA SINGLE PAGE APPLICATION) deb ham yuritiladi. Sabab unda faqat yagona #root html sahifa bo'ladi.

- Oddiy web sahifa bilan React.js da yaratilgan sahifaning farqi

Oddiy Web sayt React.js

index.html #root -> index.html

About.html About.js

Contact.html Contact.js

Footer.html Footer.js

- Bilishimiz kerak

• Javascript Programming language
• HTML+ CSS

-Dasturlash muhitini sozlash

(Keraklı dasturlar)

• Node.js
• Community Material Theme
• Auto Close tag
• Auto Rename tag
• Beutify
• Code runner
• Code Snap
• Eslint
• Live Server
• Simple React Snippets

2. React.Js da Hello World Dasturi

npx create-react-app myapp (Happy Hacking😂😂😂😂😂😂🤣😂)

-Reactdagi myapp papkamizda nimalar mavjud

• node-modules (bizga barcha kutubxona va texnologiyalar joylashgan hajmi ham katta)
• public - (bunda asosa Root faylimiz index.html sahifamiz joylashadi)
• src - (Butun React kodlarimz componentlarimz joylashadi.)
• .gitignore (bu gitdan ko'chirib olganimz uchun bu fayl mavjud)
• {}package-lock.json (node modulus ni qaysi versiyada ishlayotganinin belgilab beradi)
• {}package.json (Bizning websitimizning hujjati-passporti)
• Readme.md

- Ishga tushirish uchun cmd dan myapp ichiga kirib so'ngra

• npm start
• ctrl c

index.js

********------**********

- import ReactDOM from 'react-dom'

// ReactDOM.render(nimani joylay, qayerga joylay)

- ReactDOM.render('Hello World',document.getElementById('root'));

JSX sintaxsis

• JSX nima???
• JSX - Javascript XML ya'ni Javascript ichida HTML hamda HTML ichida Javascript.
• JSX yordamida biz Reactda HTML kodlarimizni yozish imkoni mavjud
• JSX ni biz React.createElement() metodi yordamida ishlatishimz mumkin

React.createElement() metodi

• Babel js
• JSX bilan tanishuv

*********************-------------********************

-import ReactDOM from 'react-dom'

-import React from 'react'

-REACTDOM.render(

React.createElement("h1",{},"Salom Do'stim"),

documnet.getElementById('root')

)

*****************______________********************

Topshiriq

<div class="container">

  <h1>Qalaysizlar?<h1/>

  <div class="box">

    <p>Ixtiyoriy matn</p>

  </div>

<div/>

• -Babel.io
• -HTML teglari har doim yopiq xolatda bo'lishi kk

Variables and Expressions in React'

• Language Mode: JavaScript React
• JSX ni ishlatayotgandagi qoidalar
• JSX da o'zgaruvchilarni ishlatish
• Variables (O'zgaruvchilar)+
• Arrays
• Objects
• Attributer
• Rasmlardan foydalanish
• JSX da Inline CSS ishlatish
• React events

React table

React table using data from Objects in array

website structure in React ****Components and Small react projects

Topshiriq 1

• -Yangi React App yarating
• -App.js componenta yarating
• -Header.js component yarating va <header></header> elementi ichiga <h1/> tegida Welcome To Our Website
• degan yozuv bo'lsin
• - .content classini render qiladigan Content.js nomli komponent yarating va <div> ichida <h1> title va <p>
• ma'lumot yozish uchun joy bo'lsin
• - <footer> elementini render qiladigan Footer.js nomli komponent yarating va <footer> elementi ichida <p>
• tegida Copyright yozuv va yil (yil funksional bo'lishi kerak)

Topshiriq 2

• -Yangi React App yarating +
• -App.js komponent yarating +
• -Heading.js komponenta yarating +
• -App.js komponentamizni index.js render qilib #root faylimizga uzatib bersin, App.js esa Heading komponentamizni o'z ichiga olsin. +
• -Heading.js imzda <h1> elementi joylashisn hamda ushbu element ichida agrda soat 00- 12 00 gacha bo'lsa
• "GoodMorning" va rangi qizil rangda, agarda "12 00 dan 18 00" gacha bo'lsa "Good After NOON" va rangi sariq rangda , aks xolda "Good Night" va rangi yashil xolatda chiqishi kerak.

React Components and their types

• React Class Component
• React Function Component

React Class Component

React Function Component

React Class Components major role of STATE

• STATE is help to save our data in React

React Class Components major role of props

• Props is a properties

Making Counter in React Class Component

Making Timer using react class components

React Component Lifecycle and methods

ComponentDidMount

ComponentDidUpdate

React Forms in Class Components

Practises

• Create-Form-App
• Create-Movie-App

React Function Component - useState() hook

• Hooklar bilan ishlash
• useState()
• Use datas in List Items
• delete item
• Conditional template

React Function Component Props

• Children props
• Function Props
• React Fragment

EventList Component and React Portal

React Styling

• Inline
• Global and component styling
• Dinamic inline Css
• Module css

React Function component Form Events

• onchange
• onSubmit
• reset
• All events

React Function component UseEffect hook and json servers

React Function component UseCallback() hook and Usefetch()

React Routers

• React Router Dom
• Link And NavLink

Small website project using react router and all Events