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

inshalloh hammaga manfaatli bo'ladi degan umiddaman.

-Lesson-1

Introduction

JavaScript Nima ?

• JavaScript- bu dasturlash tili.
• Statistics- https://radixweb.com/blog/top-javascript-usage-statistics

Nima uchun JavaScript?

• JavaScript yuqori darajadagi dynamic, single-thread va web browser ni qo’llab quvvatlaydigan yagona dasturlash tili.
• U interaktiv va dinamik veb saytlarni yashash uchun ishlatiladi.

Javascript o’rganishimiz uchun zarur

• HTML
• CSS
• Bootstrap
• Sass
• Javascript imkoniyatlari
• Front end
• Back end
• Mobil ilovalar
• O’yinlar, web saytlar, mobil dasturlar ishlab chiqarish mumkin.

Dasturlash muhitini sozlash

• Visual Studio Code
• Node.js
• Live Server
• Material Icon theme
• Community Material Theme

-Lesson-2

Foydalanuvchi bilan aloqa

• Console.log
• Alert
• Prompt
• Confirm

Variables-o’zgaruvchilar

O’zgaruvchi -bu o’zida qiymat saqlovchi konteyner.

• Declare qilish
• Var, const, let
• Difference of declaring
• Naming variables
• CamelCase
• Under_Score
• How we can not give name variables

- with key words

- with numbers

• comment
• // -bir qatorlik
• /**/- Ko’p qatorlik

-Lesson-3

Data types- ma’lumot turlari

• Primitive- string, number, boolean, null, undefined,BigInt, symbol
• nonprimitive- Object(object, array, date. Function)

-Lesson-4

String data type- bu matnli tip

• E’lon qilish turlari - “”; ‘’; ``;
• \n - new line in single and double quotes
• \t -tab
• Str.length
• Accesing character
• str[I];
• Str.at(i)
• Str.charAt(0)
• the last character
• str[str.lenght-1]
• Str.at(-1)
• String methods
• IndexOf - boshidan elem ni index ni qidiradi
• lastindexOf - oxiridan elem ni index ni qidiradi
• Search - qiymatni qidirib aniqlanish indexni qaytaradi
• Includes - true and false qiymat qaytaradi mavjudmi degani
• Slice
• Splice
• Substring
• Substr
• Replace
• Split
• Repeat
• startWith
• endsWith
• toLowercase
• toUppercase
• Trim

-Lesson-5

Number data type - bu raqam tip

• Declaring number
• Extra large or extra small number -> e
• The maximum number of decimal- 17;
• Adding numbers to string 10+’10’=1010
• Converting string to numb
• “100”/’10’ = 10 //number
• ’10’*’10’=100 // number
• “100”-’10’=90 //number
• “100”+10 =10010 // string
• NAN- not a Number
• NAN- is also number
• Type of NAN return number
• isNAN() - global function to check if it is not a number
• isNaN(5) - false
• isNaN(‘5’) - true
• Infinity
• It is also a number
• 2/0 =>infinity
• Type of infinity is a number

Number methods

• toString() - coverts numbers to string
• toFixed() - yaxlitlab string qaytarib bread
• Number() converts variables to number
• Number(true) - 1
• Number(fasle) - 0
• Number(“10”) - 10
• Number(“ 10”) -10
• Number(“10 ”) -10
• Number(“ 10 ”)-10
• Number(10.33)-10.33
• Number(“10,33”) -NAN
• Number(“10 33”)-NAN
• Number(“John”)-NAN

Lesson_6

Operators

• Arithmetic Operators - +; -;*;/
• Assignment Operators - =; +=; -=; *=; /=;
• Comparison Operators - ==; ===; !=; <=; >=; >;<;
• Logic Operator &&;||;

Lesson_7

• if else
• Ternary operator
• Switch case

Lesson_8

LOOPS

• For
• While
• Do while

Lesson_9

Function

• Function Declaration
• Function Expression
• Arrow function

Lesson_10

Object

Lesson_11

Array

#2 What can we do with Css

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External CSS
Internal CSS
Inline CSS

#3 CSS Syntax
p {
color: red;
text-align: center;
}
Example Explained

p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value

#4 CSS Selectors
* id
* class
* tag

#5 CSS Comments

#6 CSS Colors
* color names
* HEX
* RGB
* RGBA

#7 CSS Backgrounds

* background-color
* background-image
* background-repeat
* background-attachment
* background-position
* background (shorthand property)

#8 CSS Borders
CSS Border Style
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

#9 CSS Margins and Padding

#10 CSS Height, Width and Max-width

CSS height and width Values

The height and width properties may have the following values:

* auto - This is default. The browser calculates the height and width
* length - Defines the height/width in px, cm etc.
* % - Defines the height/width in percent of the containing block
* initial - Sets the height/width to its default value
* inherit - The height/width will be inherited from its parent value

#11 CSS Box Model(div)
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

#12 CSS Text
* Text Color
* text-align
* text-align-last
* text-decoration
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline underline;
}

#13 text-transform
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

#14 CSS Text Spacing

text-indent
letter-spacing
line-height
word-spacing
white-space

#15 CSS Text Shadow
h1 {
text-shadow: 2px 2px 5px red;
}
#16 CSS Fonts
#17 CSS Links

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

/* unvisited link */

a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

#18 CSS Layout - The display Property
* Block-level Elements

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

* Inline Elements

<span>
<a>
<img>
#19 Css Position
here are five different position values:

static
relative
fixed
absolute
sticky
#20 Css Z-index
#21 Css overflow
#22 CSS Float
#23 Css Combinators
There are four different combinators in CSS:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
#24 Css Psevdo-class, psevdo element
* first-line
* first-letter
#25 CSS Opacity / Transparency
#26 CSS navbar
horizontal
dropdown
#27 CSS forms
#28 Css Website layout
www.w3schools.com
#29 Css Units
www.w3schools.com
#30 Css Gradients
* linear-gradient
#31 Css shadow
*text-shadow
* box-shadow

div {
box-shadow: 10px 10px 5px 12px lightblue;
}
#32 CSS 2D transform
#33 Css 3D transform
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

#34 css_transition

#35 css_media_queryies

#36 css_flexbox

#37 css_grid

Foydalanuvchilar uchun manfaatli bo'ladi degan umiddaman 😊😊😊

HTML Tutorials

Lesson_1 - Typography -Taxrirlash

• Kirish
• HTML nima, kengaytmasi
• Tag tushunchasi, turlari
• Vs Code
• HTML Skelet
• Sarlavha teglari- h1-h6
• Matn tegi -p
• Qalinlashtirish b , strong
• Kursiv - i, em
• Tagiga chizilgan -u
• Rasm tegi -img
• Video tegi - video
• Gorizontal chiziq -hr
• Bir qator pastga- br
• Sitata -blockquote
• Ro’yxatlar 2 xil
• Tartilblangan ol
• Tartiblanmagan ul
• Atribut - xususiyatlar
• align
• width
• height
• Src, alt

Lesson_2 Table - Jadval

• Table
• Tr
• Td
• colspan
• rowspan
• Cellspacing
• Cellpadding
• Width
• Height
• Border
• Align

Lesson_3 form

Form

• Input type=‘text’
• Input type=‘password’
• Input type=‘radio’
• Input type=‘checkbox’
• Input type=‘date
• Input type=‘months’
• Input type=‘email’
• Input type=‘search’
• Input type=‘file’
• Input type=‘submit’
• Input type=‘reset’
• Input type=‘range’
• input type=‘number’
• Select
• Label