Водич за креирање веб апликације помоћу React.js-а

React.js је популарна библиотека за развој фронт-енда која се користи за изградњу интерактивних корисничких интерфејса (UI). Развијен од стране Фејсбука, 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, алатку за креирање апликација која минимизира почетну конфигурацију. Покрените следећу команду у терминалу или командној линији:

„`басх
нпк цреате-реацт-апп ми-апп
цд моја апликација
нпм старт
„`

Ова команда ће креирати нови директоријум под називом `my-app`, преузети и инсталирати све потребне зависности и покренути развојни сервер. Сада можете отворити прегледач и приступити `http://localhost:3000` да бисте видели подразумевану React.js апликацију.

Корак 2: Структура фасцикли

Хајде да погледамо структуру фасцикли коју је креирала апликација Create React:

„`
моја-апликација/
├── модули_чворова/
├── јавно/
│ └── index.html
└── извор/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── лого.svg
„`

– `node_modules/`: Садржи све зависности вашег пројекта.
– `public/`: Садржи статичке датотеке, укључујући `index.html` која је улазна тачка апликације.
– `src/`: Где ћете проводити највише времена. Садржи React компоненте, CSS датотеке и друге ресурсе.

Корак 3: Брисање непотребних датотека

Да бисмо почели са чистим листом стилова, обришимо неке непотребне датотеке. Обришимо `logo.svg` и `App.test.js` унутар фолдера `src/`. Затим, отворите `App.css` и `index.css`, бришући сав CSS код унутар њих да бисмо почели са чистим стилским листом.

Корак 4: Креирање ваше прве компоненте

React.js је базиран на компонентама. Компоненте су градивни блокови ваше веб апликације. Хајде да модификујемо `App.js` да бисмо креирали нашу прву компоненту.

Отворите `src/App.js` и замените га следећим кодом:

“`јск
импорт Реацт фром 'реацт';
импорт './Апп.цсс';

фунцтион Апп() {
повратак (

);
}

извоз подразумеване апликације;
„`

Иницијализујте React код унутар `App.js` користећи JSX (JavaScript XML), што нам омогућава да пишемо HTML-сличну синтаксу унутар JavaScript-а. Сачувајте измене и погледајте резултате у прегледачу.

Корак 5: Додавање нових компоненти

Сада додајмо неке нове компоненте. Направите нову фасциклу под називом `components` унутар фасцикле `src`. Затим направите нову датотеку `HelloWorld.js` у фасцикли `components`.

“`јск
импорт Реацт фром 'реацт';

функција ЗдравоСвет() {
повратак (

);
}

извоз подразумеваног HelloWorld-а;
„`

Отворите `App.js` и увезите компоненту `HelloWorld` коју смо управо креирали:

“`јск
импорт Реацт фром 'реацт';
импорт './Апп.цсс';
увези ЗдравоВорлд из './components/HelloWorld';

фунцтион Апп() {
повратак (

);
}

извоз подразумеване апликације;
„`

Сада, `App.js` приказује компоненту `HelloWorld` на главној страници.

Корак 6: Додавање управљања стањем помоћу useState

React има веома моћне „hooks“-ове за управљање стањем. Хајде да додамо неко стање нашој апликацији. На пример, додајмо бројач који се повећава сваки пут када се кликне на дугме.

Отворите `HelloWorld.js` и додајте state и `useState` hook:

“`јск
импорт Реакт, { useState } из 'реакт';

функција ЗдравоСвет() {
цонст [цоунт, сетЦоунт] = усеСтате(0);

const incrementCount = () => {
сетБрој(број + 1);
}

повратак (

);
}

извоз подразумеваног HelloWorld-а;
„`

Стање `count` је иницијализовано вредношћу 0, и сваки пут када се кликне на дугме, функција `incrementCount` ће повећати ову вредност.

Корак 7: Додавање стила

Да бисмо додали стил, можемо користити CSS у датотеци `App.css` или можемо користити CSS-in-JS библиотеку као што је styled-components. За сада ћемо се држати стандардног CSS-а.

Отворите `App.css` и додајте стил:

“`цсс
.Апликација {
поравнање текста: центар;
}

.App-header {
боја-позадине: 282c34;
мин-висина: 100vh;
дисплеј: флек;
флек-правац: колона;
алигн-итемс: центар;
јустифи-цонтент: центар;
величина фонта: calc(10px + 2vmin);
бела боја;
}

дугме {
паддинг: КСНУМКСпк КСНУМКСпк;
маргин-топ: КСНУМКСпк;
фонт-сизе: КСНУМКСпк;
}
„`

Корак 8: Додавање рутирања помоћу React Router-а

Да бисмо додали навигацију између различитих страница у нашој апликацији, можемо користити React Router. Инсталирајте React Router покретањем следеће команде:

„`басх
нпм инсталл реацт-роутер-дом
„`

Затим, креирајте две нове компоненте: `Home.js` и `About.js` у фолдеру `components`.

`Home.js`:
“`јск
импорт Реацт фром 'реацт';

функција Почетна() {
повратак (

);
}

извоз подразумеване Почетна;
„`

`About.js`:
“`јск
импорт Реацт фром 'реацт';

функција About() {
повратак (

);
}

извоз подразумеваних података О нама;
„`

Затим, отворите `App.js` и подесите рутирање:

“`јск
импорт Реацт фром 'реацт';
импорт { BrowserRouter као рутер, рута, линк, прекидач } из 'react-router-dom';
импорт './Апп.цсс';
увези ЗдравоВорлд из './components/HelloWorld';
увези Почетну из './components/Home';
увези О нама из './components/About';

фунцтион Апп() {
повратак (

);
}

извоз подразумеване апликације;
„`

Овим смо додали основну навигацију између различитих страница у нашој апликацији.

Пенутуп

То је основни туторијал за креирање веб апликације користећи React.js. Обрадили смо подешавање пројекта, креирање компоненти, управљање стањем, стилизовање и рутирање. React.js има богат екосистем са бројним библиотекама и алатима који вам могу помоћи у изградњи сложенијих веб апликација.

Срећно, и надам се да ће вам овај туторијал помоћи да започнете своје путовање са React.js!