function greet (name) {
  вернуть «Привет» + имя;
}  

Теперь вы можете поприветствовать любого, кого хотите, просто позвонив по номеру greet и указав его имя! Потрясающие. (Я предупреждал, что эта часть была базовой)

Использование реквизита в качестве аргумента компонента React

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

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

  function Hi () {
  return 
 Hello World! 
;
}  

Добавьте параметр props и замените World на {props.name} :

  function Hi (props) {
  return 
 Привет, {реквизит.имя}! 
;
}  

Что здесь происходит? Ну, сначала он просто отображает «Привет», потому что мы еще не передаем имя. Но помимо этого…

Когда React визуализирует компонент, он передает props компонента (сокращение от «properties») в качестве первого аргумента, как объекта. Объект props — это простой объект JS, где ключи — это имена свойств, а значения — это значения этих свойств.

Тогда вы можете спросить, откуда берутся реквизиты? Как их передать? Хороший вопрос.

Передача опоры компоненту

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

  ReactDOM.render (, document.querySelector ('# root'));  

Нам нужно передать свойство с именем «name» с именем человека, которого мы хотим поприветствовать, например:

  ReactDOM.render (, document.querySelector ('# root'));  

После внесения этого изменения в приложении теперь отображается «Hello Dave!» Потрясающие!

Передача реквизита очень похожа на установку атрибутов в теге HTML.Большая часть синтаксиса JSX заимствована из HTML.

В реквизитах есть классная особенность: в них можно передавать все, что угодно. Вы не ограничены строками или не пытаетесь угадать, что он сделает с вашей строкой ( cough Angular1). Помните, как раньше, 30 секунд назад, мы помещали JS-выражение в одинарные фигурные скобки? Что ж, вы можете сделать то же самое со значением свойства:

Вы можете передавать логические значения, числа, строки (как мы видели), функции и даже объекты.Синтаксис объекта выглядит немного странно («что ?? почему здесь двойные фигурные скобки ??»), но подумайте о нем как о одинарных фигурных скобках, окружающих {object: "literal"} , и все будет в порядке.

Не все — строка

Важно отметить: не передавайте каждое свойство в виде строки, заключенной в кавычки. Иногда это то, чего вы хотите, но не всегда. Обдумайте, к какому типу вы переходите, потому что это будет тот же тип!

Например, один из них передает строку «false», а другой передает логическое значение false :

Они будут иметь очень разные эффекты, поскольку строка «false» будет интерпретирована как правдивая — вероятно, не то, что вы хотите здесь.

Это отличие от HTML (где все является строкой) и некоторых других фреймворков, таких как Angular и Svelte, которые преобразуют строку в собственное значение JS. React вообще не анализирует свойства — они проходят через них нетронутыми, как и аргументы функций.

Приемная стойка

Внутри компонента, который получает несколько свойств, каждое из них будет отдельным свойством переданного объекта «props». Например, если у нас есть компонент с именем «HiFullName», который принимает два свойства, например:

Тогда внутреннее устройство этого компонента может выглядеть примерно так:

  function HiFullName (props) {
  возвращение (
    
 Привет, {реквизит.firstName} {props.lastName}! 
  );
}  

Между прочим, весь этот синтаксис — это React (в частности, JSX). Это не JavaScript для ES6. Это напоминает мне, что я хотел показать вам пару битов синтаксиса ES6, который упростит запись и чтение ваших компонентов.

Несколько битов ES6

Большинство компонентов, которые вы видите в дикой природе, не принимают аргумент, называемый «реквизит». Вместо этого они используют деструктурирующий синтаксис ES6 для извлечения значений из объекта props, который выглядит следующим образом:

  function Hi ({name}) {
  return 
 Здравствуйте, {name}! 
;
}  

Единственное, что здесь изменилось, так это то, что аргумент props стал похож на объект {name} .Это деструктурирующий синтаксис JavaScript (добавлен в ES6), а не React.

Здесь говорится: «Я ожидаю, что первым аргументом будет объект. Пожалуйста, извлеките из него свойство «name» и передайте его мне как переменную с именем «name» ».

Это избавляет вас от необходимости писать props.with повсюду, и дает ясно понять, наверху, что props ожидает этот компонент. Полезно для документации.

Еще один фрагмент синтаксиса ES6, который я хочу вам показать, и на этом мы закончили.(Чтобы не перегружать вас синтаксисом или чем-то еще, но вы, вероятно, увидите такой пример кода, и я хочу, чтобы вы были к нему готовы.) Это const и стрелочная функция :

  const Hi = ({name}) => {
  return 
 Здравствуйте, {name}! 
;
}  

const объявляет константу, а стрелочная функция — это все, что находится после первого знака равенства.

Сравните этот код с версией «функции» выше.Вы видите, что произошло? Вот трансформация, одно изменение за раз:

  // Обычная функция:
function Hi ({name}) {
  return 
 Здравствуйте, {name}! 
;
}

// Константа, содержащая анонимную функцию:
const Hi = function ({name}) {
  return 
 Здравствуйте, {name}! 
;
}

// Превращаем "функцию" в стрелку:
const Hi = ({имя}) => {
  return 
 Здравствуйте, {name}! 
;
}

// Необязательный шаг 3: снятие скобок, в результате чего
// "return" неявно, поэтому мы можем удалить и это.Оставив родителей
// для удобства чтения:
const Hi = ({имя}) => (
  
 Здравствуйте, {name}! 
)

// Необязательный шаг 4: Если компонент очень короткий, вы можете поместить
// все это в одной строке, без скобок:
const Hi = ({name}) => 
 Здравствуйте, {name}! 
;  

Твоя очередь

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

• Напишите новый компонент MediaCard , который принимает 3 свойства: title, body и imageUrl.Внутри компонента визуализируйте заголовок в теге

  , тело в теге

  и передайте imageUrl в тег img, например . Можете ли вы вернуть сразу все три вещи? Или их нужно обернуть в другой элемент?

• Визуализируйте MediaCard с помощью вызова ReactDOM.render и передайте необходимые реквизиты. Можете ли вы передать элемент JSX в качестве значения свойства? (совет: заключите его в одинарные фигурные скобки). Попробуйте выделить некоторые части основного текста жирным шрифтом, не изменяя реализацию MediaCard.
• Создайте компонент с именем Gate, который принимает 1 свойство с именем isOpen. Когда isOpen имеет значение true, сделать визуализацию компонента «открытой», а когда isOpen имеет значение false, сделать визуализацию «закрытой». Подсказка: вы можете выполнять условную логику внутри JSX с помощью тернарного оператора (вопросительный знак,?) Внутри одинарных фигурных скобок, например: {speed> 80? "Опасность!" : "вероятно хорошо"} (оценивается как «опасность!», если скорость больше 80, и «вероятно хорошо» в противном случае).

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

Очень легко продолжать читать, чувствуя, что все кристально чистое…

А потом, когда вы идете писать код самостоятельно… * POOF *, знания пропадают.

Не забудьте потратить некоторое время на то, чтобы попрактиковаться в том, чему вы научились!

Далее мы рассмотрим, как сделать ваше приложение интерактивным с состоянием .

Использование состояния в компонентах React

Нам больше не нужно просто сказать «привет», мы отправляемся в захватывающие новые неизведанные воды: включает и выключает свет ! 🎉 Я знаю, это очень интересно.Я все равно взволнован.

На данный момент у нас…

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

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

Наш проект будет страницей, на которой пользователь сможет включать и выключать свет, нажимая кнопку. И под «огнями» я имею в виду цвет фона (но, эй, если вы подключите это к Интернету вещей в своем доме, я точно хочу услышать об этом!).

Создать новый проект

Мы начнем с совершенно нового проекта. Зайдите сюда: https://codesandbox.io/s/new, сотрите содержимое index.js и введите:

  импортировать React из react;
импортировать ReactDOM из react-dom;

Банкетный зал() {
  возвращение (
    
 комната освещена 
  );
}

ReactDOM.render (<Комната />, document.getElementById ('root'));  

Это то, чего вы раньше не видели. Просто компонент Room , отображающий некоторый JSX. Но он ужасно яркий. Давай выключим свет.

Сделать компонент с отслеживанием состояния

Не знаю, знаете ли вы, что такое выключатели света, но они могут находиться в одном из двух состояний: ВКЛ или ВЫКЛ. Удобно, что React имеет функцию под названием state , которая позволяет компонентам отслеживать значения, которые могут измениться — идеальное место для хранения состояния нашего источника света.

Чтобы добавить состояние к нашему компоненту Room , мы можем либо превратить его в компонент класса , либо добавить состояние непосредственно к функции с помощью хуков . Мы вызовем хук useState React , чтобы создать часть состояния для хранения значения светового переключателя:

  function Room () {
  const [isLit, setLit] = React.useState (истина);

  возвращение (
    
 комната освещена 
  );
}  

Мы добавили вызов в React.useState вверху, передавая в начальном состоянии true . Он возвращает массив с двумя записями: первая - это само значение состояния (так что isLit будет истинным), а вторая - функция для изменения состояния.

Мы используем деструктуризацию массива , синтаксис [isLit, setLit] , чтобы разделить эти две записи и дать им имена. Кстати, этот синтаксис - это JavaScript для ES6, а не для React. Точно так же, как если бы мы записали это так:

  const state = React.useState (правда);
const isLit = состояние [0];
const setLit = состояние [1];  

Синтаксис деструктуризации стал короче.

Вы также можете импортировать useState

Быстро в сторону! Вы часто увидите useState, импортированную прямо из React, например:

  импортировать React, {useState} из «реагировать»;  

После этого вы можете напрямую позвонить по номеру useState (нет необходимости квалифицировать его с помощью React.useState ):

  константа [isLit, setLit] = useState (true);  

Любой способ подходит, но чаще его импортируют.Я сделал это другим способом, чтобы показать, что это работает в обоих направлениях, и чтобы не прерывать пример, заставляя вас изменить существующий import , а теперь я пошел и добавил целый раздел, в котором вас прерывают. Тем не мение. Вперед!

Как работает useState

То, как мы используем React.useState , может выглядеть немного странно.

Если вы какое-то время занимались кодированием вне React, вы, вероятно, знаете об области видимости переменной: переменная, объявленная в верхней части функции, будет стерта, стерта, забыта, как только функция вернется.

Итак ... как React может запоминать состояние между вызовами компонента?

Перед тем, как React вызовет ваш компонент, он устанавливает массив для отслеживания того, какие хуки вызываются. Когда вы вызываете useState в

React Tutorial: Обзор и пошаговое руководство

Я слышал о React с тех пор, как впервые начал изучать JavaScript, но признаюсь, что взглянул на него один раз, и это меня напугало. Я увидел то, что выглядело как связка HTML, смешанного с JavaScript, и подумал: , разве это не то, чего мы пытались избежать? Что такого особенного в React?

Вместо этого я сосредоточился только на изучении ванильного JavaScript и работе с jQuery в профессиональной среде.После нескольких неудачных попыток начать работу с React я, наконец, начал это понимать и начал понимать, почему я могу использовать React вместо ванильного JS или jQuery.

Я попытался объединить все, что узнал, в красивое введение, которым хочу поделиться с вами, так что вот оно.

Предварительные требования

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

Вот то, что я считаю предпосылками для React.

Голы

• Узнайте об основных концепциях React и связанных с ними терминах, таких как Babel, Webpack, JSX, компоненты, свойства, состояние и жизненный цикл.
• Создайте очень простое приложение React, демонстрирующее вышеуказанные концепции.

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

Что такое React?

• React - это библиотека JavaScript, одна из самых популярных, с более чем 100 000 звезд на GitHub.
• React - это не фреймворк (в отличие от Angular, который более самоуверен).
• React - проект с открытым исходным кодом, созданный Facebook.
• React используется для создания пользовательских интерфейсов (UI) во внешнем интерфейсе.
• React - это вид уровня приложения MVC (Model View Controller)

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

Мы рассмотрим все это и многое другое в статье, так что приступим.

Настройка и установка

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

Статический файл HTML

Этот первый метод не является популярным способом настройки React, и мы не будем использовать его в остальной части нашего руководства, но он будет знаком и легко понять, если вы когда-либо использовали библиотеку, такую ​​как jQuery, и это наименее страшный способ начать работу, если вы не знакомы с Webpack, Babel и Node.js.

Начнем с создания базового файла index.html . Мы собираемся загрузить три CDN в голову - React, React DOM и Babel. Мы также собираемся создать div с идентификатором root , и, наконец, мы создадим тег script , в котором будет жить ваш пользовательский код.

index.html

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

• React - API верхнего уровня React
• React DOM - добавляет методы, специфичные для DOM
• Babel - компилятор JavaScript, который позволяет нам использовать ES6 + в старых браузерах

Точкой входа для нашего приложения будет корневой элемент div , названный по соглашению. Вы также заметите тип сценария text / babel , который является обязательным для использования Babel.

Теперь давайте напишем наш первый блок кода React. Мы собираемся использовать классы ES6 для создания компонента React под названием App .

index.html

  class App расширяет React.Component {
  
}  

Теперь мы добавим метод render () , единственный необходимый метод в компоненте класса, который используется для визуализации узлов DOM.

index.html

  class App расширяет React.Component {
  render () {
      возвращение (
          
      );
  }
}  

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

index.html

  class App расширяет React.Component {
  render () {
    return  
 Привет, мир! 
 
  }
}  

Наконец, мы собираемся использовать метод React DOM render () для рендеринга созданного нами класса App в корневом div в нашем HTML.

index.html

  ReactDOM.render (<Приложение />, document.getElementById ('корень'))  

Вот полный код нашего индекса .html .

index.html

Теперь, если вы просмотрите свой index.html в браузере, вы увидите созданный нами тег h2 , отображаемый в DOM.

Круто! Теперь, когда вы это сделали, вы можете видеть, что React не так уж и страшен для начала.Это всего лишь несколько вспомогательных библиотек JavaScript, которые мы можем загрузить в наш HTML.

Мы сделали это в демонстрационных целях, но с этого момента мы собираемся использовать другой метод: Create React App.

Создать приложение React

Метод, который я только что использовал для загрузки библиотек JavaScript в статическую HTML-страницу и рендеринга React и Babel на лету, не очень эффективен, и его сложно поддерживать.

К счастью, Facebook создал приложение Create React App, среду, в которой предварительно настроено все необходимое для создания приложения React.Он создаст сервер разработки в реальном времени, использует Webpack для автоматической компиляции React, JSX и ES6, автоматически префикс файлов CSS и использует ESLint для тестирования и предупреждения об ошибках в коде.

Чтобы настроить create-response-app , запустите следующий код в своем терминале, на один каталог выше, чем вы хотите, чтобы проект жил.

  npx create-react-app react-tutorial  

После завершения установки перейдите во вновь созданный каталог и запустите проект.

  cd react-tutorial && npm start  

После того, как вы запустите эту команду, появится новое окно по адресу localhost: 3000 с вашим новым приложением React.

Приложение

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

Если вы посмотрите в структуру проекта, вы увидите каталог / public и / src , а также обычные node_modules , .gitignore , README.md и package.json .

В / общедоступном наш важный файл — index.html , который очень похож на статический файл index.html , который мы создали ранее — только корневой div . На этот раз библиотеки или скрипты не загружаются. Каталог / src будет содержать весь наш код React.

Чтобы увидеть, как среда автоматически компилирует и обновляет ваш код React, найдите строку, которая выглядит так в / src / App.js :

  Для начала отредактируйте src / App.js и сохраните его для перезагрузки.  

И заменить его любым другим текстом. После сохранения файла вы заметите, что localhost: 3000 компилируется и обновляется с новыми данными.

Удалите все файлы из каталога / src , и мы создадим наш собственный шаблонный файл без лишних слов. Мы просто сохраним index.css и index.js .

Для индекса .css , я просто скопировал и вставил содержимое примитивного CSS в файл. Если хотите, можете использовать Bootstrap или любую другую CSS-структуру, которую хотите, или вообще ничего. Просто мне легче работать.

Теперь в index.js мы импортируем React, ReactDOM и файл CSS.

SRC / index.js

  импортировать React из react
импортировать ReactDOM из React-dom
import './index.css'  

Давайте снова создадим наш компонент App .Раньше у нас был только

, но теперь я также добавляю элемент div с классом. Вы заметите, что мы используем className вместо class . Это наш первый намек на то, что здесь пишется код JavaScript, а не HTML.

SRC / index.js

  class App расширяет React.Component {
  render () {
    возвращение (
      

         
 Привет, React! 
 
      
    )
  }
}  

Наконец, мы отрендерим приложение в корень, как и раньше.

SRC / index.js

  ReactDOM.render (<Приложение />, document.getElementById ('корень'))  

Вот наш полный index.js . На этот раз мы загружаем Component как свойство React, поэтому нам больше не нужно расширять React.Component .

SRC / index.js

  import React, {Component} from 'react'
импортировать ReactDOM из React-dom
import './index.css'

class App extends Component {
  render () {
    возвращение (
      

         
 Привет, React! 
 
      
    )
  }
}

ReactDOM.render (<Приложение />, document.getElementById ('корень'))  

Если вы вернетесь к localhost: 3000 , вы увидите «Hello, React!» как раньше. Теперь у нас есть начало приложения React.

Инструменты разработчика React

Существует расширение React Developer Tools, которое значительно упростит вам жизнь при работе с React. Загрузите React DevTools для Chrome или любой другой браузер, в котором вы предпочитаете работать.

После установки при открытии DevTools вы увидите вкладку для React.Щелкните по нему, и вы сможете просматривать компоненты по мере их написания. Вы все еще можете перейти на вкладку «Элементы», чтобы увидеть фактический вывод DOM. Сейчас это может показаться не таким уж важным, но по мере того, как приложение становится более сложным, его необходимость в использовании возрастает.

Теперь у нас есть все инструменты и настройки, необходимые для начала работы с React.

JSX: JavaScript + XML

Как вы видели, мы использовали то, что выглядит как HTML в нашем коде React, но это не совсем HTML.Это JSX , что означает JavaScript XML.

С помощью JSX мы можем писать то, что выглядит как HTML, а также можем создавать и использовать наши собственные XML-подобные теги. Вот как выглядит JSX, присвоенный переменной.

JSX

  const heading = 
 Привет, React 
  

Использование JSX не обязательно для написания React. Под капотом он запускает createElement , который принимает тег, объект, содержащий свойства, и дочерние элементы компонента и отображает ту же информацию.Приведенный ниже код будет иметь тот же результат, что и приведенный выше JSX.

Нет JSX

  const heading = React.createElement ('h2', {className: 'site-heading'}, 'Hello, React!')  

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

• className используется вместо class для добавления классов CSS, поскольку class является зарезервированным ключевым словом в JavaScript.
• Свойства и методы в JSX - это camelCase - onclick станет onClick .
• Самозакрывающиеся теги должны заканчиваться косой чертой, например

Выражения JavaScript также могут быть встроены в JSX с помощью фигурных скобок, включая переменные, функции и свойства.

  const name = 'Таня'
const heading =  
 Привет, {name} 
   

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

Компоненты

На данный момент мы создали один компонент - компонент App . Почти все в React состоит из компонентов, которые могут быть компонентами класса или простыми компонентами .

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

Удалите класс приложения из индекса .js , вот так.

SRC / index.js

  импортировать React из react
импортировать ReactDOM из React-dom
импортировать приложение из './App'
import './index.css'

ReactDOM.render (<Приложение />, document.getElementById ('корень'))  

Мы создадим новый файл с именем App.js и поместим туда компонент.

src / App.js

  import React, {Component} from 'react'

class App extends Component {
  render () {
    возвращение (
      

         
 Привет, React! 
 
      
    )
  }
}

экспорт приложения по умолчанию  

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

Компоненты класса

