С тех пор, как мы начали создавать курсы по Scrimba, наши пользователи попросили нас правильному вступлению в реакцию. Поэтому, когда мы наконец добрались до этого, мы решили сделать это нашим самый полный курс когда-либо.

Это называется Научиться реагировать И в общей сложности он содержит 48 глав – сочетание лекций и интерактивных заданий.

Запуск курса? Мы объединились с @bobziroll. на @Vschoolhq и создал а? Курс по реакции на @scrimba_com. Это огромное, в общей сложности 48 глав, и он также заполнен интерактивными проблемами. Пожалуйста, если вы думаете, что ваши последователи могут понравиться! https://t.co/7pVHxPGkaz

Это самый полный интуиционный курс, когда-либо созданный на Scrimba. В общей сложности 48 глав – сочетание лекций и интерактивных заданий.

Человек за курсом – выдающийся учитель Боб Циролл. Боб – директор по образованию в V Школа , школа технологий образования, которая учит полный стек JavaScript и UX курсы.

V Школа – одна из высших учебных школ в соответствии с Курс отчета Итак, мы очень рады объединены с ними.

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

Часть 1. Интро и философия

Боб учил в Bootcamps с 2014 года и разработал свою собственную философию обучения. Так что в первом скринкасте мы познакомимся с этой философией. На изображении ниже вы увидите суть этого.

Часть 2. Что мы будем строить

В следующем видео Боб дает обзор курса, где он дает нам быстрый взгляд на два проекта, которые мы собираемся построить: простое приложение для списка дел, которое охватывает много тему основных ядров; И проект Capstone, который будет приложением Meme Generator.

Часть 3. Зачем реагировать?

Первые вещи в первую очередь, Боб позволяет нам знать, почему мы должны даже рассматривать использование чего-то вроде реагирования, а не просто писать его в простом JavaScript и почему многие разработчики уже решили использовать реагирование.

Часть 4. Reactom & JSX.

В этом скринкраве мы прыгаем прямо в код и напишем наш Hello World, используя jsx – ориентация на реакцию Расширение JavaScript Итак, мы можем записать HTML и JavaScript одновременно!

import React from "react"  
import ReactDOM from "react-dom"

ReactDOM.render(
Hello world!
, document.getElementById("root"))

Боб также быстро охватывает несколько готов, как правильный импорт реагирования и что JSX не понравится, когда вы пытаетесь сделать два соседних элемента.

// Hm, not sure which element I should render here...  
   ReactDOM.render(  
     
Hello world!
  
     
I'm a paragraph
,   
   document.getElementById("root"))

// This is much better!  
   ReactDOM.render(  
     
  
       
Hello world!
  
       
I'm a paragraph
  
     
,   
   document.getElementById("root"))

Часть 5. Практика реагирования и JSX

Это наша первая практика этого курса. На практике скринкасты Боб устанавливает нам цель и дает нам несколько советов.

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

В конце концов, Боб показывает и проходит нас через решение, но этот блог не даст никаких спойлеров? Так что не стесняйтесь проверить это в Фактический скринкаст Отказ

Часть 6. Функциональные компоненты

В этом литье Боб дает нам быстрый обзор функциональных компонентов.

import React from "react"  
import ReactDOM from "react-dom"

function MyApp() {  
  return (  
    
  
       
1
  
       
2
  
       
3
  
    
  
)}

ReactDOM.render(  
   ,  
   document.getElementById("root")  
)

Мы определяем MyApp () В качестве простой функции JS, которая возвращает очень простой элемент HTML-списка, но именно здесь реагирует, как позже мы используем эту функцию как HTML-элемент!

Часть 7. Функциональные компоненты практики

Время еще большей практики.

Так что так же, как в предыдущей практике, здесь не будет спойлеров, но не стесняйтесь прыгать прямо в код и придумать свое собственное решение. В конце концов Боб прогуливает нас, как раньше.

Часть 8. Переместить компоненты в отдельные файлы

В этой главе Боб дает нам несколько хороших и обычных практик в области реагирования для организации кода, например файлы именования с компонентами Myinfo.js так же, как сам компонент Отказ

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

// MyInfo.js

import React from "react"  
function MyInfo() {  
  return (  
   // component code  
  )  
}

export default MyInfo

Затем мы можем просто разместить наш компонент в Компоненты Папка и импорт к index.js.

// index.js

import React from "react"  
import ReactDOM from "react-dom"

import MyInfo from "./components/MyInfo"

ReactDOM.render(  
   ,   
   document.getElementById("root")  
)

Часть 9. Родительские/дочерние компоненты

На этом скринкасте Боб говорит о родительских и дочерних компонентах. Регулярные приложения гораздо более сложны, чем только один компонент, сделанный в DOM. Вместо этого у нас обычно есть сложная иерархия компонентов.

Начнем с написания нашего функционального компонента <Приложение/> который будет на вершине иерархии компонентов

// index.js

import React from "react"  
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(, document.getElementById("root"))

И в App.js сам:

// App.js

import React from "react"

function App() {  
  return (  
    
  
        
      
  
        
This is where most of my content will go...
  
      
  
    
  
  )  
}

export default App

Как видите, мы можем написать наши страницы в <Приложение/> Но это поражает цель реагирования. Мы можем взять каждый кусок HTML и поставить в отдельный компонент.

Это то, что наше <Приложение/> может выглядеть как:

В реакции, элементы HTML, которые начинаются с заглавной буквы, указывают на компонент, который мы создали

Используя эту концепцию нашего <Приложение/> Компонент будет выглядеть так:

import React from "react"  
import MainContent from "./MainContent"  
import Footer from "./Footer"

function App() {  
  return (  
    
  
      
  
        
        
    
  
  )  
}

export default App

Это намного лучше, и это очень аккуратный способ организовать код.

Часть 10. Практика родительских/дочерних компонентов

Это практика времени. Вот задача, которую мы получаем от Боба, так что давайте начнем.

Как обычно, нет спойлеров в этом блоге, поэтому не стесняйтесь погрузиться в решение На скринкасте Боб.

Если вы не очень уверены, что начать, Боб рекомендует сначала посмотреть предыдущие главы и попытаться придумать решение, даже если он не идеален на этом этапе. Это было бы лучшим способом учиться.

Часть 11. Приложение Todo – фаза 1

Хорошо! Поздравляем, мы освоили самые основы реагирования, и этот фундамент достаточно для нас, чтобы начать строительство нашего первого приложения Real-World.

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

К настоящему времени это должно быть довольно простым, и Боб идет через решение с нами.

Часть 12. Стиль реагирует с классами CSS

В этом составе Боб вводит нас в стиль в реакции. Существует несколько разных способов стиля компонентов в реакции, и мы начнем с классов CSS, так как это один из нас, с которыми мы должны быть действительно знакомы.

Начнем с простого примера. Структура этого примера такая же, как и в предыдущей главе.

В реакции это очень похоже на простое HTML, но вместо класс Нам нужно использовать классное значение :

function Header() {  
  return (  
    
This is the header
  
  )  
}

Многие места скажут вам, что нам нужно написать Классическое имя потому что класс Зарезервированное слово в JS, но Правда в том, что под капотом JSX использует ванильные JS DOM API.

document.getElementById("something").className += "new-class-name"

Теперь мы можем просто написать простые CSS:

Часть 13. Некоторые предостережения

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

// Bob likes to avoid semicolons, where possible  
import React from 'react'

// but there is no way to avoid them here  
for (let i = 0; i < 10; i++) {}

// Bob prefers regular functions  
function App() {  
  return (  
    
Hello world!
  
  )  
}

// Although you can write ES6 arrow functions if you wish  
const App = () => 
Hello world!

Часть 14. JSX для JavaScript и обратно

Прежде чем мы движемся дальше, мы должны действительно посмотреть, как играют JSX и JS вместе. Мы видим, как внутри наших функций JS мы вернем что-то, что выглядит как HTML, но это JSX.

Теперь, что если мы хотели использовать переменную? Мы можем сделать это, используя {} :

