Пошаговое руководство по созданию первого приложения на React

Для кого эта статья:

• Новички в веб-разработке, желающие изучить React
• Люди, заинтересованные в смене карьеры на разработку

• Студенты курсов по программированию и веб-разработке

  Первое приложение на React — это как первый прыжок с парашютом: страшно, но когда сделаешь, спрашиваешь себя "и чего я боялся?" React революционизировал фронтенд-разработку своим компонентным подходом и виртуальным DOM. Сегодня я проведу вас через создание вашего первого React-приложения — без лишней теории и сложностей. Просто чистая практика, которая даст вам фундамент для дальнейшего роста. Поехали! 🚀

Думаете, научиться React сложно? В Skypro на курсе веб-разработки студенты создают первое React-приложение уже на второй неделе модуля! Никакой сухой теории — только практика под руководством действующих разработчиков. Вы не просто выучите синтаксис, а научитесь мыслить компонентами и строить современные интерфейсы с нуля. От новичка до junior-разработчика за 9 месяцев!

Что такое React и почему его стоит изучать

React — это JavaScript-библиотека для создания пользовательских интерфейсов, разработанная инженерами Facebook (ныне под другим названием). Ключевая особенность React — компонентный подход, позволяющий разбить интерфейс на независимые, переиспользуемые части, которыми легче управлять.

Почему именно React стоит выбрать для изучения? Ответ прост: это не просто модная технология, а инструмент, который кардинально меняет подход к разработке.

Антон Петров, Senior Frontend Developer

Когда я начинал свой путь в веб-разработке, я потратил месяцы на изучение jQuery и vanilla JavaScript. Моим первым серьёзным проектом была простая страница учёта расходов. Казалось бы, что может быть проще? Но уже на середине разработки мой код превратился в запутанный клубок обработчиков событий и обновлений DOM.

Когда я переписал тот же проект на React, код сократился втрое, а логика стала кристально ясной. Если бы я начал с React, это сэкономило бы мне недели работы и тонны нервов. Именно поэтому я рекомендую новичкам не повторять мой путь и сразу начинать с современных инструментов.

Давайте посмотрим на ключевые преимущества React, которые делают его отличным выбором для новичков:

React использует JSX — расширение синтаксиса JavaScript, позволяющее писать HTML-подобный код прямо внутри JavaScript. Это делает ваш код более читабельным и интуитивно понятным:

// Традиционный JavaScript
const element = document.createElement('div');
element.className = 'greeting';
element.textContent = 'Привет, мир!';

// React с JSX
const element = <div className="greeting">Привет, мир!</div>;

К тому же, React активно развивается и внедряет новые концепции, такие как хуки (введены в 2019 году), которые делают управление состоянием и побочными эффектами еще проще. 🔄

Настройка окружения для пошагового создания React-приложения

Прежде чем погрузиться в кодинг, нам необходимо настроить рабочее окружение. К счастью, команда React создала инструмент Create React App (CRA), который автоматизирует процесс настройки проекта.

Для начала вам потребуются следующие инструменты:

• Node.js и npm — платформа для выполнения JavaScript-кода и менеджер пакетов
• Редактор кода — рекомендую Visual Studio Code с расширениями для React
• Терминал — встроенный в VS Code или системный

Установка Node.js и npm:

1. Перейдите на официальный сайт Node.js (nodejs.org)
2. Скачайте и установите LTS-версию (Long Term Support)
3. Проверьте установку, выполнив в терминале команды:

node -v
npm -v

Если вы видите номера версий, значит всё установлено корректно. 👍

Теперь давайте создадим наше первое React-приложение с помощью Create React App:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

После выполнения этих команд в вашем браузере должна автоматически открыться страница с логотипом React по адресу http://localhost:3000. Если это произошло — поздравляю, ваше первое React-приложение запущено! 🎉

Мария Соколова, Frontend-наставник

Один из моих студентов, Дмитрий, долго не мог настроить окружение для React. Каждый раз при запуске приложения он получал загадочные ошибки. Оказалось, что у него была устаревшая версия Node.js (6.x), несовместимая с современным React.

После обновления Node.js до версии 14 LTS все заработало мгновенно. Этот случай научил меня всегда начинать диагностику проблем с проверки версий используемых инструментов. Если у вас что-то не работает при первом запуске React-приложения, первым делом проверьте версию Node.js и npm!

Вот сравнение различных способов инициализации React-проекта:

Для нашего первого приложения я рекомендую использовать именно Create React App, так как он избавляет нас от необходимости настраивать webpack, Babel и другие инструменты, позволяя сосредоточиться на написании кода React. 🛠️

Структура базового проекта React для новичков

После успешного создания проекта с помощью Create React App, давайте разберем, что же находится внутри. Структура директорий вашего нового проекта должна выглядеть примерно так:

my-first-react-app/
├── node_modules/
├── public/
│ ├── favicon.ico
│ ├── index.html
│ └── ...
├── src/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── ...
├── .gitignore
├── package.json
├── README.md
└── ...

Давайте разберем ключевые файлы и директории:

• node_modules/ — папка с установленными зависимостями проекта (никогда не редактируйте её вручную)
• public/ — содержит статические файлы, включая главный HTML-файл index.html
• src/ — здесь находится весь исходный код вашего приложения
• package.json — содержит информацию о проекте, его зависимостях и доступных скриптах

Особое внимание следует уделить папке src/, так как именно там мы будем писать код нашего приложения. Ключевые файлы в этой директории:

• index.js — точка входа в приложение, где происходит рендеринг корневого компонента
• App.js — главный компонент, который мы будем модифицировать
• *.css файлы — стили для компонентов

Давайте взглянем на содержимое файла index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

// Если хотите измерять производительность вашего приложения
reportWebVitals();

Этот код делает следующее:

1. Импортирует необходимые зависимости
2. Создаёт корневой элемент для рендеринга React-приложения
3. Отрисовывает компонент App внутри элемента с id "root" (он находится в public/index.html)

А теперь взглянем на файл App.js — это наш главный компонент:

import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;

Здесь мы видим функциональный компонент App, который возвращает JSX-разметку. Это и есть то, что вы видите при запуске приложения. 🖥️

Для начала работы над своим проектом я рекомендую очистить App.js и начать с чистого листа:

import './App.css';

function App() {
return (
<div className="App">
<h1>Моё первое React-приложение</h1>
</div>
);
}

export default App;

После сохранения файла вы должны увидеть изменения в браузере благодаря встроенному механизму горячей перезагрузки (Hot Module Replacement). 🔄

Создание первого компонента и управление состоянием

Теперь, когда мы понимаем структуру проекта, давайте создадим наш первый интерактивный компонент — простой счётчик. Этот пример позволит нам изучить основы работы с состоянием в React.

В React существует два типа компонентов:

• Функциональные компоненты — простые функции, возвращающие JSX
• Классовые компоненты — классы, расширяющие React.Component

С введением хуков в React 16.8 функциональные компоненты стали предпочтительным способом создания компонентов, поэтому мы будем использовать именно их. 💡

Создадим новый файл Counter.js в папке src/:

import { useState } from 'react';

function Counter() {
// Инициализируем состояние count с начальным значением 0
const [count, setCount] = useState(0);

// Функции для изменения состояния
const increment = () => {
setCount(count + 1);
};

const decrement = () => {
setCount(count – 1);
};

const reset = () => {
setCount(0);
};

return (
<div>
<h2>Счётчик: {count}</h2>
<button onClick={decrement}>-</button>
<button onClick={reset}>Сбросить</button>
<button onClick={increment}>+</button>
</div>
);
}

export default Counter;

Здесь мы используем хук useState — один из основных хуков React, который позволяет добавить состояние к функциональному компоненту.

Давайте разберём, как работает useState:

1. const [count, setCount] = useState(0) — мы объявляем переменную состояния count с начальным значением 0
2. setCount — это функция, которая позволяет изменять значение count
3. Когда мы вызываем setCount с новым значением, React автоматически перерисовывает компонент с обновлённым состоянием

Теперь импортируем наш компонент Counter в App.js:

import './App.css';
import Counter from './Counter';

function App() {
return (
<div className="App">
<h1>Моё первое React-приложение</h1>
<Counter />
</div>
);
}

export default App;

После сохранения вы должны увидеть счётчик с тремя кнопками на странице. Нажимая на кнопки, вы увеличиваете, уменьшаете или сбрасываете значение счётчика. 🧮

