React.js колдонуп веб-тиркеме түзүү боюнча окуу куралы

React.js - интерактивдүү колдонуучу интерфейстерин (UI) түзүү үчүн колдонулган популярдуу фронт-энд иштеп чыгуу китепканасы. Facebook тарабынан иштелип чыккан React.js Instagram, Airbnb жана WhatsApp сыяктуу көптөгөн ири компаниялар тарабынан колдонулуп келет. Эгер сиз натыйжалуу, тез жана жооп берүүчү веб тиркемелерди түзүүнү кааласаңыз, React.js сиз үчүн туура тандоо болушу мүмкүн.

Pendahuluan

Баштоодон мурун, компьютериңизге Node.js жана npm (Node Package Manager) орнотулганын текшериңиз. Node.js жана npm абдан маанилүү, анткени алар React.js колдонуп веб-тиркемелерди иштеп чыгуу үчүн керектүү чөйрөнү жана куралдарды камсыз кылат.

1-кадам: React долбоорун баштоо

Жаңы React.js тиркемесин түзүү үчүн, биз баштапкы конфигурацияны минималдаштырган тиркеме түзүү куралы болгон Create React Appти колдоно алабыз. Терминалыңызда же буйрук сабында төмөнкү буйрукту аткарыңыз:

"`баш
npx create-react-app my-app
cd my-app
npm баштоо
""

Бул буйрук `my-app` деп аталган жаңы каталогду түзөт, бардык керектүү көз карандылыктарды жүктөп алып, орнотот жана иштеп чыгуу серверин иштетет. Эми сиз браузерди ачып, демейки React.js тиркемесин көрүү үчүн `http://localhost:3000` дарегине кире аласыз.

2-кадам: Папканын түзүлүшү

Келгиле, Create React App түзгөн папкалардын түзүлүшүн карап көрөлү:

""
менин колдонмом/
├── node_modules/
├── коомдук/
│ └── index.html
── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
── логотип.svg
""

– `node_modules/`: Долбооруңуздун бардык көз карандылыктарын камтыйт.
– `public/`: Тиркеменин кирүү чекити болгон `index.html` файлын кошо алганда, статикалык файлдарды камтыйт.
– `src/`: Убактыңыздын көпчүлүк бөлүгүн кайда өткөрөсүз. React компоненттерин, CSS файлдарын жана башка активдерди камтыйт.

3-кадам: Керексиз файлдарды жок кылуу

Баштоо үчүн, керексиз файлдардын айрымдарын өчүрөлү. `src/` папкасынын ичиндеги `logo.svg` жана `App.test.js` файлдарын өчүрүңүз. Андан кийин, `App.css` жана `index.css` файлдарын ачып, алардын ичиндеги бардык CSS кодун өчүрүп, таза стилдер баракчасын түзүңүз.

4-кадам: Биринчи компонентиңизди түзүү

React.js компонентке негизделген. Компоненттер веб-тиркемеңиздин курулуш материалы болуп саналат. Биринчи компонентибизди түзүү үчүн `App.js` файлын өзгөртүп көрөлү.

`src/App.js` файлын ачып, аны төмөнкү код менен алмаштырыңыз:

"`jsx
Import React from 'react';
импорттоо './App.css';

функция Колдонмо() {
кайтуу (

);
}

демейки колдонмону экспорттоо;
""

JavaScriptтин ичинде HTML сыяктуу синтаксис жазууга мүмкүндүк берген JSX (JavaScript XML) колдонуп, `App.js` ичиндеги React кодун инициализациялаңыз. Өзгөртүүлөрдү сактап, натыйжаларды браузериңизде көрүңүз.

5-кадам: Жаңы компоненттерди кошуу

Эми жаңы компоненттерди кошолу. `src` папкасынын ичинде `components` деп аталган жаңы папка түзүңүз. Андан кийин `components` папкасында `HelloWorld.js` деген жаңы файл түзүңүз.

"`jsx
Import React from 'react';

HelloWorld() функциясы {
кайтуу (

);
}

демейки HelloWorld экспорттоо;
""

