Если вы похожи на меня, вы плохо разбираетесь в документации (никому не говорите), и чтение ее иногда кажется иностранным языком, который старшие разработчики создали, чтобы возиться с младшими (это определенно работает). Если вы уверены, что сможете в этом разобраться, ознакомьтесь с официальной документацией React здесь: https://reactjs.org/docs/create-a-new-react-app.html
Настройка
Если вы впервые создаете новое приложение для реагирования (или вы забыли, как я всегда это делаю), я рекомендую вам ознакомиться с документацией React для начала работы. Вы можете найти это здесь: (https://reactjs.org/docs/create-a-new-react-app.html)
Перейдите в терминале туда, где вы хотите разместить файлы вашего проекта. Я случайно захожу в свой ./Desktop
.
Попав в вашу папку, в вашем терминале запустите
npx create-react-app <new app name>
и вставьте то, что вы хотите назвать своим приложением, в <new app name>
.
Для компиляции всех файлов потребуется несколько секунд, и вы должны увидеть новую папку, созданную в том месте, где вы создали свой новый проект.
Теперь вы можете открыть свою папку в IDE по своему усмотрению. Если у вас есть код VS (это то, что я использую), вы можете запустить в своем терминале code <folder name>
, и VS Code (должен) автоматически открывать вашу папку в новом окне.
Чтобы убедиться, что ваш проект скомпилирован правильно, запустите yarn start
или npm start
(я использую npm, но я слышу, что yarn работает быстрее), чтобы открыть свой проект в браузере.
Для начала я обычно делаю несколько вещей, чтобы очистить стандартные вещи React, прежде чем я начну кодировать свой собственный проект. Если вы используете бутстрап, это будет важно, чтобы позже избежать наложения стилей:
Эти файлы вам больше не понадобятся. Вы можете щелкнуть правой кнопкой мыши и удалить их (или удалить их, как вам удобнее, с помощью терминала или другой магии). Если вы запустите npm start
сейчас, вы получите ошибки. Откройте ваш ./src/App.js
файл и удалите следующее:
Удалите импорт logo.svg
вверху и все, что находится между вашим первым <div>
, (теги заголовков можно сохранить, но на самом деле они вам не нужны.
Запустите npm start
еще раз, и вы должны увидеть….
Ничего такого.
Замечательно! Это означает, что вы удалили их основные вещи. Чтобы убедиться, что их стиль по умолчанию не мешает вашему будущему стилю, откройте файл ./src/index.css
и удалите стиль code
; при желании вы можете оставить стиль body
или использовать его как основу, пока не решите изменить его позже:
Теперь перейдите к своему App.css
файлу, и вы можете удалить все (что я обычно делаю) или решить, что вы предпочитаете оставить или выбросить. Вы также можете прокомментировать его, если боитесь его удалить и хотите принять решение позже.
Вы могли заметить, а могли и не заметить, что наша ./public
папка стала красной, и она нам не нравится. Это почему? Мы удалили файл logo192.png
, и один из наших файлов в этой папке пытается его отобразить. React не выдаст вам ошибок и не остановит вас от разработки, но на это некрасиво смотреть. Перейдите к ./public/index.html
и внесите следующие изменения:
Удалите зачеркнутые строки и в тегах <title>
, где нарисовано поле, замените React
названием своего приложения.
Вот и все, что нужно для настройки и очистки вашего нового приложения React. Теперь вы можете создавать свои компоненты и добавлять Redux, если хотите!