Знакомство с React.js
Вот наконец-то мы и добрались до серьезных разговоров. React.js - популярнейшая библиотека для разработки веб-приложений. В последнее время стало каноном использовать React для всего, что хочет в интернет: от сайтов-визиток до полноценной экосистемы с множеством виджетов и микроприложений. С этой статьи мы начнем длинный (я надеюсь, бесконечный) цикл статей про React.js, в котором ты сможешь с нуля познакомиться с данной библиотекой, а в будущем - следить за новыми фишками и подходами в мире React.js.
Подготовка
Я не буду начинать с рассказа про React, как, зачем и где его применять - это всё можно найти в первых двух ссылках в выдаче Google. Мы будем действовать максимально прямолинейно - создадим приложение, разберёмся, что к чему, и будем писать много-много кода.
Сама статья предполагает, что ты уже знаком с Javascript, умеешь верстать с помощью HTML/CSS и готов погружаться в мир серьезной веб-разработки.
- Установленный Node.js (среда выполнения JavaScript-кода, можно скачать тут)
- Редактор кода (рекомендую Visual Studio Code - клик)
- Эта статья и час свободного времени
Если всё это есть на твоём компьютере - мы можем начинать!
Создание приложения
Для начала, убедимся, что у тебя всё готово для работы. Откроем VS Code, внутри, в терминале введем команду
node -v
Если нет никакой ошибки, а в консоли ты видишь номер версии Node.js - то проверяем так же и npm (менеджер пакетов):
npm -v
Аналогично - если видем циферки, значит всё круто, можем создавать наше приложение.
Для создания приложения воспользуемся известным бойлерплейтом (стартовым шаблоном) create-react-app. Этот шаблон позволяет быстро и без лишних настроек перейти непосредственно к написанию приложения. Итак, находясь в нашей папке (которую ты предварительно создал для своего первого проекта), в терминале мы пишем следующую команду:
npx create-react-app first-app
- npx - утилита для запуска npm-пакетов
- create-react-app - пакет, реализующий стартовый шаблон React.js
- first-app - имя твоего приложения (можешь выбрать любое)
После установки приложения, у тебя появится папка с твоим проектом, примерно следующей структуры:
Чуть ниже по статье мы рассмотрим все файлы и папки, уберем все ненужное и напишем самостоятельно первое приложение, а пока что, давай наконец запустим наш сервер разработки и посмотрим, что получится. Открываем в консоли папку с нашим приложением и пишем:
npm start
Данная команда запускает Node.js сервер, на котором будет разворачиваться твоё приложение. После запуска - заходим на http://localhost:3000 и видим стартовую страницу create-react-app:
Окей, с этим разобрались. Теперь, давай посмотрим, что у нас есть в папке проекта.
Структура папок
node_modules
Самая первая и самая большая папка - это node_modules. На ней мы пока что не будем заострять внимание, скажу лишь, что это системная папка, в которой хранятся все используемые пакеты и модули для работы React-приложения.
public
Далее - папка public. В этой папке у нас лежат ресурсы нашего приложения.
- favicon.ico - фавиконка для веб-странички
- index.html - непосредственно, веб-страница, в которую React.js будет рендерить наше приложение.
- manifest.json - общая конфигурация твоего сайта. Там можно хранить разную информацию об авторе, версии, теме, ресурсах и т.д. Подробнее про манифесты можно прочитать тут, мы не будем сильно заострять на этом внимание (пока что).
- robots.txt - так же, системный файл, необходимый для корректной индексации твоего сайта роботами.
Также, в этой папке можно нужно хранить статические ресурсы, такие как изображения, видео, документы, которые используются твоим приложением.
src
Это - самая главная и интересная папка. В ней находится точка входа в React-приложение и все его компоненты. Именно в этой папке ты будешь работать большую часть времени. Давай для начала приведём ее в надлежащий вид:
На данном этапе, нам не нужны тесты, веб-воркеры и отдельные CSS-модули. Оставляем только index.js - точка входа в приложение, App.js - главный компонент твоего приложения и index.css - глобальный файл стилей. Так же добавляем две новые папки: components - для хранения наших компонентов, pages - для хранения страниц. К этим папкам мы обязательно вернемся в следующих уроках, на данном этапе они нам не понадобятся.
Hello, World!
Теперь, для того чтобы наше приложение не падало с ошибкой - уберем все лишнее.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);const App = () => {
return <div className="App"></div>;
}
export default App;index.css пока можно оставить пустым.
Сейчас, если ты откроешь браузер - ты увидишь пустой белый экран. Давай это исправим, и, по классике, напишем "Hello, World!" посередине нашей страницы.
Для этого, в файле App.js нам надо добавить контейнер для нашей фразы и вписать её внутрь:
const App = () => {
return (
<div className="App">
<div className="container">Hello, World!</div>
</div>
);
};
export default App;Обрати внимание, в синтаксисе JSX (расширение синтаксиса JavaScript для работы со стеком HTML/CSS/JavaScript в одном файле) имена классов для элементов обозначаются словом "className".
Так же, в наш пустой index.css добавим стили для контейнера:
* {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: black;
color: #efab2b;
font-size: 5rem;
display: flex;
align-items: center;
justify-content: center;
}
Итог
В этой статье мы с тобой развернули сервер разработки и написали наше первое приложение на React.js. Неплохой результат для небольшой статьи.
В следующих статьях мы глубже познакомимся с экосистемой React.js, научимся использовать композицию компонентов для создания удобного и красивого интерфейса и для правильно организации кода, начнём понимать философию React.js и продолжим совершенствовать наше приложение.
Подписывайся на канал, чтобы не пропускать выход новый статей, ставь лайки, зови друзей - давай создавать комьюнити вместе!