CSS файлы

HTML + JavaScript айкалышы

Сервер тили

База данных

()

[]

<>

{}

Бүт сайт

Кайра колдонулуучу UI бөлүк

Сервер

База данных

Компонентке берилген маалымат

State

Компоненттин стили

Файл

Төмөндөн жогору

Backendтен

Жогору жактан төмөнгө

Каалагандай

Өзгөрө турган маалымaт

Props

Туруктуу маалымат

CSS

API чакыруу

Маалыматты сактап, өзгөртүү үчүн

Маалыматты коопсуз жерге сактоо үчүн

const [state, setState] = ()

const (state , setState) = useState

const [state, setState ] = useState ()

const [state() , setState() ] = useState()

Бул баардык проектке иштеген стилдер

Бул стилдерди экспорттойт

Бул бир эле компонентке иштөөчү стилдер

Сайттын түсү

Колдонуучунун аракети

Сервер коду

CSS

Маалымат өзгөргөндө функцияны иштетет

Сайтты жүктөйт

Басканда функцияны иштетет

<img src='./photo.jpg"/>

import Photo from './photo.jpg'

<Img src={'./photo.jpg'}/>

import Photo from './photo.jpg'
<img src={Photo} />

class ComponentName {}

const ComponentName = () => {}

function ComponentName() {}

onClick атрибуту менен

onSubmit атрибуту менен

onChange атрибуту менен

import Component from './Component'

require('./Component')

include './Component'

<Component propName='value' />

<Component propName=value />

<Component propName={value} />