Создадим еще один компонент. Мы собираемся создать таблицу. Сделайте Table.js и заполните его следующими данными.

SRC / Table.js

  import React, {Component} from 'react'

class Table extends Component {
  render () {
    возвращение (
      <таблица>
        
          
             Имя 
             Работа 
          
        
        
          
             Чарли 
             Дворник 
          
          
             Mac 
             Вышибала 
          
          
             Ди 
             Начинающая актриса 
          
          
             Деннис 
             Бармен 
          
        
      
    )
  }
}

экспорт таблицы по умолчанию  

Этот компонент, который мы создали, является компонентом пользовательского класса.Мы используем специальные компоненты с заглавной буквы, чтобы отличать их от обычных элементов HTML. Вернемся к App.js , мы можем загрузить таблицу, сначала импортировав ее в:

src / App.js

  импорт Таблица из ./Table  

Затем загрузив его в render () из App , где раньше у нас было «Hello, React!». Я также изменил класс внешнего контейнера.

src / App.js

  import React, {Component} from 'react'
импортировать таблицу из './Таблица'

class App extends Component {
  render () {
    возвращение (
      

        <Таблица />
      
    )
  }
}

экспорт приложения по умолчанию  

Если вы проверите свою рабочую среду, вы увидите, что Таблица загружена.

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

Простые компоненты

Другой тип компонента в React - это простой компонент , который является функцией. Этот компонент не использует ключевое слово class . Давайте возьмем нашу Table и сделаем для нее два простых компонента - заголовок таблицы и тело таблицы.

Мы собираемся использовать стрелочные функции ES6 для создания этих простых компонентов. Во-первых, заголовок таблицы.

SRC / Table.js

  const TableHeader = () => {
  возвращение (
    
      
         Имя 
         Работа 
      
    
  )
}  

Потом тело.

SRC / Table.js

  const TableBody = () => {
  возвращение (
    
      
         Чарли 
         Дворник 
      
      
         Mac 
         Вышибала 
      
      
         Ди 
         Начинающая актриса 
      
      
         Деннис 
         Бармен 
      
    
  )
}  

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

SRC / Table.js

  const TableHeader = () => {...}
const TableBody = () => {...}

class Table extends Component {
  render () {
    возвращение (
      <таблица>
        <Заголовок таблицы />
        
      
    )
  }
}  

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

Компонент класса должен включать render () , а возврат может возвращать только один родительский элемент.

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

Простой компонент

  const SimpleComponent = () => {
  return 
 Пример 
}  

Компонент класса

  class ClassComponent расширяет Component {
  render () {
    return 
 Пример 
  }
}  

Обратите внимание, что если return содержится в одной строке, скобки не нужны.

Стойка

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

Во-первых, давайте удалим все данные из нашего компонента TableBody .

SRC / Table.js

  const TableBody = () => {
  вернуться 
}  

Затем давайте переместим все эти данные в массив объектов, как если бы мы вводили API на основе JSON.Нам нужно будет создать этот массив внутри нашего render () .

src / App.js

  class App расширяет компонент {
  render () {
    константные символы = [
      {
        имя: 'Чарли',
        работа: «Дворник»,
      },
      {
        имя: 'Mac',
        работа: "Вышибала",
      },
      {
        имя: 'Ди',
        работа: «Аспринговая актриса»,
      },
      {
        имя: 'Деннис',
        работа: "Бармен",
      },
    ]

    возвращение (
      

        <Таблица />
      
    )
  }
}  

Теперь мы собираемся передать данные дочернему компоненту (, таблица ) со свойствами, вроде того, как вы могли бы передавать данные, используя атрибуты data- .Мы можем называть свойство как угодно, если это не зарезервированное ключевое слово, поэтому я выберу characterData . Данные, которые я передаю, представляют собой переменную с символами, и я заключу ее в фигурные скобки, поскольку это выражение JavaScript.

src / App.js

  возврат (
  

    <Таблица characterData = {characters} />
  
)  

Теперь, когда данные передаются в Table , мы должны работать над доступом к ним с другой стороны.

SRC / Table.js

  class Table extends Component {
  render () {
    const {characterData} = this.props

    возвращение (
      <таблица>
        <Заголовок таблицы />
        
      
    )
  }
}  

Если вы откроете React DevTools и проверите компонент Table , вы увидите массив данных в свойстве. Хранящиеся здесь данные известны как виртуальный DOM , который представляет собой быстрый и эффективный способ синхронизации данных с реальной DOM.

Однако этих данных пока нет в реальной модели DOM. В Table мы можем получить доступ ко всем реквизитам через this.props . Мы передаем только один реквизит, characterData, поэтому мы будем использовать this.props.characterData для получения этих данных.

Я собираюсь использовать сокращение свойства ES6 для создания переменной, содержащей this.props.characterData .

  const {characterData} = this.props  

Поскольку наш компонент Table на самом деле состоит из двух более мелких простых компонентов, я собираюсь передать его в TableBody , снова через props.

