Учебное пособие по созданию веб-приложения с использованием React.js

React.js — популярная библиотека для фронтенд-разработки, используемая для создания интерактивных пользовательских интерфейсов (UI). Разработанная Facebook, библиотека React.js используется многими крупными компаниями, включая Instagram, Airbnb и WhatsApp. Если вы хотите создавать эффективные, быстрые и адаптивные веб-приложения , React.js может стать для вас правильным выбором.

Пендаулуан

Прежде чем начать, убедитесь, что на вашем компьютере установлены Node.js и npm (менеджер пакетов Node). Node.js и npm необходимы, поскольку они предоставляют среду и инструменты, необходимые для разработки веб-приложений с использованием React.js.

Шаг 1: Инициализация проекта React

Для создания нового приложения React.js можно использовать Create React App — инструмент для создания приложений, который сводит к минимуму начальную настройку. Выполните следующую команду в терминале или командной строке:

«баш»
npx создать-реагировать-приложение мое-приложение
cd мое приложение
начало вечера
«`

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

Шаг 2: Структура папок

Давайте посмотрим на структуру папок, созданную Create React App:

«`
мое-приложение/
├── node_modules/
├── публичный/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.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 из «реагировать»;
импортировать './App.css';

приложение функции () {
возвращение (

);
}

приложение по умолчанию для экспорта;
«`

Инициализируйте код React в файле `App.js` с помощью JSX (JavaScript XML), что позволяет писать синтаксис, похожий на HTML, внутри JavaScript. Сохраните изменения и просмотрите результат в браузере.

Шаг 5: Добавление новых компонентов

Теперь добавим несколько новых компонентов. Создайте новую папку с именем `components` внутри папки `src`. Затем создайте новый файл `HelloWorld.js` в папке `components`.

«`jsx
импортировать React из «реагировать»;

function HelloWorld() {
возвращение (

);
}

export default HelloWorld;
«`

Откройте файл `App.js` и импортируйте только что созданный компонент `HelloWorld`:

«`jsx
импортировать React из «реагировать»;
импортировать './App.css';
import HelloWorld from './components/HelloWorld';

приложение функции () {
возвращение (

);
}

приложение по умолчанию для экспорта;
«`

Теперь файл `App.js` отображает компонент `HelloWorld` на главной странице.

Шаг 6: Добавление управления состоянием с помощью useState

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

Откройте файл `HelloWorld.js` и добавьте хук `state` и `useState`:

«`jsx
импортировать React, {useState} из «реагировать»;

function HelloWorld() {
const [количество, setCount] = useState (0);

const incrementCount = () => {
setCount (количество + 1);
}

возвращение (

);
}

export default HelloWorld;
«`

Состояние `count` инициализируется значением 0, и при каждом нажатии кнопки функция `incrementCount` будет увеличивать это значение.

Шаг 7: Добавление стиля

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

Откройте файл `App.css` и добавьте несколько стилей:

«`css
.Приложение {
выравнивания текста: центр;
}

.App-header {
background-color: 282c34;
мин. высота: 100vh;
дисплей: гибкий;
flex-direction: столбец;
align-items: center;
выравнивание содержимого: по центру;
font-size: calc(10px + 2vmin);
белый цвет;
}

кнопка {
обивка: 10px 20px;
Верхнее поле: 20px;
размер шрифта: 16px;
}
«`

Шаг 8: Добавление маршрутизации с помощью React Router

Для добавления навигации между различными страницами нашего приложения мы можем использовать React Router. Установите React Router, выполнив следующую команду:

«баш»
npm установить реакцию-маршрутизатор-дом
«`

Затем создайте два новых компонента: `Home.js` и `About.js` в папке `components`.

`Home.js`:
«`jsx
импортировать React из «реагировать»;

функция Дом () {
возвращение (

);
}

экспортировать домашнюю страницу по умолчанию;
«`

`About.js`:
«`jsx
импортировать React из «реагировать»;

функция О () {
возвращение (

);
}

экспортировать по умолчанию О программе;
«`

Далее откройте файл `App.js` и настройте маршрутизацию:

«`jsx
импортировать React из «реагировать»;
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
импортировать './App.css';
import HelloWorld from './components/HelloWorld';
импортировать Home из './comments/Home';
импортировать «О программе» из «./компоненты/О программе»;

приложение функции () {
возвращение (

);
}

приложение по умолчанию для экспорта;
«`

Таким образом, мы добавили базовую навигацию между различными страницами нашего приложения.

обложка

Это базовый урок по созданию веб-приложения с использованием React.js. Мы рассмотрели настройку проекта, создание компонентов, управление состоянием, стилизацию и маршрутизацию. React.js обладает богатой экосистемой с многочисленными библиотеками и инструментами, которые помогут вам создавать более сложные веб-приложения.

Удачи, и я надеюсь, что этот урок поможет вам начать ваше путешествие с React.js!