Проект блога на React

В этой главе вы с нуля, используя Vite, создадите проект блога на React, а также разберётесь в синтаксисе JSX и структуре проекта.

Настройка окружения

Перед началом убедитесь, что на вашем компьютере установлен Node.js (рекомендуется версия v16 или более поздняя).

Node.js — это среда выполнения JavaScript, а npm — встроенный в неё менеджер пакетов.

Проверьте, установлен ли Node.js

$ node -v
v20.10.0

Если отображается номер версии, значит, он установлен.

Если нет, перейдите наnodejs.orgи скачайте версию LTS, затем установите её.

Создайте проект React

Vite — один из самых быстрых современных инструментов сборки для фронтенда с нативной поддержкой React.

В терминале перейдите в каталог, где вы хотите хранить проект, и выполните:

$ npm create vite@latest blog-app -- --template react

Эта команда говорит Vite создать проект с именем blog-app, используя шаблон React.

Перейдите в каталог проекта, установите зависимости и запустите сервер разработки:

$ cd blog-app
$ npm install
$ npm run dev

Браузер автоматически откроет http://localhost:5173. Если вы видите стандартную приветственную страницу Vite + React, значит проект успешно запустился.

Если при запуске появляется ошибка об отсутствующих зависимостях, попробуйте выполнитьnpm installзатем запустите снова.

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

Откройте папку blog-app, и вы увидите следующую структуру:

blog-app/
├── index.html              # 入口 HTML 文件
├── package.json            # 项目配置与依赖列表
├── vite.config.js          # Vite 构建工具配置
├── public/                 # 不经过编译的静态资源
├── src/
│   ├── main.jsx            # JS 入口，将 React 组件挂载到 DOM
│   ├── App.jsx             # 根组件，所有页面的外壳
│   ├── App.css             # App 组件的样式
│   ├── index.css           # 全局样式
│   └── assets/             # 需要编译的静态资源（图片等）

Назначение основных файлов

index.html— входной файл, к которому обращается браузер.

Он содержит<div id="root"></div>, и приложение React монтируется в этот div.

src/main.jsx— стартовый файл приложения React.

Он отвечает за поиск#rootэлемент, а затемcreateRoothold<App />компонент для рендеринга в него.

Пример

// Путь к файлу: src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

// Найдите <div id="root"></div> в HTML
// Используйте createRoot, чтобы создать корневой узел React, затем отрендерите <App /> в него
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Приложение />
  </React.StrictMode>
)

src/App.jsx— Корневой компонент.

Это самый внешний контейнер всех страниц, и JSX, который он возвращает, будет отрендерен на странице.

<React.StrictMode>Это Strict Mode в React, активный только в режиме разработки. Он выполняет дополнительные проверки компонентов (например, двойной рендеринг), чтобы помочь вам найти потенциальные проблемы. В production-сборках он автоматически игнорируется.

Что такое JSX?

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

React-компонент — это, по сути, функция, которая возвращает JSX.

Ключевые различия между JSX и HTML

СценарийHTMLJSX
атрибут classclass="container"className="container"
Самозакрывающиеся теги<img src="....html"><img src="....html" />
Встраивание JS-выраженийНе поддерживается<h1>{title}</h1>
атрибут stylestyle="color: red"style={{ color: 'red' }}
Комментарии<!-- comment -->{/* comment */}
Привязка событийonclick="fn()"onClick={fn}

Почему использоватьclassNameвместоclass? Потому что JSX — это по сути JavaScript, иclassявляется зарезервированным ключевым словом в JS. Аналогично,forизменить наhtmlFor。

Пример

// JSX — это HTML-подобный код после return
function Greeting() {
  const name = 'EXAMPLE'
  const isLoggedIn = true

  return (
    <div className="greeting">
      {/* JSX-комментарий: поместите любое JS-выражение внутри фигурных скобок */}
      <h1>Привет, {name}!</h1>
      <p>Текущее время:{new Date().toLocaleDateString()}</p>
      {isLoggedIn && <p>С возвращением!</p>}
    </div>
  )
}

Помните главное правило:В JSX можно поместить любое JS-выражение внутрь фигурных скобок— переменные, вызовы функций, тернарные операции и перебор массива через map — всё работает.

Компоненты React = Функции

Суть функционального компонента React:Функция, которая принимает props в качестве параметров и возвращает фрагмент JSX。

Пример

// Определите компонент: это функция, которая возвращает JSX
// Имена компонентов должны начинаться с заглавной буквы
function BlogHeader() {
  return (
    <header>
      <h1>ПРИМЕР Блог</h1>
    </header>
  )
}

// Использование компонента: пишите его как HTML-тег; работают и самозакрывающийся, и парный вариант
function App() {
  return (
    <div>
      <BlogHeader />
      <main>
        <p>Здесь будет отображаться содержимое блога</p>
      </main>
    </div>
  )
}

export default App

Имена компонентов должныначинаться с заглавной буквы. Если имя начинается со строчной буквы, React воспринимает его как обычный HTML-тег (div, span и т. д.), а если с заглавной — как пользовательский компонент.

Практика: очистите шаблон и напишите каркас блога

Очистите содержимое сгенерированных по умолчанию App.jsx и App.css и замените его базовой структурой блога.

Пример

// Путь к файлу: src/App.jsx
import './App.css'

function App() {
  return (
    <div className="app">
      {/* Верхняя панель навигации */}
      <header className="navbar">
        <h1 className="logo">ПРИМЕР Блог</h1>
        <nav>
          <a href="/">Главная</a>
          <a href="#">О нас</a>
        </nav>
      </header>

      {/* Область основного содержимого */}
      <main className="container">
        <p>Здесь будет отображаться содержимое блога</p>
      </main>

      {/* Подвал */}
      <footer className="footer">
        <p>© 2024 Пример блога. Работает на React.</p>
      </footer>
    </div>
  )
}

export default App

Пример

/* Путь к файлу: src/App.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f5f5;
  color: #333;
}

/* Панель навигации */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.logo {
  font-size: 24px;
  color: #61dafb;
}

.navbar nav a {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
}

/* Область основного содержимого */
.container {
  max-width: 960px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Подвал */
.footer {
  text-align: center;
  padding: 20px;
  color: #999;
  border-top: 1px solid #eee;
}

После сохранения браузер автоматически обновится, и вы увидите чистый каркас блога: верхняя панель навигации + центральная область контента + нижний футер.

Краткое содержание главы

В этой главе вы сделали три вещи: создали проект React с Vite, поняли ключевые различия между JSX и HTML и написали базовый JSX-каркас блога.

Ключевые выводы: компонент React — это функция, которая возвращает JSX, и в JSX можно встраивать любое JS-выражение внутри фигурных скобок.

Другие расширения