`App.js` файлын ачып, биз жаңы эле түзгөн `HelloWorld` компонентин импорттоңуз:

"`jsx
Import React from 'react';
импорттоо './App.css';
'./components/HelloWorld' файлынан HelloWorld файлын импорттоо;

функция Колдонмо() {
кайтуу (

);
}

демейки колдонмону экспорттоо;
""

Эми, `App.js` башкы бетте `HelloWorld` компонентин көрсөтөт.

6-кадам: useState менен абалды башкарууну кошуу

React абалды башкаруу үчүн абдан күчтүү илгичтерге ээ. Келгиле, тиркемебизге бир аз абал кошолу. Мисалы, баскыч басылган сайын көбөйүп турган эсептегичти кошолу.

`HelloWorld.js` файлын ачып, state жана `useState` хоок кошуңуз:

"`jsx
'react'тен React, {useState} импорттоо;

HelloWorld() функциясы {
const [саноо, setCount] = useState(0);

const incrementCount = () => {
setCount(саноо + 1);
}

кайтуу (

);
}

демейки HelloWorld экспорттоо;
""

`count` абалы 0 мааниси менен башталат жана баскыч ар бир басылган сайын `incrementCount` функциясы бул маанини жогорулатат.

7-кадам: Стилдөөнү кошуу

Стилдөөнү кошуу үчүн, биз `App.css` файлында CSSти колдоно алабыз же styled-components сыяктуу CSS-in-JS китепканасын колдоно алабыз. Азырынча стандарттуу CSS менен чектелбейли.

`App.css` файлын ачып, бир аз стилдештирүү кошуңуз:

"`css
.Колдонмо {
текстке тегиздөө: борбор;
}

.Колдонмо-баш аты {
фон түсү: 282c34;
минималдуу бийиктик: 100vh;
дисплей: flex;
ийкемдүү багыт: тилке;
align-content: center;
актоо-мазмуну: борбор;
шрифттин өлчөмү: calc(10px + 2vmin);
Ак түс;
}

баскыч {
толтургучтар: 10px 20px;
маржа-топ: 20px;
арип көлөмү: 16px;
}
""

8-кадам: React Router менен маршруттоону кошуу

Тиркемебиздеги ар кандай барактардын ортосунда навигация кошуу үчүн, биз React Router колдоно алабыз. Төмөнкү буйрукту аткаруу менен React Router орнотуңуз:

"`баш
npm react-router-dom орнотуу
""

Андан кийин, эки жаңы компонент түзүңүз: `components` папкасында `Home.js` жана `About.js`.

`Башкы бет.js`:
"`jsx
Import React from 'react';

функция Башкы бет() {
кайтуу (

);
}

демейки башкы бетти экспорттоо;
""

`About.js`:
"`jsx
Import React from 'react';

функция About() {
кайтуу (

);
}

демейки экспорт жөнүндө;
""

Андан кийин, `App.js` файлын ачып, маршруттоону орнотуңуз:

"`jsx
Import React from 'react';
'react-router-dom'дон {BrowserRouterди Router, Route, Link, Switch катары импорттоо};
импорттоо './App.css';
'./components/HelloWorld' файлынан HelloWorld файлын импорттоо;
'./components/Home'дон Башкы бетти импорттоо;
'./components/About' файлынан About файлын импорттоо;

функция Колдонмо() {
кайтуу (

);
}

демейки колдонмону экспорттоо;
""

Муну менен биз тиркемебиздеги ар кандай барактардын ортосунда негизги навигацияны коштук.

Penutup

Бул React.js колдонуп веб тиркемесин түзүү боюнча негизги окуу куралы. Биз долбоорду орнотууну, компоненттерди түзүүнү, абалды башкарууну, стилдештирүүнү жана маршруттоону карап чыктык. React.js сизге татаалыраак веб тиркемелерди түзүүгө жардам бере турган көптөгөн китепканалар жана куралдар менен бай экосистемага ээ.

Ийгилик каалайм, жана бул окуу куралы сизге React.js менен саякатыңызды баштоого жардам берет деп үмүттөнөм!