Начало работы: оптимизируйте свое приложение React

Хотите сделать свой React-сайт максимально быстрым и доступным? Вы пришли в нужное место!

Хусейн Джирде

React — это библиотека с открытым исходным кодом, которая упрощает создание пользовательских интерфейсов. Этот путь обучения будет охватывать различные API и инструменты в экосистеме, которые вам следует рассмотреть для повышения производительности и удобства использования вашего приложения.

Это руководство покажет вам, как начать работу с приложением React. Во всех остальных руководствах этого раздела будут рассмотрены темы по оптимизации скорости или доступности приложения React.

Почему это полезно?

Существует много контента, объясняющего, как создавать быстрые и надежные приложения, но не так много материалов, показывающих, как создавать быстрые и надежные приложения React . В этих руководствах все это рассматривается с точки зрения приложения React, где упоминаются только библиотеки, API и функции, специфичные для экосистемы 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 использует для настройки веб-пакета и процесса сборки Babel, который включает базовую настройку Jest для тестирования. Чтобы упростить задачу пользователю, эти файлы скрыты, и к ним нельзя получить доступ, пока вы не удалите их из CRA. Всегда лучше избегать извлечения, когда это возможно, поскольку это означает использование всех этих файлов конфигурации в качестве собственного исходного кода, которым может быть сложно управлять.

Структура каталогов нового приложения CRA содержит только те файлы, которые вам действительно необходимо изменить для работы с вашим приложением. Документация CRA объясняет это подробно.

Что дальше?

Теперь, когда вы знаете, как приступить к созданию приложения Create React, узнайте, как повысить производительность и доступность вашего приложения, используя все руководства этого курса обучения: