Один из первых вопросов, который возникает, когда мы начинаем работать с внешней библиотекой или фреймворком, — как начать новый проект.

Первое, что нам нужно знать, это то, что для работы с React или другим фреймворком, таким как Angular, Vue, Svelte и т. д., сначала необходимо правильно настроить нашу среду с помощью Node и npm. ». Если у вас есть готовая среда, вы можете продолжить чтение.

У нас есть 3 способа создать проект React:

1 — Создать проект с нуля

2- Используйте шаблон

3- Используйте какой-нибудь инструмент, который генерирует весь проект

1 Создать проект с нуля

Первый вариант является самым простым и сложным, потому что, если вы создаете проект с нуля, вам нужно создать все каталоги и файлы, а также вам нужно будет настройте все инструменты, необходимые для компиляции, тестирования, анализа и сборки вашего приложения. И все эти конфигурации жесткие. Вам не нужно беспокоиться, если некоторые из этих слов, которые есть в тексте, вам неизвестны, я напишу статьи, объясняющие их все в ближайшие недели.

Таким образом, создать проект с нуля сложно, но это позволяет вам настроить проект именно так, как вы хотите, даже если вам потребуется потратить на это много времени и знаний. Я рекомендую этот вариант, только если вы опытный разработчик или хотите узнать, как настроить проект с нуля.

2 Используйте шаблон

Второй вариант проще, чем последний, потому что на Github у вас есть репозитории с шаблонами, в которых пошагово объясняется, как его использовать. Чаще всего вам нужно клонировать репозиторий, и для этого нужна только бесплатная учетная запись Github. А затем, следуя инструкциям в файле readme, не более чем через 5 минут ваш проект будет запущен.

Одним из лучших шаблонов является React-boilerplate, который является шаблоном общего назначения, но вы можете найти другие шаблоны React практически для любого типа приложений.

Таким образом, это более простой вариант создания проекта React, чем первый, потому что не более чем через 5 минут ваш проект будет запущен, но у вас не будет никакого контроля над инструментами и библиотеками. которые устанавливают шаблоны.

3 Используйте какой-нибудь инструмент, который генерирует проект

Последние два варианта хороши, но было бы лучше, если бы мы могли использовать инструмент, в котором мы могли бы скомандовать что-то вроде «создать проект React, идеально настроенный с помощью инструмента X и Y», и тогда инструмент сделал бы всю работу за нас.

Create React App — именно тот инструмент, который вы ищете. Приложение Create React — это клиент (далее CLI), который позволяет нам создавать настраиваемый проект React, позволяя нам выбрать наилучшую конфигурацию для нашего проекта. Этот вариант является фаворитом сообщества, потому что он прост в использовании, хорошо поддерживается и всегда использует последнюю версию React.

Единственное, что вам нужно для использования CRA, — это установить Node и npm на вашем компьютере, открыть терминал и запустить следующие команды, одну за другой, в рабочем каталоге:

npx create-react-app my-app
cd my-app
npm start

Первая команда создает проект React с именем «my-app» (вы должны изменить «my-app» на имя вашего проекта), вторая команда изменяет ваш текущий каталог на каталог проекта, а последняя команда запускает ваш проект React, позволяющий вам работать и видеть результаты в браузере.

Эти команды предназначены для устройств Mac OS и Linux, если вы работаете в среде Windows, вторая команда немного изменится.

npx create-react-app my-app
dir my-app
npm start

В заключение, Create React App – это лучший инструмент для создания вашего первого проекта React, поскольку его легко настроить и он позволяет легко настраивать проект.

В следующих статьях я подробно объясню структуру проекта, созданного с помощью приложения Create React, и как начать разработку на их основе.

Наконец, я хочу спросить вас, как вы создаете проект React? Какой инструмент вы используете? Вы можете написать свои мнения и предложения.