function App() {  
  const firstName = "Bob"  
  const lastName = "Ziroll"  
    
  return (  
    
Hello {\`${firstName} ${lastName}\`}!
  
  )  
}

{} это способ использовать обычные JS в JSX. На простом языке это будет выглядеть как

Это jsx {теперь мы пишем js}, и мы вернемся к JSX

Часть 15. Встроенные стили со свойством стиля

Один очень быстрый трюк для применения стилей в реакции состоит в том, чтобы использовать встроенные стили.

Hello World!

Обратите внимание, как мы используем для набора фигурных скобок {{}} Отказ Это потому, что реагирование ожидает, что стили будут переданы как объект, но мы также должны сказать JSX, что мы используем объекты JS.

Хотя есть чтание.

// This is going to error  
Hello World!

// This is what we need to do, because JS doesn't like dashes in the   
// middle of our property names  
Hello World!

Часть 16. Приложение Todo – фаза 2.

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

  
Placeholder text here

И теперь мы можем добавить немного стиль и иметь хороший список ToDo. Вскоре мы собираемся научиться настроить текст внутри

Часть 17. Реквизит часть 1 – понимание концепции

Давайте посмотрим на несколько простого HTML и подумайте, что на самом деле не так с элементами.

This is a link  
  

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

This is a link  
  

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

Часть 18. Реквизит часть 2 – Многоразовые компоненты

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

Часть 19. Реквизит в реакции

В этом скринкасте Боб покажет нам, как объединить концепции реквизит от части 17 и 18 этого курса, и он создал приложение для нас базового списка контактных карт для практики.

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

Очень реагированный способ использовать контактную карту:

// App.js  
...  
  
...

// instead of   
  
    
  
Mr. Whiskerson
  
  
Phone: (212) 555-1234
  
  
Email: mr.whiskaz@catnap.meow
  

Давайте создадим КОНТИКТ КАРТ и использовать реквизит динамически отображать данные.

import React from "react"

function ContactCard(props) {  
  return (  
    
  
        
      
{props.name}
  
      
Phone: {props.phone}
  
      
Email: {props.email}
  
    
  
  )  
}

export default ContactCard

Часть 20. Реквизит и практика укладки

Правильно, давайте практикуемся! Как и в предыдущей практике, вот ваша задача:

И как сейчас наша традиция, чтобы избежать каких-либо спойлеров и на самом деле научиться реагировать, погрузиться в прохождение Боба.

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

Часть 21. Сопоставление компонентов

Итак, с тренировки, вы могли бы заметить, что повторяем несколько Компоненты и могут задаться вопросом, есть ли способ написать это только один раз. Конечно! Мы можем использовать JavaScript .карта Чтобы помочь нам достичь этого.

function App() {

const jokeComponents = jokesData.map(joke => )

return (  
    
  
      {jokeComponents}  
    
  
  )  
}

Давайте просто быстро развернумся несколько вещей здесь.

Очень часто наши данные пришли бы от API, поэтому подражать этому мы используем jokesdata Притвориться, что у него есть все необходимые данные.

const jokesData = [  
  {  
    id: 1,  
    punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally."  
  },  
  {  
    id: 2,  
    question: "What's the best thing about Switzerland?",  
    punchLine: "I don't know, but the flag is a big plus!"  
  },  
  ...  
]

Возможно, вы также заметили ключ пропры Это действительно требование реагирования, что всякий раз, когда вы создаете компонент снова, и вам нужно пройти ключ опоры с каким-то уникальным параметром. Большую часть времени это ID который вы получаете от вашего API.

Часть 22. Компоненты сопоставления практики

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

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

Часть 23. Приложение Todo – фаза 3

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

А также используйте данные как реквизиты на И поместите его там, где бы мы хотели в самой компонента.

Если на данный момент вы заметите следующую ошибку, ПРЕДУПРЕЖДЕНИЕ: Неудачный тип опоры: вы предоставили «проверено» для формы поля ... , не будьте встревожены – мы сделали все правильно. Боб покажет нам, что это значит и как решить его в части 31 этого курса.

Часть 24. Классовые компоненты

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

Мы узнаем больше о базовых различиях позже, но на данный момент посмотрите, как они синтаксически отличаются и пытаются преобразовать наши <Приложение/> от функции к компоненту класса.

class App extends React.Component {  
  render() {  
    return (  
      
  
        
Code goes here
  
      
  
    )  
  }  
}

Часть 25. Классовые компоненты практики

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

Как всегда постарайтесь закончить эту практику самостоятельно, а затем Следуйте за прохождение Боба. Увидимся в следующей главе!

Часть 26. Состояние

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

Компонент должен быть компонентом класса, чтобы иметь состояние, и нам нужно иметь метод конструктора.

constructor() {  
  super()  
  this.state = {  
    answer: "Yes"  
  }  
}

И тогда мы можем использовать эти данные в наших вернуть и отобразить наши данные внутри JSX.

Часть 27. Государственная практика

На этой практике у нас есть какая-то отладка.

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

Часть 28. Государственная практика 2.

Состояние, как мы упоминали ранее, является супер важной концепцией, поэтому Боб включил две тренировочные уроки для нас.

Это может быть довольно сложно, но дать ему свой лучший выстрел, а затем посмотреть Как Боб это делает.

Часть 29 Приложение TODO – Фаза 4

В этом короткометражном литье Боб показывает нам, как использовать состояние в нашем приложении Todo.

Часть 30. Обработка событий в реакции

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

Давайте посмотрим на простой пример выполнения этой простой функции.

function handleClick() {  
  console.log("I was clicked")  
}

Вы уже можете быть знакомы с тем, как это сделано в обычной HTML:

Click me

Реагировать очень похоже.

Click me

Разница будет то, что имя события onclick находится в камерах и Handleclick Является ли JS внутри нашего JSX, как мы упоминали на уроке 14 о встроенных стилях.

Часть 31. Приложение Todo – фаза 5

В этом литье Боб дает нам вызов. Помните предупреждение, которое мы получаем в консоли о «проверенном» опоре? Для того, чтобы решить это, нам нужно предоставить Onchange обработчик. На данный момент просто пусть это console.log все, что ты любишь.

Как и со всеми обычными проблемами – Перейти к тому, чтобы увидеть решение.

Часть 32. Изменение состояния

Мы можем обновить состояние в компоненте с использованием Regive setState () метод.

Давайте посмотрим, как мы могли бы использовать его на очень популярном примере – счетчик.

На данный момент, когда вы нажимаете «Изменить!» Кнопка, ничего не произойдет. Давайте реализуем наши Handleclick () метод. Сначала мы начинаем с нас, просто пытаемся показать другое число:

handleClick() {  
  this.setState({ count: 1 })  
}

и передать это нашему <кнопка> Отказ

Change!

Если мы запустим это, мы получим Uncaught TypeError: не удается прочитать свойство «setState» undefined Отказ Это очень распространенная ошибка, и один из способов сделать работу нашего обработчика – это связать его.

constructor() {  
  super()  
  this.state = {  
    count: 0  
  }  
  this.handleClick = this.handleClick.bind(this)  
}

Теперь мы хотим наше Handleclick () Способ быть динамичным и на самом деле добавить 1 к любому количеству нашего текущего состояния. К счастью, реагировать нам предвещать Таким образом, мы можем сравнить штаты.

handleClick() {  
  this.setState(prevState => {  
    return {  
      count: prevState.count + 1  
    }  
  })  
}

Часть 33. Приложение Todo – фаза 6

В этой части мы собираемся сделать это, чтобы при этом, когда мы нажимаем на флажок, он собирается изменить наше состояние и отметьте/открывать флажок при необходимости. Боб предупреждает нас, что это сложная часть приложения и звучит обманчиво просты. Как задача, давайте сначала попробуем реализовать его, но не нужно беспокоиться, если что-то не совсем работает – Боб вернулся с прохождением Отказ

Часть 34. Методы жизненного цикла Часть 1

Одно из хороших вещей о реагировании – это то, как мы по сути пишу ванильные JS и реагировать, позаботится о многих вещей за кулисами. Есть ряд этих «за кулисами» события, которые случаются с компонентом. Это больше похоже на набор этапов в жизни компонента, поэтому они называются Методы жизненного цикла Отказ Боб собирается покрыть самые популярные и важные в этом и следующих главах.

Первый, который вы уже знаете, это Визуализация () Отказ Его работа состоит в том, чтобы определить, что оказывается на экране и реагировать на звонки Визуализация () Когда что-то меняется, как Государство или реквизит .

Следующий это ComponentDidMount () который по сути, как «компонент рождается». Этот метод называется, когда компонент приземляется на экране. Это хорошее время, чтобы сделать вызовы API.

Третий очень интересный метод – необходимо () Отказ Иногда реагируют бы обновить компонент, даже если ничего не изменилось. Это может стать очень дорогими в некоторых случаях, и этот метод дает нам, разработчики, шанс оптимизировать наше приложение.

И последний метод в этой главе это ComponentWillunmount () И место для очистки прямо перед вашим компонентом исчезнет с экрана пользователя. Вы можете удалить прослушиватели событий или отменить вызовы API.

Часть 35 Методы жизненного цикла Часть 2

В этой главе Боб очень быстро покрывает Некоторые из устаревших методов жизненного цикла, которые вы можете увидеть в некоторых устаревших приложениях на реагирование, и он также охватывает некоторые действительно редкие методы, такие как getderedstatefromprops () и getsnapshotbeforeupdate () Отказ Но мы не будем охватывать их на всю глубину, так как они не необходимы для этого курса.

Часть 36. Условный рендеринг

Иногда вы хотите отобразить некоторые данные или рендер какой-нибудь JSX только при определенном состоянии. Вот когда мы используем условный рендеринг.

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

Давайте создадим <Условный/> Компонент, который оказывает «загрузку …», когда страница загружается. Мы можем использовать его в нашем приложении в оказывать метод.

render() {  
  return (  
    
  
        
    
  
  )  
}

Мы можем достичь нашей цели, используя простые, если иначе из JS:

Или мы можем улучшить его с последним оператором ES6 Ternary.

Часть 37. Условный рендеринг – практика

Давайте сейчас практикуемся. Условный рендеринг является одним из необходимых инструментов в любом инструменте разработчика реагирования.

Попробуйте дать ему лучший выстрел перед Прогулка по решению с Боб.

Часть 39. Приложение Todo – фаза 7

Таким образом, мы достигли окончательной части нашего приложения Todo, и нам просто нужно завершить окончательную стайлинг, и мы закончили! Задача этой части было бы завершенное Выглядит иначе. Например, с сероватым текстом и/или фоном, поворотом текста к курсию курсиров. Как одно из решений, Боб покажет нам, как это сделать , но в конечном итоге это действительно до нас.

Часть 40. Получение данных из API

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

В главе 24 мы узнали, что одно из наиболее распространенных случаев использования для ComponentDidMount () Метод жизненного цикла – получить данные откуда-то, поэтому наш компонент может сделать, какую бы задачу это должно сделать.

В этом примере мы будем использовать бесплатные API звездных войн, чтобы получить некоторые имена персонажей. Давайте напишем наше ComponentDidMount () метод, где мы собираемся получить некоторые данные и просто console.log Это.

componentDidMount() {  
  fetch("https://swapi.co/api/people/1")  
    .then(response => response.json())  
    .then(data => console.log(data))  
}

Данные, которые мы получили от вызова API

Хорошо! Поэтому нам просто нужно схватить Имя Из этих данных и храните его в нашем состоянии, чтобы просто отобразить в компоненте. В конце концов наша <Приложение/> должно быть:

Есть несколько интересных хитростей, которые мы можем учиться у Боб.

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

Мы создаем отдельную переменную текст в Визуализация () где мы делаем всю нашу логику, и у нас просто очень чистый возвращение() Так что для следующего разработчика проще понять, который поддерживает наш код.

Часть 41. Образует часть 1

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

В Vanilla JS DOM API вы создаете форму HTML. Как только пользователь решит отправить, вы собираете все данные из своих форм, в значительной степени в последнюю секунду и проверяете его, прежде чем отправить.

РЕАКТИРОВАТЬ ПОДСЛЕДОВАТЕЛЬНЫЕ ДЛЯ ВЫ ДОЛЖНЫ ДЛЯ ДАННЫХ ДАННЫХ ДАННЫХ ФОРМОВ, КОТОРЫЙ СОБЫТИЕ. На каждом KeyStroke у вас самая обновленная версия формы, сохраненной в состоянии вашего компонента формы.

В Rection есть 3 ключевых деталя для форм:

• Вход – когда пользователь обновляет вход, мы огонь, обработчик событий (строка 20)
• Обработчик событий – обновления состояния с данными от пользователя (строки 11-15)
• Государство – хранение для ваших данных (строки 6-8)

Для более сложного примера, где Боб показывает несколько аккуратных хитростей на создание форм, очень многоразовый и код очень читаемый, прыгать в скринкасть.

Часть 42. Формы часть 2.

В этой части Боб еще больше расширяет наши знания о формах. Формы могут обрабатывать больше, чем просто <ввод/> Действительно Но все могут быть сложнее. Мы узнаем, как иметь дело с , <Выбор/> и <опция/> Для раскрывающихся меню и расширить дальше на <ввод/> Чтобы узнать больше о флажках и радиопередачах.

Часть 43. Формы практики

Отлично, теперь пришло время для некоторой практики.

Боб устанавливает новый вызов для нас и как обычно, лучше, если мы попытаемся решить ее на нашем собственном первом.

Если что-то не совсем работает, У Боб всегда есть наша спина с большим прохождением.

Часть 44. Контейнер/компонент архитектуры

В этом литье Боб вводит очень популярный шаблон архитектуры реагирования.

Очень часто, когда мы пишем сложные компоненты, мы в конечном итоге окажусь от многих строк кода в одном файле. Затем мы начинаем прокручивать вверх и вниз, чтобы добавить дополнительную функциональность и логику отображения. Это когда раскол контейнера/компонента становится полезным. Мы разделяем наши UI и деловые проблемы на разные компоненты в реакции. Есть много разных терминов вокруг: Smart/Dumb, контейнер/презентационные, все они относятся к той же идее разделения оказанных элементов из функциональности потока данных.

В нашем конкретном примере мы можем реализовать контейнер/компонент, если мы извлеким наш HTML из Визуализация () Метод в отдельный функциональный компонент и наше Form.tsx становится Formcontainer.tsx Отказ

Как видите, мы все еще передаем свои обработчики и данные как реквизиты в наш функционал <Форма компонента/> А внутри компонента мы сейчас называем обработчики и данные через реквизиты.

Часть 45. Meme Generator Capstone Project

Ты сделал это! Поздравляем при достижении проекта Capstone. В этом отлив Боб устанавливает окончательный вызов. Теперь мы можем создать наше собственное приложение, с нуля.

Если завершив весь проект в одном, чувствует себя запугивающим, Боб устанавливает проблемы Mini Worlhrough На скринкасте вести нас через завершение.

Удачи и счастливые кодировки!

Часть 46. Написание современных реагированных приложений

Отличная работа! Ваш проект теперь готов, и вы можете показать его своим друзьям и семье! Действительно что-то гордиться. Отличная работа!

В этом актеры Боб дает нам несколько советов о том, как идти в ногу со всеми изменениями в экосистеме RACT ECOSYSTEM и дает нам несколько советов о том, как мы узнали, что FA FA может быть сделано немного по-другому, например, используя функции стрелки ES6 или извлечения код в новые компоненты для повышения читаемости.

Часть 47. Идеи проекта для практики

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

Часть 48. Заключение

Поздравляем, мы сделали это! В этом литье мы быстро подведем итоги, что мы сделали в этом курсе и нарисуем то, что мы можем учиться в будущем.

Большое спасибо за курс Боб!

Спасибо за прочтение! Меня зовут на Borgen, я соучредитель Scrimba – Самый простой способ научиться кодировать. Вы должны проверить наш Отзывчивый веб-дизайн bootcamp Если хотите научиться строить современный веб-сайт на профессиональном уровне.

Оригинал: “https://www.freecodecamp.org/news/want-to-become-a-react-developer-947c9a6dbb76/”