React.js көмегімен веб-қосымшаны құру бойынша оқулық

React.js - интерактивті пайдаланушы интерфейстерін (UI) құру үшін қолданылатын танымал фронтенд әзірлеу кітапханасы. Facebook әзірлеген React.js бағдарламасын Instagram, Airbnb және WhatsApp сияқты көптеген ірі компаниялар пайдаланды. Егер сіз тиімді, жылдам және жауап беретін веб-қосымшалар құрғыңыз келсе, React.js сіз үшін дұрыс таңдау болуы мүмкін.

Пендахулуан

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

1-қадам: React жобасын іске қосу

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

«`баш
npx create-react-app менің қолданбам
cd менің қолданбам
npm басталады
««

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

2-қадам: Қалта құрылымы

Create React қолданбасы жасаған қалта құрылымын қарастырайық:

««
менің қолданбам/
├── 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
'react' файлынан React импорттау;
импорттау './App.css';

функциясы App() {
қайтару (

);
}

әдепкі қолданбаны экспорттау;
««

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

5-қадам: Жаңа компоненттерді қосу

Енді жаңа компоненттерді қосайық. `src` қалтасының ішінде `components` деп аталатын жаңа қалта жасаңыз. Содан кейін `components` қалтасында `HelloWorld.js` жаңа файлын жасаңыз.

«`jsx
'react' файлынан React импорттау;

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

);
}

әдепкі HelloWorld экспорттау;
««

«App.js» файлын ашып, жаңа ғана жасаған «HelloWorld» компонентін импорттаңыз:

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

функциясы App() {
қайтару (

);
}

әдепкі қолданбаны экспорттау;
««

Енді `App.js` басты бетте `HelloWorld` компонентін көрсетеді.

6-қадам: useState көмегімен күйді басқаруды қосу

React күйді басқаруға арналған өте қуатты ілмектермен жабдықталған. Қолданбамызға күй қосайық. Мысалы, әр түйме басылған сайын артатын санауыш қосайық.

`HelloWorld.js` файлын ашып, state және `useState` ілмегін қосыңыз:

«`jsx
'react' файлынан React, {useState} импорттау;

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

const incrementCount = () => {
setCount(count + 1);
}

қайтару (

);
}

әдепкі HelloWorld экспорттау;
««

`count` күйі 0 мәнімен инициализацияланады және түйме басылған сайын `incrementCount` функциясы бұл мәнді арттырады.

7-қадам: Сәндеуді қосу

Стильдеу үшін `App.css` файлында CSS қолдана аламыз немесе styled-components сияқты CSS-in-JS кітапханасын пайдалана аламыз. Әзірге стандартты CSS-пен тоқталайық.

«App.css» файлын ашып, кейбір стильдерді қосыңыз:

«`css
.Қолданба {
мәтінді туралау: орталық;
}

.Қолданба тақырыбы {
фон түсі: 282c34;
минималды биіктік: 100 В/сағ;
дисплей: икемді;
икемді бағыт: баған;
align-items: орталық;
ақтау-мазмұны: орталық;
қаріп өлшемі: calc(10px + 2vmin);
түс: ақ;
}

түймесі {
толтыру: 10px 20px;
margin-top: 20px;
қаріп өлшемі: 16px;
}
««

8-қадам: React Router көмегімен маршруттауды қосу

Қолданбамыздағы әртүрлі беттер арасында шарлау қосу үшін React Router бағдарламасын пайдалана аламыз. React Router бағдарламасын келесі пәрменді орындау арқылы орнатыңыз:

«`баш
npm реактивті маршрутизатор-дом орнату
««

Содан кейін, `components` қалтасында екі жаңа компонент жасаңыз: `Home.js` және `About.js`.

`Home.js`:
«`jsx
'react' файлынан React импорттау;

функция Home() {
қайтару (

);
}

әдепкі басты бетті экспорттау;
««

`About.js`:
«`jsx
'react' файлынан React импорттау;

функциясы About() {
қайтару (

);
}

экспорттау әдепкі туралы;
««

Келесі, `App.js` файлын ашып, маршруттауды орнатыңыз:

«`jsx
'react' файлынан React импорттау;
'react-router-dom' файлынан {BrowserRouter-ді маршрутизатор, маршрут, сілтеме, ауысу ретінде импорттау};
импорттау './App.css';
'./components/HelloWorld' файлынан HelloWorld файлын импорттау;
'./components/Home' файлынан үйді импорттау;
'./components/About' файлынан About файлын импорттау;

функциясы App() {
қайтару (

);
}

әдепкі қолданбаны экспорттау;
««

Осы арқылы біз қолданбамыздағы әртүрлі беттер арасында негізгі навигацияны қостық.

Жабу

Бұл React.js көмегімен веб-қосымшаны құрудың негізгі оқулығы. Біз жобаны орнатуды, компоненттерді жасауды, күйді басқаруды, стильдеуді және маршруттауды қарастырдық. React.js күрделі веб-қосымшаларды құруға көмектесетін көптеген кітапханалар мен құралдарға ие бай экожүйеге ие.

Сәттілік тілеймін, және бұл оқулық сізге React.js-пен саяхатыңызды бастауға көмектеседі деп үміттенемін!