Вот как хук useState сравнивается с другими способами управления состоянием в React:

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

Финальные штрихи и запуск вашего первого приложения

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

Сначала давайте создадим простой стиль для нашего счетчика. Создайте файл Counter.css в папке src/:

.counter {
margin: 2rem auto;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
max-width: 400px;
text-align: center;
background-color: #f9f9f9;
}

.counter h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #333;
}

.counter-value {
font-size: 3rem;
font-weight: bold;
color: #2c3e50;
margin: 1rem 0;
}

.counter-buttons {
display: flex;
justify-content: center;
gap: 0.5rem;
}

button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}

button:hover {
background-color: #45a049;
}

button:nth-child(1) {
background-color: #f44336;
}

button:nth-child(1):hover {
background-color: #d32f2f;
}

button:nth-child(2) {
background-color: #2196F3;
}

button:nth-child(2):hover {
background-color: #1976D2;
}

Теперь обновим наш компонент Counter.js, чтобы использовать новые стили:

import { useState } from 'react';
import './Counter.css';

function Counter() {
const [count, setCount] = useState(0);

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

const decrement = () => {
setCount(count – 1);
};

const reset = () => {
setCount(0);
};

return (
<div className="counter">
<h2>Счётчик</h2>
<div className="counter-value">{count}</div>
<div className="counter-buttons">
<button onClick={decrement}>-</button>
<button onClick={reset}>Сбросить</button>
<button onClick={increment}>+</button>
</div>
</div>
);
}

export default Counter;

Теперь давайте создадим ещё один компонент, который будет показывать статус счётчика. Создайте файл CounterStatus.js:

function CounterStatus({ count }) {
let status;

if (count === 0) {
status = "Счётчик равен нулю";
} else if (count > 0) {
status = "Счётчик положительный";
} else {
status = "Счётчик отрицательный";
}

return (
<div className="counter-status">
<p>{status}</p>
</div>
);
}

export default CounterStatus;

Обратите внимание на синтаксис { count } в параметрах функции — это деструктуризация объекта props, которая позволяет нам напрямую получить значение count.

Теперь обновим наш компонент Counter.js, чтобы включить CounterStatus:

import { useState } from 'react';
import './Counter.css';
import CounterStatus from './CounterStatus';

function Counter() {
const [count, setCount] = useState(0);

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

const decrement = () => {
setCount(count – 1);
};

const reset = () => {
setCount(0);
};

return (
<div className="counter">
<h2>Счётчик</h2>
<div className="counter-value">{count}</div>
<CounterStatus count={count} />
<div className="counter-buttons">
<button onClick={decrement}>-</button>
<button onClick={reset}>Сбросить</button>
<button onClick={increment}>+</button>
</div>
</div>
);
}

export default Counter;

Мы передаем значение count в компонент CounterStatus через пропсы. Это один из основных способов коммуникации между компонентами в React. 🔄

Давайте подведём итог того, что мы узнали:

1. Как настроить окружение для разработки на React
2. Структуру базового React-проекта
3. Как создать функциональный компонент
4. Как управлять состоянием с помощью хука useState
5. Как стилизовать компоненты
6. Как передавать данные между компонентами с помощью пропсов

Для публикации вашего приложения вы можете использовать команду:

npm run build

Эта команда создаст оптимизированную версию вашего приложения в папке build/, которую можно развернуть на любом веб-сервере. 🚀

Для быстрого деплоя можно воспользоваться сервисами:

• GitHub Pages — бесплатный хостинг для статических сайтов
• Netlify — предоставляет бесплатный тариф с автоматическим деплоем из репозитория
• Vercel — специализируется на хостинге React-приложений

Поздравляю! Вы создали своё первое React-приложение. Это только начало вашего пути в мир современной веб-разработки. 🎯

React — лишь первая ступень в освоении современного фронтенда. Освоив создание базовых компонентов, вы открываете дверь к разработке полноценных веб-приложений. Следующий шаг — изучение управления сложными состояниями, маршрутизации и взаимодействия с API. Не бойтесь экспериментировать — каждая строчка написанного кода приближает вас к мастерству. И помните: даже опытные разработчики начинали с простого счётчика!