Как начать работать с React
год назад·2 мин. на чтение
Как установить React. React с самого начала был разработан для постепенного внедрения. Вы можете использовать React именно в том объеме, в каком вам нужно. Если вы хотите попробовать React, добавить интерактивности на HTML-страницу или запустить сложное приложение на основе React, этот раздел поможет вам начать работу.
Содержание туториала по React
React с самого начала был разработан для постепенного внедрения. Вы можете использовать React именно в том объеме, в каком вам нужно. Если вы хотите попробовать React, добавить интерактивности на HTML-страницу или запустить сложное приложение на основе React, этот раздел поможет вам начать работу.
Создание проекта с
Если вы изучаете React, рекомендуется воспользоваться Create React App. Это самый популярный способ попробовать React и создать новое одностраничное клиентское приложение (SPA). Он создан для React, но не включает встроенных инструментов для маршрутизации или выборки данных.
Сначала установите Node.js. Затем откройте терминал и запустите эту строку, чтобы создать проект:
Попробовать React
Есть множество онлайн-песочниц, поддерживающих React: например, CodeSandbox, StackBlitz или CodePen.Попробовать React локально
Чтобы попробовать React локально на своем компьютере, загрузите эту HTML-страницу. Откройте его в редакторе и в браузере.Установка React и создание проекта
Если вы начинаете новый проект, рекомендуется использовать набор инструментов или фреймворк. Эти инструменты обеспечивают удобную среду разработки, но требуют локальной установки Node.js.Создание проекта с create-react-app
(CRA)
Если вы изучаете React, рекомендуется воспользоваться Create React App. Это самый популярный способ попробовать React и создать новое одностраничное клиентское приложение (SPA). Он создан для React, но не включает встроенных инструментов для маршрутизации или выборки данных.
Сначала установите Node.js. Затем откройте терминал и запустите эту строку, чтобы создать проект:
Теперь вы можете запустить свое приложение с помощью:npx create-react-app my-app
Create React App не обрабатывает внутреннюю логику или базы данных. Вы можете использовать его с любым бэкендом. Когда вы создадите проект, вы получите папку со статическим HTML, CSS и JS. Поскольку Create React App не может использовать преимущества серверного рендеринга, оно не обеспечивает наилучшей производительности. Если вам нужно более быстрое время загрузки и встроенные функции, такие как маршрутизация и серверная логика, рекомендуется вместо этого использовать фреймворк.cd my-app npm start
Популярные альтернативы
Разработка с полнофункциональным фреймворком
Если вы хотите начать продакшен-проект, Next.js — отличное вариант для начала. Next.js — это популярная легкая платформа для статических и серверных приложений, созданных с помощью React. Он поставляется со встроенным функционалом, таким как маршрутизация, стилизация и рендеринг на стороне сервера, что позволяет быстро запустить ваш проект.Популярные альтернативы
Кастомные инстурменты
Вы можете предпочесть создать и настроить свой собственный инструментарий. Такой Инструментарий обычно состоит из:- Менеджер пакетов позволяет устанавливать, обновлять и управлять сторонними пакетами. Популярные менеджеры пакетов: npm (встроен в Node.js), Yarn, pnpm.
- Компилятор позволяет компилировать функции современного языка и дополнительный синтаксис, такой как JSX, или аннотации типов для браузеров. Популярные компиляторы: Babel, TypeScript, swc.
- Сборщик позволяет писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки. Популярные сборщики: webpack, Parcel, esbuild, swc.
- Минификатор делает ваш код более компактным, чтобы он загружался быстрее. Популярные минификаторы: Terser, swc.
- Сервер обрабатывает запросы c клиентского приложения, чтобы вы могли отображать компоненты в HTML. Популярные серверы: Express.
- Линтер проверяет ваш код на распространенные ошибки. Популярные линтеры: ESLint.
- Средство запуска тестов позволяет запускать тесты для вашего кода. Популярные инструменты для тестирования: Jest.
Разметка React с JSX
год назад·1 мин. на чтение
JSX — это расширение синтаксиса для JavaScript, позволяющее писать HTML-подобную разметку внутри файла JavaScript. Хотя есть и другие способы написания компонентов, большинство разработчиков React предпочитают лаконичность JSX, и большинство кодовых баз используют его.
Содержание туториала по React
JSX — это расширение синтаксиса для JavaScript, позволяющее писать HTML-подобную разметку внутри файла JavaScript. Хотя есть и другие способы написания компонентов, большинство разработчиков React предпочитают лаконичность JSX, и большинство кодовых баз используют его.
JSX: добавление разметки в JavaScript
Интернет был построен на HTML, CSS и JavaScript. В течение многих лет веб-разработчики хранили контент в HTML, дизайн в CSS и логику в JavaScript — часто в отдельных файлах. Контент был размечен внутри HTML, а логика страницы жила отдельно в JavaScript. Но по мере того, как Интернет становился все более интерактивным, содержание все больше определялось логикой. JavaScript отвечал за HTML. Вот почему в React логика рендеринга и разметка живут в одном месте — в компонентах. Сохранение логики рендеринга кнопки и разметки вместе гарантирует их синхронизацию друг с другом при каждом редактировании. И наоборот, несвязанные детали, такие как разметка кнопки и разметка боковой панели, изолированы друг от друга, что делает более безопасным изменение любой из них по отдельности. Каждый компонент React — это функция JavaScript, которая может содержать некоторую разметку, которую React отображает в браузере. Компоненты React используют расширение синтаксиса под названием JSX для представления этой разметки. JSX очень похож на HTML, но немного строже и может отображать динамическую информацию. Лучший способ понять это — преобразовать некоторую разметку HTML в разметку JSX. JSX и React — это две разные вещи. Они часто используются вместе, но вы можете использовать их независимо друг от друга. JSX — это расширение синтаксиса, а React — это библиотека JavaScript.Преобразование HTML в JSX
Предположим, что у вас есть некоторый (совершенно правильный) HTML:И вы хотите поместить его в свой компонент:<h1>Todos</h1> <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" /> <ul> <li>Learn JavaScript</li> <li>Learn HTML</li> <li>Learn CSS</li> </ul>
Если вы скопируете и вставите его как есть, он не будет работать.export default function TodoList() { return ( // ??? ) }
Это потому, что JSX строже и имеет несколько больше правил, чем HTML. Если вы прочитали сообщения об ошибках выше, они помогут вам исправить разметку, или вы можете следовать приведенному ниже руководству.// App.js export default function TodoList() { // Этот код не будет работать return ( <h1>Todos</h1> <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" /> <ul> <li>Learn JavaScript</li> <li>Learn HTML</li> <li>Learn CSS</li> </ul> ); } // App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:4) // App.js: Смежные элементы JSX должны быть заключены в закрывающий тег. Вам нужен фрагмент JSX <>...</>? (5:4)
Правила JSX
1. Возвращать один корневой элемент
Чтобы вернуть несколько элементов из компонента, оберните их одним родительским тегом. Например, вы можете использовать<div>
:
Если вы не хотите добавлять в разметку лишний<div> <h1>Todos</h1> <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" /> <ul> ... </ul> </div>
<div>
, вы можете вместо этого написать <>
и </>
:
Этот пустой тег называется фрагментом (<> <h1>Todos</h1> <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" /> <ul> ... </ul> </>
Fragment
). Фрагменты позволяют группировать элементы, не оставляя следов в HTML-дереве браузера.
Почему необходимо обернуть несколько тегов JSX?
JSX выглядит как HTML, но внутри он трансформируется в простые объекты JavaScript. Вы не можете вернуть два объекта из функции, не поместив их в массив. Это объясняет, почему вы также не можете вернуть два тега JSX, не завернув их в другой тег или фрагмент.2. Закрывать все теги
JSX требует, чтобы теги были закрыты явно: самозакрывающиеся теги, такие как<img>
, должны стать <img />
, а теги-обертки, такие как <li>апельсины
, должны быть записаны как <li>апельсины</li>
.
3. Пишите все в camelCase
JSX превращается в JavaScript, а атрибуты, написанные в JSX, становятся ключами объектов JavaScript. В ваших собственных компонентах вам часто потребуется считывать эти атрибуты в переменные. Но JavaScript имеет ограничения на имена переменных. Например, их имена не могут содержать тире или быть зарезервированными словами, такими какclass
.
Вот почему в React многие атрибуты HTML и SVG записываются в camelCase. Например, вместо stroke-width
вы используете strokeWidth
. Поскольку class
является зарезервированным словом, в React вместо этого вы пишете className
, названное в честь соответствующего DOM свойства:
<img src="https://example.com/userpic.jpg" alt="userpic" className="photo" />
Совет: используйте конвертер JSX
Преобразование всех этих атрибутов в существующую разметку может быть утомительным. Рекомендуется использовать конвертер для перевода существующих HTML и SVG в JSX. Конвертеры очень полезны на практике, но все же стоит понимать, что происходит, чтобы вы могли комфортно писать JSX самостоятельно. Вот окончательный результат:export default function TodoList() { return ( <> <h1>Todos</h1> <img src="https://example.com/userpic.jpg" alt="userpic" className="photo" /> <ul> <li>Learn JavaScript</li> <li>Learn HTML</li> <li>Learn CSS</li> </ul> </> ); }
Резюме
Теперь вы знаете, почему существует JSX и как его использовать в компонентах:- React компоненты группируют логику рендеринга вместе с разметкой, потому что они связаны.
- JSX похож на HTML с некоторыми отличиями. Вы можете использовать конвертер, если вам нужно.
- Сообщения об ошибках часто укажут вам правильное направление для исправления разметки.