react exercise
1.0.0
Это упражнение предназначено для того, чтобы вы знакомились с фундаментальными концепциями реагирования интерактивным образом, а также для того, чтобы вы могли чувствовать себя комфортно развиваться в современной среде Node.js. Этот проект будет разбит на несколько частей. Каждая часть будет охватывать фундаментальную концепцию React/Frontend.
Руководство для начинающих React и руководство для начинающих по React будут очень полезны для прохождения, чтобы получить полное понимание основных основных основ. Также будет полезно, чтобы чувствовать себя комфортно погрузиться в React Docs и JavaScript Docs в рамках этого упражнения.
Установите узел и NPM здесь.
Проверьте, есть ли у вас правильные версии, запустив следующие команды в вашем терминале:
node -v
npm -v
Установите React Devtools, чтобы легко отлаживать и посмотрите, что происходит в вашем приложении React.
Ваш текстовый редактор может не поддерживать синтаксис JSX, который используется в этом проекте, но могут быть плагины, чтобы получить надлежащее выделение синтаксиса. Например, Sublime Text использует плагин Babel .
Во -первых, разветвляется этот репозиторий. Кнопка вилки в вашем правом верхнем углу. То, что это делает, копирует этот репозиторий в ваш аккаунт. Теперь у вас должен быть репозиторий с именем <yourusername>/react-exercise .
Это должно выглядеть так (мое имя пользователя - Двойдачанг): 
Затем клонируйте этот репозиторий (нажмите кнопку «Зеленая», говоря «клон или скачать», выберите HTTP, скопируйте и вставьте ее в местоположение <url> ) и перейдите в него:
$ git clone <url>
$ cd react-exercise
Установить зависимости проекта:
npm install
После того, как это сделано, запустите это, чтобы начать разработку:
npm start
Это начнет запуск приложения и автоматически откроет его по адресу http: // localhost: 3000. В любое время, когда вы меняете и сохраняете код, он автоматически перезагрузит! Это останется процессом запуска в вашем терминале, поэтому вам нужно будет открыть новую вкладку или окно для выполнения других команд.
Prottier - это инструмент, который автоматически переформирует ваш код, чтобы следовать определенному набору руководств по стилю кодирования. Он настроен автоматически перед каждым коммитиром. Это гарантирует, что весь наш код следует одним и тем же стилям кода, обеспечивая соблюдение хороших практик и минимизирует конфликты.
Это определенно не нужно для этого упражнения, но есть более красивые плагины, которые вы можете установить для своего редактора. Смотрите инструкции здесь.
Цель: знакомьтесь с синтаксисом JSX, структурой компонентов и прохождением реквизита
Задачи:
shouldDisplayImage подпресс из Instructions , который определяет, определяет ли отображение логотипа H4I. Цель: знакомьтесь с списками рендеринга и функциями массива JavaScript
Задачи:
items опоры в компонент Instructions , который содержит список строкitemsfor или while петлиЦель: познакомьтесь с состоянием компонентов
Задачи:
Counter -компонентcount на 0Цель: Познакомьтесь с пользовательским вводом
Задачи:
App.js сделайте ввод и кнопку отправки, которая устанавливает состояние initialCountinitialCount в качестве опоры в компонент Counter и используйте это значение в качестве первоначального count в Counter . Обязательно следите за типами при этом, так как пользовательский ввод - это String , и мы хотим отправить Number .<button type="button" ... Цель: Понять общение состояния/реквизита между компонентами братьев и сестер
Задачи:
input и отправить в свой собственный компонент, называемый InitialCountForm , который является дочерним компонентом AppЦель: знакомый с CSS/SCSS и стилем
Задачи: ничего конкретного, играйте со стилем!
Примечание. Вы можете создавать файлы SCSS, и они будут автоматически скомпилированы в файлы CSS при сохранении, но вам необходимо импортировать файл CSS в свой компонент.
Некоторые ресурсы, связанные с стилем:
Руководство для начинающих React
MDN - реинтродукция в JavaScript
Руководство для начинающих реагировать
React Docs
Руководство по стилю JavaScript от Airbnb
Руководство по стилю реагирования Airbnb
Руководство Airbnb в стиле CSS
Когда вы закончите со всеми шагами, вставьте свои изменения в свой репо GitHub!
Прежде чем вы сможете отправить PR, вам придется подтолкнуть вашу ветку в удаленную ветку (та, которая находится на GitHub, а не локально).
Проверьте, что вы в своем филиале:
git branch
Если вы хотите убедиться, что все ваши коммиты находятся в:
git log
Нажмите Q , чтобы покинуть экран git log .
Толкните свои коммиты в вашу удаленную ветку:
git push
В первый раз, когда вы это сделаете, вы можете получить ошибку, так как ваша удаленная филиал еще не существует. Обычно это говорит вам правильную команду для использования:
git push --set-upstream origin <YOUR_BRANCH_NAME>
Примечание: это должно быть сделано только в первый раз, когда вы продвигаете новую ветку. Вы можете использовать только git push впоследствии.
Как только это будет сделано, отправьте электронное письмо по адресу [email protected] по ссылке на ваш раздвоенный репозиторий и название вашего филиала. Нам понадобятся эти две вещи, чтобы просмотреть ваше представление.
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
