Anvarjon Ibrohimov

React tips for learners 2024

2024-10-12T08:29:24.510Z

#lesson_1

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'));

#lesson_2

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

#lesson_3

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

#lesson_4

React table

React table using data from Objects in array

#lesson_5

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.

#lesson_6

React Components and their types

React Class Component
React Function Component

React Class Component

React Function Component

#lesson_7

React Class Components major role of STATE

STATE is help to save our data in React

#lesson_8

React Class Components major role of props

Props is a properties

#lesson_9

Making Counter in React Class Component

#lesson_10

Making Timer using react class components

App component

css codes

#lesson_11

React Component Lifecycle and methods

ComponentDidMount

ComponentDidUpdate

#lesson_12

React Forms in Class Components

#lesson_13

Practises

Create-Form-App
Create-Movie-App

#lesson_14

React Function Component - useState() hook

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

#lesson_15

React Function Component Props

Children props
Function Props
React Fragment

#lesson_16

EventList Component and React Portal

#lesson_17

React Styling

Inline
Global and component styling
Dinamic inline Css
Module css

#lesson_18

React Function component Form Events

onchange
onSubmit
reset
All events

#lesson_19

React Function component UseEffect hook and json servers

#lesson_20

React Function component UseCallback() hook and Usefetch()

#lesson_21

React Routers

React Router Dom
Link And NavLink

#lesson_22

Small website project using react router and all Events

Javascript 2024 easier version

2024-01-30T12:43:09.082Z

Assalomu aleykum qadrli qadrdonlar bilim va malakangizni oshirishda ozgina bo'lsa ham o'z xissamizni qo'shsak hursand bo'lamiz😉😉😉

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

CSS makes your work pleasant

2024-01-30T12:38:55.400Z

#1 What is CSS

#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

* 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

HTML roadmap and tutorials for students

2024-01-30T12:30:30.927Z

Assalomu aleykum biz ushbu Roadmap yordamida foydalanuvchilar yoki dasturlashni yangi o’rganivchilar uchun web dizayn sohasida bilim darajasini tubdan o’zgartirish hamda natijaga erishishi uchun muhim bo’lgan qadamlar ketma-ketligini taqdim etamiz✌️✌️✌️

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