Как настроить новый проект Create React App

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

Это просто личные мысли, которые до сих пор работали для меня, так что ничего особенного из «лучшей практики» и «лучшего подхода».

Чтобы сделать наглядный пример, я как бы воссоздал этот текст в коде React и развернул его через Vercel (очень простая страница, просто чтобы показать, как она должна работать). Результат можно увидеть здесь, а репозиторий — здесь.

Для упрощения я использую Create React App, а мой редактор кода — VSCode.

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

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

После выбора каталога откройте терминал и используйте следующую команду (не забудьте заменить часть my-app на имя вашего проекта или на то, как вы хотите, чтобы папка вашего проекта называлась, потому что это будет его имя; используйте для него «kebab-case-format»):

npx создать-реагировать-приложение мое-приложение

Через некоторое время (в зависимости от вашего ПК) будет создана базовая структура приложения React. Затем вы можете использовать эти команды для его запуска (это также будет написано в терминале; my-app — это имя, которое вы выбрали ранее):

cd мое приложение

запуск нпм

Однако я обычно открываю новое окно VSCode и напрямую выбираю папку my-app. В противном случае вы находитесь на одну папку выше, и каждый раз, когда вам нужно добавить что-то новое в ваше приложение через терминал, вам нужно убедиться, что вы находитесь в папке my-app, а не в папке предыдущая папка, которую вы выбрали изначально. Для меня проще снова открыть папку проекта, поэтому мой начальный путь всегда — это сама папка приложения. Например, в этом случае вы можете запустить приложение с помощью npm start без необходимости cd my-app.

Как только вы запустите приложение, в вашем браузере откроется основная страница для создания приложения React:

И структура ваших файлов будет выглядеть так:

Начиная снизу вверх, я обычно делаю следующее:

• В README.md все очищаем и помещаем общую информацию о проекте. Что-то вроде:

Вы можете последовать примеру формата Markdown, который изначально был в Readme, или просто погуглить что-то типа базовый пример уценки.

• Затем удалите все из папки src, кроме App.css, App.js, index.css, index.js.
• Удалите все комментарии и reportWebVitals() из index.js.

• Удалите все из index.css (хотя некоторые могут счесть полезным оставить там body { margin: 0 }).
• Из App.js удалите импортированный логотип и все html-элементы из функции App. Поместите какой-нибудь элемент «hello-worldish», чтобы позже проверить правильность его рендеринга.

• Удалите все из App.css.
• В папке public удалите все, кроме index.html.
• Удалите все комментарии из index.html, измените тег заголовка на нужный, удалите все теги ссылок.

После этого вы должны увидеть свою страницу Hello world в браузере без каких-либо ошибок.

И структура файла будет выглядеть так (как было сказано ранее, игнорируйте .prettierrc, если вы его не используете):

На данный момент есть один компонент, App.js, который создает тег «Hello world», а затем обрабатывает его в index.js.

Затем в папке src я создаю следующие основные папки для проекта: assets, components, pages. Это субъективно, поэтому это может быть сделано по-разному в зависимости от различных стандартов/предпочтений (+ я не буду упоминать создание папки utils, так как не буду использовать какие-либо дополнительные утилиты для этого приложения).

Assets хранит в основном изображения, gif и т. д. components используется для самых маленьких элементов, которые являются (та-дам!) компонентами, а также на страницах Ты держишь (ещё та-дам!) страницы, которые суммируют в них все необходимые компоненты.

Я храню каждый компонент и страницу в отдельной папке, так как предпочитаю создавать для каждого из них отдельный CSS-файл. Однако, если вы используете стилизованные компоненты, пишете весь CSS в один файл или делаете что хотите, отдельные папки вам могут и не понадобиться (и, возможно, вам тоже не понадобится App.css файл затем).