SRC / Table.js

  class Table extends Component {
  render () {
    const {characterData} = this.props

    возвращение (
      <таблица>
        <Заголовок таблицы />
         

Как эффективно использовать контекст React

Как создавать и предоставлять поставщиков и потребителей контекста React

Текущие доступные переводы:

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

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

Сначала давайте создадим файл по адресу src / count-context.js , и мы создадим наш контекст там:

 
 1 
 
 2import * as React from 'react' 
 
 3 
 
 4const CountStateContext = React.createContext () 
 
 5const CountDispatchContext = React.createContext () 
 

Во-первых, у меня нет начального значения для CountStateContext . Если я требуется начальное значение, я бы назвал React.createContext ({count: 0}) . Но я не включайте значение по умолчанию, и это сделано намеренно. Значение по умолчанию только полезен в такой ситуации:

 
 1function CountDisplay () {
 
 2 const {count} = React.useContext (CountStateContext) 
 
 3 return 
 {count} 
 
 
 4} 
 
 5 
 
 6ReactDOM.render (, document.getElementById ('⚛️')) 
 

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

Никому из нас не нравятся ошибки во время выполнения, поэтому ваша реакция коленного рефлекса может заключаться в добавлении значение по умолчанию, чтобы избежать ошибки времени выполнения.Однако какой смысл в контексте? если у него не было реальной стоимости? Если он просто использует значение по умолчанию, был предоставлен, то он не может принести много пользы. 99% времени, когда вы будет создавать и использовать контекст в вашем приложении, вы хотите, чтобы ваш потребители контекста (те, которые используют useContext ) для визуализации внутри провайдера что может дать полезную ценность.

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

Документы React предположить, что указание значения по умолчанию "может быть полезно при тестировании компонентов в изоляция, не оборачивая их ". Хотя это правда, что это позволяет вам сделать это, Я не согласен с тем, что это лучше, чем оборачивать компоненты необходимыми контекст. Помните, что каждый раз, когда вы делаете в тесте то, чего не делаете сделать в своем приложении, вы уменьшите степень уверенности, которую может дать тест вы. Для этого есть причины, но это не так. один из них.

Примечание. Если вы используете Flow или TypeScript, отсутствие значения по умолчанию может быть действительно раздражает людей, которые используют React.useContext , но я покажу вам как вообще избежать этой проблемы ниже. Продолжай читать!

Что это за штука CountDispatchContext ? Я играл некоторое время в контексте и общение с друзьями в Facebook, которые поиграйте с ним подольше, и я могу сказать вам, что самый простой способ избежать проблем с контекстом (особенно, когда вы начинаете вызывать , отправляйте в эффекты) заключается в разделении состояния и отправки в контексте.Останься со мной здесь!

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

Компонент настраиваемого поставщика

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

 
 1function App () {
 
 2 return (
 
 3  
 
 4  
 
 5  
 
 6  
 
 7) 
 
 8} 
 
 9 
 
 10ReactDOM.render (, document.getElementById ('⚛️')) 
 

Итак, давайте создадим компонент, который можно использовать следующим образом:

 
 1 
 
 2import * as React from 'react' 
 
 3 
 
 4const CountStateContext = React.createContext () 
 
 5const CountDispatchContext = React.createContext () 
 
 6 
 
 7function countReducer (состояние, действие) {
 
 8 switch (action.type) {
 
 9 {case 'increment': 
 
 10 return {count: state.count + 1} 
 
 11} 
 
 12 case 'декремент': {
 
 13 return {count: state.count - 1} 
 
 14} 
 
 15 по умолчанию: {
 
 16 выдать новую ошибку (`Необработанное действие type: $ {action.type} `) 
 
 17} 
 
 18} 
 
 19} 
 
 20 
 
 21function CountProvider ({children}) {
 
 22 const [state, dispatch] = React.useReducer (countReducer , {count: 0}) 
 
 23 return (
 
 24  
 
 25  
 
 26 {children} 
 
 27  
 
 28  
 
 29) 30} 
 
 31 
 
 32export {CountProvider} 
 

ПРИМЕЧАНИЕ: это надуманный пример, над которым я намеренно переусердствовал. покажет вам, на что будет похож более реальный сценарий. Это не значит это должно быть так сложно каждый раз! Не стесняйтесь использовать useState , если это соответствует вашему сценарию. Кроме того, некоторые провайдеры будут короткими и просто, как это, и другие будут НАМНОГО больше участвовать во многих крючки.

Custom Consumer Hook

Большинство API-интерфейсов для контекстного использования, которые я видел на практике, выглядят примерно так: это:

 
 1импорт * как React из 'react' 
 
 2import {SomethingContext} из 'some-context-package' 
 
 3 
 
 4функция YourComponent () {
 
 5 const something = React.useContext (SomethingContext) 
 
 6} 
 

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

 
 1import * as React from 'react' 
 
 2import {useSomething} from 'some-context-package' 
 
 3 
 
 4function YourComponent () {
 
 5 const something = useSomething () 
 
 6} 
 

Это дает вам то преимущество, что вы можете делать несколько вещей, которые я покажу вам в реализация сейчас:

 
 1 
 
 2import * as React from 'react' 
 
 3 
 
 4const CountStateContext = React.createContext () 
 
 5const CountDispatchContext = React.createContext () 
 
 6 
 
 7function countReducer (state, action) {
 
 8 switch (action.type) {
 
 9 case 'increment': {
 
 10 return { count: state.count + 1} 
 
 11} 
 
 12 case 'декремент': {
 
 13 return {count: state.count - 1} 
 
 14} 
 
 15 по умолчанию: {
 
 16 выдать новую ошибку (`Тип необработанного действия: $ {action.type} `) 
 
 17} 
 
 18} 
 
 19} 
 
 20 
 
 21 function CountProvider ({children}) {
 
 22 const [state, dispatch] = React.useReducer (countReducer, {count: 0} ) 
 
 23 return (
 
 24  
 
 25  
 
 26 {children} 
 
 27  
 
 
  
 
 29) 
 
 30} 
 
 31 
 
 32 function useCountState () {
 
 33 const context = React.useContext (CountStateContext) 
 
 34 if (context === undefined) {
 
 35 throw new Error ('useCountState должен использоваться в CountProvider') 
 
 36} 
 
 37 return context 
 
 38} 
 
 39 
 
 40function useCountDispatch () {
 
 41 const context = React.useContext (CountDispatchContext2) 
 if (context === undefined) {
 
 43 throw new Error ('useCountDispatch должен использоваться в CountProvider') 
 
 44} 
 
 45 контекст возврата 
 
 46} 
 
 47 
 
 48export {CountProvider, useCountState, useCountDispatch } 
 

Во-первых, пользовательские хуки useCountState и useCountDispatch используют React.useContext , чтобы получить предоставленное значение контекста из ближайшего ГрафПровайдер . Однако, если значение отсутствует, мы выдаем полезную ошибку сообщение, указывающее, что ловушка не вызывается в функциональном компоненте который отображается в CountProvider . Это определенно ошибка, поэтому сообщение об ошибке ценно. #FailFast

Пользовательский потребительский компонент

Если вы вообще можете использовать хуки, пропустите этот раздел.Однако если вам нужно для поддержки React < 16.8.0, или вы думаете, что контекст должен использоваться компоненты класса, то вот как вы могли бы сделать что-то подобное с API на основе рендеринга для потребителей контекста:

 
 1function CountConsumer ({children}) {
 
 2 return (
 
 3  
 
 4 {context => {
 
 5 if (context === undefined) {
 
 6 throw new Error ('CountConsumer должен использоваться в CountProvider') 
 
 7} 
 
 8 возвращать дочерние элементы (контекст) 
 
 9}} 
 
 10  
 
 11) 
 
 12} 
 

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

TypeScript / Flow

Я обещал показать вам, как избежать проблем с пропуском defaultValue при использовании TypeScript или Flow. Угадай, что! Делая то, что я предлагаю, вы по умолчанию избежать проблемы! На самом деле это вообще не проблема.Оцените это:

 
 1 
 
 2import * as React from 'react' 
 
 3 
 
 4type Action = {
 

Как изучить React.js в 2020 году

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

Learn React [Быстро || Быстро || Легко]

Нет возможности выучить что-то легким путем. Ты должен быть терпеливым. Это касается и разработчиков. Лично мне нравится быть разработчиком, потому что всегда будет чему поучиться. Если вам интересно, вы не разочаруетесь, став разработчиком.Обучение - это всегда вызов, задача отточить свои навыки, если вызов и умение находятся в равновесии. Вот почему нужно время, чтобы изучить React.

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

«Мне предстояло собеседование при приеме на работу, где меня попросили завершить проект в React. Я сел в субботу и проработал The Road to Learn React, а в воскресенье я завершил свой проект, оставив достаточно времени. мое интервью в среду.За один уик-энд мне стало комфортно работать независимо в React с 0% до 80% ». (Источник)

Есть несколько технических стеков, которые люди хотят изучить с помощью React прямо сейчас. Я хочу подобрать несколько из них и дайте краткое объяснение, почему не стоит объединять их с React во время его изучения:

• Изучите React с TypeScript? Ни в коем случае, сначала изучите React, прежде чем преобразовывать JavaScript в типизированный язык. Не только Ванильный код JavaScript будет набираться с помощью TypeScript, а также ваших компонентов React и всего, что с ними связано.Это станет беспорядком и подавляющим, если вы не изучите сам React с нуля. Кроме того, 99% учебных пособий и курсов по React написаны не на TypeScript, поэтому это усложняет задачу.

• Изучите React с Redux? Redux - популярная библиотека управления состоянием для JavaScript. Опять же, сначала изучите React и его встроенное управление состоянием, прежде чем обращаться к сложной внешней библиотеке управления состоянием, которая предназначена для использования в крупномасштабных и сложных приложениях.В React уже есть множество инструментов для обработки состояния в вашем приложении. Подавляющему большинству приложений React даже не нужен Redux или какая-либо другая библиотека управления состоянием. Сначала узнайте, как работать с состоянием в React, прежде чем использовать другую библиотеку для решения этой проблемы. Redux усложняет React для начинающих.

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

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

Предварительные требования для React

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

Сначала выучите React или JavaScript?

Вы должны понимать хотя бы основы JavaScript, часто называемого JavaScript ES5, и хорошо разбираться в HTML и CSS.React также использует синтаксис JavaScript, чаще всего называемый JavaScript ES6 и выше (ES7, ES8, ES9). Вот почему для изучения React имеет смысл освоиться хотя бы с JavaScript ES6.

Есть много людей, которые рекомендуют изучить веб-разработку и изучить основы JavaScript в качестве предварительного условия перед изучением React. Навыки, которые они рекомендуют приобрести, выходят далеко за рамки того, что необходимо для создания базовых приложений с React.js. Вот пара из них:

• Функции являются первоклассными гражданами в JavaScript
• bind (), apply () и call ()
• области и закрытие
• this
• Методы объекта
• Методы массива
• Прототипное наследование -> Класс ES6
• Обратные вызовы и обещания
• Цикл событий
• Пузыри событий
• Регулярные выражения
• Обработка ошибок
• JavaScript ES6 и выше
• Подъем, мемоизация
• Декларативное против императивного программирования
• Функциональное против объектного- ориентированное программирование

Однако я считаю неправдой обладать всеми этими знаниями.Напротив, новичков, плохо знакомых с JavaScript, React и веб-разработкой, могут разочаровать. Вы не хотите торчать в стране «областей действия и замыканий», в то время как вместо этого вы можете создавать реальные проекты, которые мотивируют вас продолжать работу. Момент «Ага» для схватывания замыканий наступит по пути. Лично я не знал примерно половины вещей из списка, когда начинал изучать React, и мне все еще приходится искать регулярные выражения в Интернете, потому что я не особо беспокоюсь о них; и я до сих пор помогаю компаниям с их проектами на JavaScript.

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

Изучить React или jQuery?

Исторически jQuery заполнял пробел между обычным JavaScript и современными библиотеками / фреймворками, такими как React, Angular и Vue. Ранний JavaScript был не так эффективен в браузере и других предметах, как сейчас. Вот почему возникла реальная потребность в jQuery. Однако современный JavaScript может справиться со всем сам. Отсюда моя рекомендация: не беспокойтесь о jQuery.

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

Зачем мне изучать React?

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

Это относится не только к React, но и ко всем другим библиотекам и фреймворкам, которые вы узнаете в своей жизни как разработчик. Какую проблему это решает для меня? Слишком часто люди ставят библиотеки на вершину своего технического стека, не испытывая при этом проблемы. Вот почему я считаю, что реализация идентичного приложения с использованием ванильного JavaScript и React - отличный опыт обучения.Он демонстрирует вам, какую проблему решает новая библиотека. Тот же метод можно применить при принятии решения, хотите ли вы изучить React или другое решение, такое как Vue или Angular. Создайте базовое приложение с решениями по вашему выбору и сравните свой опыт разработки. Какое из решений вам подошло?

Изучите React.js шаг за шагом

После того, как мы получили ясность в отношении изучения только React и предварительных требований React, давайте посмотрим, как изучать React с нуля.Я твердо уверен, что лучше всего начать с официальной документации React. Документация идет в ногу с последними изменениями, не предвзята, учит вас всему в стиле React и собрана основной командой React и сообществом React в ваших интересах.

Учитесь с помощью React Docs

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

• Руководство для начинающих
• Отсутствие коммерческого интереса
• Самоуверенный способ ведения дел
• , тщательно продуманный основными участниками и сообществом
• Последние материалы и обновления для новых версий
• Ссылки на API

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

Изучите React с помощью проектов

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

Например, есть люди, которые хотят изучать React, создавая игры. Думаю, вы найдете множество реализаций React Tic Tac Toe.Реализуйте игру в React самостоятельно и сравните свое решение с другими решениями. Вы будете учиться на своих ошибках и научитесь сравнивать свой исходный код с реализацией других.

Learn React by Doing

Learn React by Making - одна из наиболее распространенных рекомендаций, которые вы слышите от других разработчиков, она применима практически ко всему в жизни, потому что каждая задача представляет собой новую задачу для роста React Developer. Кроме того, слишком легко пассивно потреблять видеокурсы, книги и учебные пособия.Пачкайте руки и реализуйте что-нибудь самостоятельно. Застрять на проблеме, впасть в отчаяние, обдумать проблему, оторвавшись от экрана, в конце концов решить проблему и пожинать плоды. Это основная структура обучения чему-либо.

Учитесь React Every Day

Примите решение придерживаться программирования каждый день. Вы можете принять участие в конкурсе «100 дней кода», написать об этом в Twitter или на своем сайте. Сделайте это повседневной привычкой. Только придерживаясь этого какое-то время, проявляя настойчивость и кодируя каждый день, вы в конечном итоге станете разработчиком React.Это марафон, а не спринт.

Изучите React публично

Лучший способ узнать что-то новое - это изучить это публично. Ознакомьтесь с отзывами других разработчиков React, демонстрируя свои достижения. Если вы достигли определенного рубежа в своем проекте React, покажите его другим и попросите их отзывы. Это пара широко известных платформ для обмена идеями о React:

Вы не только получите отзывы от людей, но и углубитесь в React, присоединившись к обсуждениям.Станьте частью сообщества. Еще один отличный способ узнать что-то новое самому - объяснить это кому-то другому. Может быть, вы на шаг впереди других новичков в React и можете им помочь. Ознакомьтесь с React Beginner Thread в React Subreddit , где вы можете помочь другим разработчикам React решить их проблемы.

Научитесь использовать React

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

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

Настройка React для начинающих

Как начать собственно кодирование проекта React? Если у вас нет установленного редактора / терминала или IDE и вы просто хотите проверить, как React чувствует себя в кодовой среде, проверьте онлайн-редактор кода под названием CodeSandbox. Поиграйте с React и проверьте, нравится ли он вам. Однако, если вы хотите научиться разрабатывать приложения React на своем локальном компьютере, ознакомьтесь с этими руководствами по установке MacOS и Windows, чтобы они работали на вашем компьютере:

Оба руководства содержат минимальный набор рекомендуемых инструментов, которые помогут вам начать работу с React. :

• Выполнение JavaScript с помощью Node и NPM: Пока Node.js позволяет запускать JavaScript вне браузера, NPM (диспетчер пакетов узлов) позволяет устанавливать в проект библиотеки, такие как React. Вам понадобятся оба инструмента практически для любого другого современного проекта JavaScript.
• Разработка с помощью Visual Studio Код: Популярная легкая среда IDE, которая является идеальным решением для разработчиков React. Visual Studio Code (VS Code) поставляется с редактором для изучения разработки на React и терминалом (командной строкой) для запуска вашего проекта React и установки для него библиотек.
• Учитесь с помощью create-react-app: Готовое решение от Facebook и команды React, которое поможет вам начать работу с легким стартовым проектом React с нулевой конфигурацией. 99% учебных пособий по React построены поверх этого начального проекта, чтобы вы могли начать работу с React. Вы можете сосредоточиться только на изучении React, в то время как обо всех инструментах позаботится приложение create-react-app.
• Форматирование с Prettier: Оптимизированный модуль форматирования кода, который автоматически форматирует ваш код в среде разработки.Он поставляется с простой настройкой и интеграцией для популярных редакторов (VS Code). Пока вы изучаете веб-разработку на React, он показывает вам, как форматировать код React.

Изучите Advanced React

После того, как вы изучите основы React с компонентами React, свойствами / состоянием и синтаксисом React JSX для возврата действительного HTML в JavaScript, вы сможете глубже погрузиться в расширенные концепции и шаблоны React. Вот несколько важных из них, которые не исчезнут так быстро:

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

Изучите React Online

После того, как вы изучите документацию React, чтобы узнать об основах и некоторых расширенных концепциях и шаблонах, и после того, как вы начали самостоятельно создавать приложение React, обязательно ознакомьтесь с другими ресурсами React в Интернете. Обратите внимание, что я упоминаю об этом очень поздно в этом руководстве, потому что часто новички в React застревают в бесконечной истории о простом потреблении контента для изучения React.На что я хочу обратить внимание: начните производить, разрабатывая приложения React самостоятельно или описывая свои знания. Ключевым моментом здесь является обучение на практике. Каждую проблему можно найти в Интернете. А затем, если вы хотите узнать больше о React, ознакомьтесь со всеми другими ресурсами, чтобы изучить React в Интернете. Я рекомендую не только использовать один вид учебных материалов, но и разнообразить свои учебные ресурсы:

• Руководства по React
• Книги по React
• Видео по React (YouTube, Twitch, онлайн-курсы)
• Веб-разработка или подкасты React
• Интерактивные курсы

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

«Изначально, когда я впервые обратился к React, я купил курс Udemy у другого учителя. Однако после нескольких видеороликов я обнаружил, что очень теряюсь. Учитель из этой высоко оцененной серии сначала старался не усложнять задачу, но потом Ослепляет вас трудностями для понимания концепций и кода и неспособностью хорошо информировать о том, что происходит. (Источник)

Если вы любите читать, просмотрите онлайн-руководства и книги по React. Печатные книги также являются хорошими ресурсами для изучения React в автономном режиме. Несмотря на то, что многие люди опасаются, что книги устареют слишком быстро, я могу только утверждать, что большинство книг издаются самостоятельно, и автору требуется всего 1 день, чтобы выложить новую версию в Интернете (даже на Amazon). Я считаю, что в настоящее время обновление видео занимает больше времени, чем письменный контент.

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

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

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

Дорожная карта Learn React

После того, как вы изучите только React и почувствуете себя комфортно с его базовыми и расширенными деталями реализации, есть множество путей обучения, которые вы можете использовать, чтобы улучшить свои навыки React.Экосистема React не самоуверенная, а инновационная и обширная. Пара рекомендаций:

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

Как преобразовать компонент класса React в компонент функции

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

Отчасти это просто потому, что разработчики страдают «синдромом блестящего объекта», а хуки новые и блестящие, но есть и веские причины для перехода.

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

В чем разница между компонентами класса и компонентами функций?

Ну, попросту говоря, один класс, а другой - класс... функция!

Возьмите эти примеры ниже. Первый - это компонент класса, второй - функциональный компонент. Они оба делают одно и то же.

  // Пример компонента класса

class MyComponent расширяет React.Component {
  
  render () {
    return 
 Привет, {this.props.name}
  }
  
}


// Пример функционального компонента

function MyComponent (props) {
  return 
 Здравствуйте, {props.name} 
}  

Оба компонента принимают свойство (имя) и отображают `Hello, {name} `.Это очень простой пример, но мы уже видим некоторые отличия.

Компонент класса должен расширять класс React Component и указывать метод render . В то время как компонент функции - это просто функция, а метод рендеринга - это просто возвращаемое значение функции.

Зачем преобразовывать компонент класса в функциональный компонент

Если у вас немного более старая кодовая база и вы хотите реорганизовать некоторые из ваших компонентов в функциональные компоненты, то вы попали в нужное место!

Осторожно! Не все компоненты класса можно преобразовать в функции! Все еще есть случаи, когда вам нужно использовать компонент класса.Но в 99% случаев вы будете в порядке с функциональным компонентом.

Когда нельзя использовать функциональный компонент?

В некоторых случаях функциональный компонент просто не работает. Мы быстро обсудим пару, а может быть и больше! Считайте себя предупрежденным.

Если вам нужен конструктор

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

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

Если вам нужно расширить компонент

В Javascript классы могут расширять другие классы, таким образом наследуя прототип родителя. Фактически, если вы создаете компонент класса, у вас будет для расширения базового компонента из React.Это более или менее невозможно с функциональными компонентами, поэтому я бы не стал пытаться

Компоненты более высокого порядка

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

Побочные эффекты объединенных обновлений состояния

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

В качестве примера, если вы сделаете это

  class MyComponent extends React.Component {
  
  onSomeEventHandler (newName) {
    
    this.setState ({
      counter: this.state.counter + 1,
      имя: newName
    }, () => {
      console.log ('Счетчик И имя обновлены!')
    })
    
  }
   
}  

Вам будет сложно точно воспроизвести эту функциональность с помощью функционального компонента.

Быстрые шаги для преобразования в функциональный компонент

1. Измените класс на функцию

Измените

  class MyComponent extends React.Component {
  // ...
}  

до

  function MyComponent (props) {
  // ...
}  

2. Удалите метод рендеринга

Удалите метод рендеринга, но сохраните все после & включая возврат . Сделайте это последним утверждением в вашей функции.

Из номера

  //...
  render () {
    
    return (
 Привет, мир 
);
  
  }
// ...  

To

  function MyComponent (props) {
  // ...

  return (
 Привет, мир 
);
  
} // конец функции  

3. Преобразуйте все методы в функции

Методы класса не будут работать внутри функции, поэтому давайте преобразуем их все в функции (замыкания).

From

  class MyComponent extends React.Component {
  
  onClickHandler (e) {
    //...
  }
  
}  

  function MyComponent {
  
  const onClickHandler = (e) => {
    // ...
  }
  
}  

4. Удалите ссылки на this

Переменная this в вашей функции больше не будет очень полезной. Удалите ссылки на него во всем рендере и функциях.

Изменить

  clas MyComponent (props) extends React.Component {
  
  // ...
  
  mySpecialFunction () {
    console.log ('вы нажали кнопку!')
  }
  
  onClickHandler (e) {
    этот.mySpecialFunction ();
  }
  
  
  render () {
    возвращение (
      

        
 Здравствуйте, {this.props.name} 
         Нажми меня! 
      
    );
  }
  
}  

To

  function MyComponent (props) {
  
  // ...
  
  const mySpecialFunction = () => {
    console.log ('вы нажали кнопку!')
  }
  
  const onClickHandler = (e) => {
    mySpecialFunction ();
  }
  
  возвращение (
    

      
 Здравствуйте, {реквизит.имя} 
       Нажми меня! 
    
  );
  
}  

5. Удалить конструктор

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

1. useState

Вместо

  конструктор (props) {
  супер (реквизит);
  // Устанавливаем начальное состояние
  this.state = {
    счетчик: 0,
    название: ""
  }
}  

Используйте хук useState

  function MyComponent (props) {
  
  константа [счетчик, setCounter] = useState (0);
  const [имя, setName] = useState ("");
  
}  

2.Удаление привязки обработчика событий

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

  конструктор (подпорки) {
  this.onClickHandler = this.onClickHandler.bind (это);
}  

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

6. Замените this.setState

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

Заменить это;

  class MyComponent расширяет React.Component {
  
  onClickHandler (e) {
    this.setState ({count: this.state.count + 1})
  }
  
}  

С этим;

  function MyComonent {
  
  const [количество, setCount] = useState (0)
  
  const onClickHandler = e => {
    
    setCount (счетчик + 1);
    
  }
  
}  

7. useEffect для побочных эффектов обновления состояния

Помните, как this.setState мог принимать обратный вызов, который запускался после обновления состояния? Наша функция обновления useState не делает этого.Вместо этого мы должны использовать хук useEffect. Однако это не работает точно так же! useEffect срабатывает всякий раз, когда изменяются его зависимости.

Если вы это сделаете;

  this.setState ({counter: this.state.counter + 1}, () => {
  console.log ('Счетчик обновлен!')
})  

Сделайте это вместо этого

  const [counter, setCounter] = useState (0)

useEffect (() => {
  console.log ('счетчик изменен!')
}, [counter])  

8. Замените методы жизненного цикла хуками

ComponentDidMount

Вместо использования метода componentDidMount используйте ловушку useEffect с пустым массивом зависимостей.

  useEffect (() => {
  console.log ('компонент установлен!')
}, []) // обратите внимание на пустой массив здесь  

ComponentWillUnmount

Вместо использования метода componentWillUnmount для очистки перед удалением компонента из дерева React, верните функцию из хука useEffect с пустым массивом зависимостей;

  useEffect (() => {
  console.log ('компонент установлен')
  
  // возвращаем функцию для выполнения при размонтировании
  return () => {
    приставка.log ('компонент будет отключен')
  }
}, []) // обратите внимание на пустой массив  

ComponentDidUpdate

Если вы не передадите ничего в качестве второго аргумента для useEffect, он будет срабатывать каждый раз при обновлении компонента. Поэтому вместо использования componentDidUpdate используйте;

  useEffect (() => {
  
  console.log ('компонент обновлен!')
  
}) // уведомление, без второго аргумента  

Примеры компонентов, преобразованных в функции

Пример 1 - простое состояние

Замените это

  import React, {Component} from 'react';

class MyComponent расширяет Component {
  
  constructor (props) {
    
    супер (реквизит);
    
    этот.state = {
      count: props.count || 0
    }
    
    this.onClickHandler = this.onClickHandler.bind (это);
    
  }
  
  onClickHandler (e) {
    
    this.setState ({
      count: this.state.count + 1;
    })
    
  }
  
  render () {
    возвращение (
      
 Количество: {this.state.count} 

          
 Подсчитайте isis: {this.state.count} 
         Увеличить счет 
      
    );
  }
}  

С этим импортом

  React {useState} из response;

function MyComponent (props) {
  
  const [count, setCount] = useState (props.счет || 0);
  
  const  

Введение в хуки в React

Если вы читали Twitter, то, вероятно, знаете, что хуки - это новая функция React, но вы можете спросить , как мы на самом деле их используем? В этом посте мы собираемся показать вам несколько примеров того, как использовать хуки.

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

Мотивация за крючками

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

Обычно с этим обычно справляются:

• компоненты высшего порядка или
• Комплекс рендеринга

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

Hooks призван решить все эти проблемы, позволяя вам писать функциональные компоненты, которые имеют доступ к таким функциям, как состояние, контекст, методы жизненного цикла, ссылка и т. Д.без написания компонента класса.

Крючки Alpha

Прежде чем мы углубимся, важно отметить, что API хуков еще не доработан.

Кроме того, официальные документы очень хороши, и мы рекомендуем вам прочитать их, в частности, потому что они раскрывают мотивы хуков.

Содержание

Прочитать позже?

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

Никакого спама и легко отказаться от подписки.

Как хуки сопоставляются с классами компонентов

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

Напомним, что при написании классов компонентов нам часто требуется: