Урок за създаване на уеб приложение с помощта на React.js

React.js е популярна библиотека за front-end разработка, използвана за изграждане на интерактивни потребителски интерфейси (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 създаване на приложение за реакция моето приложение
cd моето приложение
npm старт
„„

Тази команда ще създаде нова директория с име `my-app`, ще изтегли и инсталира всички необходими зависимости и ще стартира сървъра за разработка. Сега можете да отворите браузър и да посетите `http://localhost:3000`, за да видите приложението React.js по подразбиране.

Стъпка 2: Структура на папките

Нека да разгледаме структурата на папките, създадена от Create React App:

„„
моето приложение/
├── модули_на_възлите/
├── публичен/
│ └── индекс.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` и го заменете със следния код:

„`jsx
импортиране на React от 'react';
импортиране на './App.css';

функция App() {
връщане (

);
}

експортиране на приложение по подразбиране;
„„

Инициализирайте React кода в `App.js`, използвайки JSX (JavaScript XML), което ни позволява да пишем HTML-подобен синтаксис в JavaScript. Запазете промените си и вижте резултатите в браузъра си.

Стъпка 5: Добавяне на нови компоненти

Сега нека добавим някои нови компоненти. Създайте нова папка с име `components` в папката `src`. След това създайте нов файл `HelloWorld.js` в папката `components`.

„`jsx
импортиране на React от 'react';

функция HelloWorld() {
връщане (

);
}

експортиране по подразбиране HelloWorld;
„„

Отворете `App.js` и импортирайте компонента `HelloWorld`, който току-що създадохме:

„`jsx
импортиране на React от 'react';
импортиране на './App.css';
импортиране на HelloWorld от './components/HelloWorld';

функция App() {
връщане (

);
}

експортиране на приложение по подразбиране;
„„

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

Стъпка 6: Добавяне на управление на състоянието с useState

React има много мощни куки за управление на състоянието. Нека добавим състояние към нашето приложение. Например, нека добавим брояч, който се увеличава всеки път, когато се щракне върху бутон.

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

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

функция HelloWorld() {
const[брой, setCount] = useState(0);

const incrementCount = () => {
setCount(брой + 1);
}

връщане (

);
}

експортиране по подразбиране HelloWorld;
„„

Състоянието `count` се инициализира със стойност 0 и всеки път, когато бутонът бъде щракнат, функцията `incrementCount` ще увеличава тази стойност.

Стъпка 7: Добавяне на стил

За да добавим стил, можем да използваме CSS във файла `App.css` или можем да използваме CSS-in-JS библиотека, като например styled-components. Нека засега се придържаме към стандартния CSS.

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

„css“
.App {
текст-подравняване: център;
}

.App-заглавка {
цвят на фона: 282c34;
минимална височина: 100vh;
дисплей: Flex;
flex-direction: колона;
подравняване-елементи: център;
justify-content: център;
размер на шрифта: calc(10px + 2vmin);
цвят: бял;
}

бутон {
подложка: 10px 20px;
долна граница: 20px;
размер на шрифта: 16px;
}
„„

Стъпка 8: Добавяне на маршрутизация с React Router

За да добавим навигация между различните страници в нашето приложение, можем да използваме React Router. Инсталирайте React Router, като изпълните следната команда:

„баш“
npm инсталирате реагира-рутер-дом
„„

След това създайте два нови компонента: `Home.js` и `About.js` в папката `components`.

`Home.js`:
„`jsx
импортиране на React от 'react';

функция Начало() {
връщане (

);
}

експортиране по подразбиране Начало;
„„

`About.js`:
„`jsx
импортиране на React от 'react';

функция About() {
връщане (

);
}

експортиране по подразбиране Относно;
„„

След това отворете `App.js` и настройте маршрутизацията:

„`jsx
импортиране на React от 'react';
импортиране { BrowserRouter като рутер, маршрут, връзка, комутатор } от 'react-router-dom';
импортиране на './App.css';
импортиране на HelloWorld от './components/HelloWorld';
импортиране на Начало от './components/Home';
импортиране на „Относно“ от „./components/About“;

функция App() {
връщане (

);
}

експортиране на приложение по подразбиране;
„„

С това добавихме основна навигация между различните страници в нашето приложение.

Затваряне

Това е основен урок за създаване на уеб приложение с помощта на React.js. Разгледахме настройката на проекта, създаването на компоненти, управлението на състоянията, стилизирането и маршрутизирането. React.js има богата екосистема с множество библиотеки и инструменти, които могат да ви помогнат да изградите по-сложни уеб приложения.

Успех и се надявам, че този урок ще ви помогне да започнете своето пътешествие с React.js!