Хотите, чтобы ваш сайт на React был максимально быстрым и доступным? Вы обратились по адресу!
React – это библиотека с открытым исходным кодом, которая упрощает создание пользовательских интерфейсов. В этом учебном плане рассматриваются различные API и инструменты в экосистеме, которые следует использовать для повышения производительности и удобства использования вашего приложения.
В этом руководстве рассказывается, как начать работу с приложением React. Все остальные руководства в этом разделе будут посвящены темам, связанным с оптимизацией скорости или доступности приложения React.
Почему это полезно?
Существует множество материалов о том, как создавать быстрые и надежные приложения, но не так много информации о том, как создавать быстрые и надежные приложения React. В этих руководствах все это рассматривается с точки зрения приложения React, в котором упоминаются только библиотеки, API и функции, специфичные для экосистемы React.
Чему вы научитесь?
В этом учебном плане не рассматриваются следующие темы:
- Как использовать React
- Как работает React
Хотя обе эти концепции будут затронуты при необходимости, все руководства и практические работы в этом разделе будут сосредоточены на том, как создавать быстрые и доступные сайты React. Поэтому необходимо базовое знание React.
Создать приложение React
Create React App (CRA) – самый простой способ начать разработку приложений React. В нем есть стандартная конфигурация с рядом основных функций, включая систему сборки, которая содержит упаковщик модулей (webpack) и транспилятор (Babel).
Чтобы создать новое приложение, в командной строке нужно выполнить следующую команду:
npx create-react-app app-name
После выполнения команды вы можете перейти к приложению и запустить его с помощью следующих команд:
cd new-app
npm start
Ниже показана структура каталогов и веб-страница нового приложения CRA.
CRA использует несколько файлов конфигурации и скриптов сборки, чтобы настроить процесс сборки webpack и Babel, который включает базовую настройку Jest для тестирования. Чтобы упростить работу, эти файлы скрыты и недоступны, пока вы не выйдете из CRA. По возможности лучше избегать извлечения, поскольку в этом случае все файлы конфигурации становятся частью вашего исходного кода, которым может быть сложно управлять.
Структура каталогов нового приложения CRA содержит только те файлы, которые вам действительно нужно будет изменить для работы над приложением. Подробная информация приведена в документации CRA.
Что дальше?
Теперь, когда вы знаете, как начать создавать приложение Create React App, узнайте, как улучшить производительность и доступность вашего приложения, используя все руководства в этом учебном плане: