30 Days Of React
1.0.0
Учитесь с Asabeneh, присоединившись к предстоящему кодированию Bootcamp
Автор: Асабене -лейтайе
Октябрь 2020 года
День 1 >>
| # День | Темы |
|---|---|
| 00 | Введение Как использовать репо Требования Настраивать |
| 01 | JavaScript Replrese |
| 02 | Начало работы реагируют |
| 03 | Настройка |
| 04 | Компоненты |
| 05 | Реквизит |
| 06 | Список, карта и ключи |
| 07 | Классовые компоненты |
| 08 | Государства |
| 09 | Условное рендеринг |
| 10 | React Project Polder Structure |
| 11 | События |
| 12 | Формы |
| 13 | Контролируемый и неконтролируемый компонент |
| 14 | Срок службы компонентов |
| 15 | Сторонние пакеты |
| 16 | Компоненты более высокого порядка |
| 17 | Реагировать маршрутизатор |
| 18 | Выбрать против Axios |
| 19 | Проекты |
| 20 | Проекты |
| 21 | Крючки |
| 22 | Формы с использованием крючка |
| 23 | Получение данных с использованием крючков |
| 24 | Проект с использованием крючков |
| 25 | Пользовательские крючки |
| 26 | Контекст |
| 27 | Рефери |
| 28 | проект |
| 29 | Исследовать |
| 30 | Выводы |
??? Счастливого кодирования ???
Поздравляем с принятием принятия решения о 30 днях реагирования. В этом вызове вы узнаете все, что вам нужно использовать для разработки приложения React. В конце задачи вы получите сертификат по завершению программирования 30 дней. Если вам нужна помощь или если вы хотите помочь другим, вы можете присоединиться к группе Telegram.
Проблема 30daysofreact - это руководство как для начинающих, так и для продвинутых JavaScript и React Developers. Добро пожаловать в 30 дней реагирования. React - это библиотека JavaScript. Мне нравится использовать и преподавать React, и я надеюсь, что вы тоже это сделаете. На этом шаг за шагом 30 дней React Challenge вы изучите React, которая является одной из самых популярных библиотек JavaScript пользовательского интерфейса. React может сделать все, что может сделать JavaScript. React может использоваться для добавления интерактивности к веб -сайтам, для разработки мобильных приложений, настольных приложений, игр . Я полагаю, что вы научитесь довольно много в течение следующих 30 дней, и ваши навыки программирования и решения проблем также будут значительно улучшены.
Я буду использовать разговорной английский и меньше жаргонов, чтобы написать этот вызов. Контент будет постоянно обновляться. Если вы обнаружите, что опечатка или грамматические ошибки не удивляйтесь, потому что я не делаю никаких доказательств, прочитав перед тем, как опубликовать его. Я бы порекомендовал вам сосредоточиться на главном послании вызова, а не на английском и некоторых незначительных ошибках. Я очень ценю, если вы отправите мне запросы на улучшение и не забудьте вытащить первым из Master, прежде чем отправить запросы на привлечение. Большинство изображений, которые я использовал в этом вызове, поступили из 30 дней. Если вы хороши в массивах, петлях, функциях, объектах, функциональном программировании, деструкции и распространении и классе, вы сможете правильно следовать заданию. В противном случае, я настоятельно рекомендую вам проверить 30daysofjavascript.
Прежде чем погрузиться в этот курс, вы можете проверить обзор 30 дней React.
Эту проблему легко читать, написано на разговорном английском языке, привлекательном, мотивации и в то же время, это очень требовательно. Вам нужно выделить много времени, чтобы закончить этот вызов. Если вы визуальный ученик, вы можете получить видеоурок на канале Washera YouTube. Подпишитесь на канал, комментируйте и задавайте вопросы на Vides на YouTube и будьте активны, автор в конечном итоге заметит вас.
Автор любит слышать ваше мнение о вызове, поделиться своими мыслями о 30daysofjavascript. Вы можете оставить свой отзыв по этой ссылке
Учитесь с Asabeneh, присоединившись к предстоящему кодированию Bootcamp
Чтобы ладить с вызовом, вам нужно иметь следующее:
Становите эту репо, чтобы поддержать эту работу и разделите репо, чтобы создать свою собственную копию для работы.
Вы всегда должны работать непосредственно из своей раздвоенной копии.
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-ReactЧтобы выполнить ежедневные упражнения, я предлагаю создать отдельную филиал для размещения вашей папки упражнений или любых других изменений, которые вы вносите. Это будет держать вашу главную ветвь в чистоте всегда, что означает, что ваш мастер всегда будет похож на оригинального мастера.
git checkout -b exercise-solutions # `-b` creates the branch if it does not existВ вашем новом филиале вы можете использовать файлы/папки для структуры ваших решений для ежедневных упражнений
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a fileСделайте свои решения для своей вилки
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlierЭто репо будет обновляться ежедневно в течение месяца. Когда контент нового дня становится доступным, вы можете обновить свою раздвоенную копию при приведенных ниже шагах.
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin masterОбратите внимание, что обновления применяются только к главной ветви. Если вы хотите обновить какую-либо другую ветвь, повторите шаги 6-7 с именем ветви. Смотрите фрагмент ниже для филиала
exercise-solutions
git merge upstream/master exercise-solutions
git push origin exercise-solutionsЯ считаю, что у вас есть мотивация и сильное желание быть разработчиком, компьютером и интернетом. В дополнение к этому базовым до промежуточного уровня HTML, CSS и JS. Если у вас есть, то у вас есть все, чтобы начать.
Возможно, вам не понадобится Node.js прямо сейчас, но вам может понадобиться на потом. Установить node.js.
После загрузки двойного щелчка и установки
Мы можем проверить, установлен ли узел на нашей локальной машине, открыв нашу клемма или командную строку.
asabeneh $ node -v
v12.14.0При создании этого урока я использовал версию Node 12.14.0, но теперь рекомендуемая версия Node.js для загрузки - 12.17.0.
Есть много браузеров. Тем не менее, я настоятельно рекомендую Google Chrome.
Установите Google Chrome, если у вас еще нет. Мы можем написать небольшой код JavaScript на консоли браузера, но мы не используем консоль браузера для разработки приложений.
Вы можете открыть Google Chrome Console, нажав три точки в правом верхнем углу браузера, выбрав больше инструментов -> инструменты разработчика или, используя сочетание клавиатуры. Я предпочитаю использовать ярлыки.
Чтобы открыть хромированную консоль, используя сочетание клавиатуры. Приятно также знать ярлык как JavaScript и React Developer, вы будете тратить много времени на консоли браузера и не будьте ленивы открывать его во время разработки.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
После того, как вы откроете консоль Google Chrome, попробуйте изучить отмеченные кнопки. Мы будем проводить большую часть времени на консоли. Консоль - это место, куда идет ваш код JavaScript. Двигатель Google Console V8 изменяет ваш код JavaScript на машинный код. Давайте напишем код JavaScript на консоли Google Chrome:
Мы можем написать любой код JavaScript на консоли Google или любой консоли браузера. Однако для этой задачи мы сосредоточены только на консоли Google Chrome. Откройте консоли, используя:
Mac
Command+Option+I
Windows:
Ctl+Shift+IЧтобы написать наш первый код JavaScript, мы использовали встроенную функциональную консоль.log () . Мы передали аргумент в качестве входных данных, и функция отображает выход. Мы прошли «Привет, мир» в качестве входных данных или аргумента в функции console.log ().
console . log ( 'Hello, World!' ) Функция console.log () может принимать несколько параметров, разделенных запятой. Синтаксис выглядит следующим образом: console.log (param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )Как вы можете видеть из кода фрагмента выше, Console.log () может принимать несколько аргументов. Рекомендуется использовать как можно много консоли. Сделайте вашу жизнь легкой, сохранив консоль браузера открытой.
Мы добавляем комментарии к нашему коду. Комментарии очень важны, чтобы сделать код более читабельным и оставлять замечания в нашем коде. JavaScript не выполняет комментарий части нашего Code.in JavaScript, любая текстовая строка, начинающаяся с // в JavaScript, является комментарием, и все, что прилагается, как это / * * / также является комментарием.
Пример: комментарий на одну строку
// это первый комментарий
// это второй комментарий
// Я комментарий на одну строку
Пример: многослойный комментарий
/* Это многослойный комментарий
Многослойные комментарии могут занять несколько строк
JavaScript - это язык Интернета
*/
Языки программирования похожи на человеческие языки. Английский или многие другие языки используют слова, фразы, предложения, сложные предложения и другие другие, чтобы передать значимое сообщение. Английское значение синтаксиса-это расположение слов и фраз для создания хорошо сформированных предложений на языке . Техническое определение синтаксиса - это структура утверждений на компьютерном языке. Языки программирования имеют синтаксис. JavaScript - это язык программирования, и, как и другие языки программирования, у него есть свой собственный синтаксис. Если мы не напишем синтаксис, который понимает JavaScript, он выразит различные типы ошибок. Позже мы рассмотрим различные виды ошибок JavaScript. На данный момент давайте посмотрим на синтаксические ошибки.
Я сделал преднамеренную ошибку. В результате консоль увеличивает синтаксические ошибки. На самом деле, синтаксис очень информативный. Он сообщает, какой тип ошибки был сделан. Считая руководство по обратной связи с ошибкой, мы можем исправить синтаксис и исправить проблему. Процесс выявления и удаления ошибок из программы называется отладкой. Позвольте нам исправить ошибки:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )До сих пор мы увидели, как отображать текст, используя console.log () . Если мы печатаем текст или строку, используя console.log () , текст должен находиться внутри отдельных кавычек, двойных кавычек или цитат на обратной связи. Пример:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) Теперь позвольте нам практиковать больше записи кодов Javascript с использованием console.log () на консоли Google Chrome для типов цифр данных. В дополнение к тексту, мы также можем выполнять математические расчеты, используя JavaScript. Давайте сделаем следующие простые расчеты. Консоль может напрямую принимать аргументы без функции console.log () . Тем не менее, это включено в это введение, потому что большая часть этой проблемы будет происходить в текстовом редакторе, где использование функции будет обязательным. Вы можете играть непосредственно с инструкциями на консоли.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3Мы можем написать наши коды на консоли браузера, но это не сделает для более крупных проектов. В реальной рабочей среде разработчики используют разные редакторы кода для написания своих кодов. В этом 30 -дневном конкурсе JavaScript мы будем использовать код Visual Studio.
Visual Studio Code-очень популярный текстовый редактор с открытым исходным кодом. Я бы порекомендовал загрузить код Visual Studio, но если вы выступаете за другие редакторы, не стесняйтесь следить за тем, что у вас есть.
Если вы установили код Visual Studio, давайте начнем его использовать.
Откройте код Visual Studio, дважды щелкнув его значок. Когда вы откроете его, вы получите такой интерфейс. Попробуйте взаимодействовать с маркированными значками.
Поздравляю! Вы завершили настройку, которую вам нужно, чтобы начать с React, но прежде чем мы погрузимся в React Давайте сделаем обновления JavaScript. Если вам очень удобно с JavaScript, вы можете пропустить дни 1 Javascript. Раздел «Цвета JavaScript» огромный, и это может занять более одного дня. Из моего опыта люди обычно застряли в React, потому что их знания JavaScript очень мелкие, поэтому для заполнения этого разрыва все необходимые функции JavaScript, которые можно использовать в React, рассматриваются в разделе Represhript JavaScript. Есть много упражнений, но вы не обязаны их решать. Нажмите здесь, если вы хотите пропустить JavaScript и перейдите прямо в React.
? Поздравляю! ?
День 1 >>
