Рубрики
Без рубрики

Реагировать для начинающих – avect.js справочник для передних разработчиков

Реагирование является одним из самых популярных javaScript Frameworks, когда-либо созданных, и я считаю, что это один из лучших инструментов там. Целью данного руководства является предоставление руководства стартера для реагирования на изучение. В конце книги у вас будет базовое понимание: что

Автор оригинала: FreeCodeCamp Community Member.

Реагирование является одним из самых популярных javaScript Frameworks, когда-либо созданных, и я считаю, что это один из лучших инструментов там.

Целью данного руководства является предоставление руководства стартера для реагирования на изучение.

В конце книги у вас будет базовое понимание:

  • Что реагировать и почему это так популярно
  • Как установить реагирование
  • Реагистрационные компоненты
  • Состояние реагирования
  • Реагнийный реквизит
  • Обработка пользовательских событий в реакции
  • Срок службы жизненного цикла в компоненте реагирования

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

Эта книга особенно написана для программистов JavaScript, которые новые для реагирования. Так что давайте начнем.

Что реагирует?

РЕАКТ – это библиотека JavaScript, которая направлена на упрощение разработки визуальных интерфейсов.

Разработано на Facebook и выпущено в мир в 2013 году, он едет некоторые из наиболее широко используемых приложений, питание Facebook и Instagram между другими другими приложениями.

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

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

Реагирование само по себе имеет очень маленький API, и вы в основном должны понимать 4 концепции, чтобы начать:

  • Составные части
  • Jsx.
  • Состояние
  • Реквизит

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

И ты можешь Скачать этот справочник в формате PDF/EPUB/MOBI бесплатно Отказ

Краткое изложение справочника

  • Сколько JavaScript вам нужно знать, чтобы использовать реагирование
  • Почему вы должны научиться реагировать?
  • Как установить реагирование
  • Реагистрационные компоненты
  • Введение в JSX.
  • Использование JSX для создания пользовательского интерфейса
  • Разница между JSX и HTML
  • Встраивание JavaScript в JSX
  • Управляющее состояние в реакции
  • Компонент реквизит в реакции
  • Поток данных в приложении React
  • Обработка пользовательских событий в реакции
  • Срок службы жизненного цикла в компоненте реагирования
  • Куда пойти отсюда

Сколько JavaScript вам нужно знать, чтобы использовать реагирование

Прежде чем прыгать прямо в реакцию, вы должны иметь хорошее понимание некоторых ядных концепций JavaScript.

Вам не нужно быть экспертом JavaScript, но я думаю, что вам нужен хороший обзор:

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

Почему вы должны научиться реагировать?

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

Это из-за нескольких причин.

  1. Реагировать очень популярен. Как разработчик, вполне вероятно, что вы собираетесь работать над реагированным проектом в будущем. Возможно, существующий проект, или, возможно, ваша команда захочет вас работать над новым приложением на основе реагирования.
  2. Многие инструменты сегодня построены с использованием реакции на ядро. Популярные рамки и инструменты, такие как Next.js, GATSBY, и многие другие используют реакцию под капотом.
  3. В качестве инженера Frontend React, вероятно, собирается подняться в собеседование.

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

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

Как установить реагирование

Есть несколько разных способов установки реагирования.

Для начала я настоятельно рекомендую один подход, и это использует официально рекомендуемый инструмент под названием Create-React-App Отказ

Create-React-App Это приложение командной строки, направленное на то, чтобы выставить вас на скорость с реагированием в кратчайшие сроки.

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

Смотрите моего руководства NPX здесь: https://flaviocopes.com/npx/

NPX поставляется с NPM (С версии 5.2). Если у вас уже нет NPM установлена, сделайте это сейчас из https://nodejs.org (NPM установлен с узлом).

Если вы не уверены, какая версия NPM у вас есть, запустите NPM -V Чтобы проверить, нужно ли обновить.

Совет: Проверьте мой учебник с терминалом OSX на https://flaviocopes.com/macos-terminal/ Если вы незнакомы с использованием терминала. Это относится к Mac и Linux.

Когда вы запустите NPX Create-raction-app <имя приложения> , NPX собирается в Скачать Самые последние Create-React-App Выпуск, запустите его, а затем удалите его из вашей системы.

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

Давайте начнем тогда:

npx create-react-app todolist

Это когда он закончил работу:

Create-React-App Создана структура файла в папке, которую вы сказали ( ToList в этом случае) и инициализировали Гит Репозиторий.

Он также добавил несколько команд в Package.json файл:

Таким образом, вы можете немедленно запустить приложение, перейдя в недавно созданную папку приложения и запущенную NPM начать Отказ

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

Теперь вы готовы работать над этим приложением!

Реагистрационные компоненты

В последнем разделе вы видели, как создать свое первое приложение на реагирование.

Это приложение поставляется с серией файлов, которые делают различные вещи, в основном связанные с конфигурацией, но есть один файл, который выделяется: App.js Отказ

App.js это первый реактивный компонент ты встречаешь.

Его код это:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    
logo

Edit src/App.js and save to reload.

Learn React
) } export default App

Приложение, созданное с использованием реагирования или одного из других популярных фреймворков Frontend, таких как Vue и Svelte, создана с использованием десятков компонентов.

Но давайте начнем с анализа этого первого компонента. Я собираюсь упростить этот код компонента, как это:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return /* something */
}

export default App

Вы можете увидеть здесь несколько вещей. Мы Импорт некоторые вещи, а мы Экспорт Функция под названием Приложение Отказ

Вещи, которые мы импортируем в этом случае, являются библиотекой JavaScript (Package React NPM), изображение SVG и файл CSS.

Create-React-App Установлено таким образом, что позволяет нам импортировать изображения и CSS для использования в нашем JavaScript, но это не то, что вы должны заботиться о сейчас. Что вам нужно заботиться о том, это концепция составная часть

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

Похоже …| HTML Но у него есть какой-то JavaScript в него.

Это Jsx , особый язык, который мы используем для создания вывода компонента. Мы поговорим больше о JSX в следующем разделе.

В дополнение к определению некоторого возврата JSX, компонент имеет несколько других характеристик.

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

Компонент также может получать данные из других компонентов. В этом случае мы говорим о реквизит Отказ

Не волнуйтесь, мы собираемся подробно посмотреть на все эти условия (JSX, штат и реквизит) в ближайшее время.

Введение в JSX.

Мы не можем говорить о реагировании без предварительного объяснения JSX.

В последнем разделе вы встретили свой первый компонент реагирования, Приложение Компонент, определенный в приложении по умолчанию, построенному Create-React-App Отказ

Его код был этим:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    
logo

Edit src/App.js and save to reload.

Learn React
) } export default App

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

Мы называем JSX все, завернутые внутри скобки, возвращаемые компонентом:

logo

Edit src/App.js and save to reload.

Learn React

Это выглядит Как HTML, но это не очень HTML. Это немного отличается.

И немного странно иметь этот код в файле JavaScript. Это не похоже на JavaScript вообще!

Под капотом отреагируйте jsx, и он преобразует его в JavaScript, что браузер сможет интерпретировать.

Итак, мы пишем JSX, но в конце есть шаг перевода, который делает его перевариваемой для переводчика JavaScript.

Реагировать дает нам этот интерфейс по одной причине: Проще построить интерфейсы пользовательского интерфейса с помощью JSX Отказ

Как только вы получите более знакомые с этим, конечно.

В следующем разделе мы поговорим о том, как JSX позволяет вам легко составить пользовательский интерфейс, то мы посмотрим на различия с «обычным HTML», которые вам нужно знать.

Использование JSX для создания пользовательского интерфейса

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

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

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

Но компонент React может быть создан в одном файле другого компонента, если вы планируете только использовать его только в этом компоненте. Здесь нет «правила», вы можете сделать, что вам лучше всего.

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

Чтобы сохранить вещи простыми, давайте создадим компонент в том же App.js файл.

Мы собираемся создать Welcomessage составная часть:

function WelcomeMessage() {
  return 

Welcome!

}

Видеть? Это простая функция, которая возвращает линию JSX, которая представляет собой P HTML-элемент.

Мы собираемся добавить его в App.js файл.

Теперь внутри Приложение Компонент JSX мы можем добавить Чтобы показать этот компонент в пользовательском интерфейсе:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function WelcomeMessage() {
  return 

Welcome!

} function App() { return (
logo

Edit src/App.js and save to reload.

Learn React
) } export default App

И вот результат. Можете ли вы увидеть «Добро пожаловать!» Сообщение на экране?

Мы говорим, что Welcomessage это Дочерний компонент приложения и Приложение это его родительский компонент.

Мы добавляем Компонент, как если бы он был частью HTML-языка.

Это красота компонентов реагирования и JSX: мы можем составить интерфейс приложения и использовать его, как мы пишем HTML.

С некоторыми различиями, как мы увидим в следующем разделе.

Разница между JSX и HTML

JSX вид выглядит как HTML, но это не так.

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

Одно из различий может быть совершенно очевидно, если вы смотрели на Приложение Компонент JSX: есть странный атрибут, называемый классное значение Отказ

В HTML мы используем Класс атрибут. Это, вероятно, самый широко используемый атрибут по разным причинам. Одной из этих причин является CSS. Класс Атрибут позволяет легко стирать элементы HTML, а CSS Frameworks, как Tailwind, поставил этот атрибут в центр процесса проектирования пользовательского интерфейса CSS.

Но есть проблема. Мы пишем этот код UI в файле JavaScript, а Класс На языке программирования JavaScript является зарезервированным словом. Это означает, что мы не можем использовать это зарезервированное слово, как мы хотим. Он обслуживает конкретную цель (определение классов JavaScript), а React Creators пришлось выбрать другое имя для него.

Вот как мы закончили классное значение вместо Класс Отказ

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

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

Это не единственная функция HTML, которая страдает от этой проблемы, но она наиболее распространена.

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

Это одна из основных функций Интернета. Это очень прощающее.

JSX не прощает. Если вы забудете закрыть тег, у вас будет четкое сообщение об ошибке:

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

Еще одна большая разница между JSX и HTML в том, что в JSX мы можем встроить JavaScript.

Давайте поговорим об этом в следующем разделе.

Встраивание JavaScript в JSX

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

Другие структуры Frontend, например, угловые и VUE, имеют свои собственные специфические способы печати значений JavaScript в шаблоне или выполняют такие вещи, как петли.

Реагирование не добавляет новых вещей. Вместо этого он позволяет использовать JavaScript в JSX, используя фигурные скобки.

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

Мы импортируем Логотип SVG файл с использованием

import logo from './logo.svg'

а затем в JSX мы назначаем этот файл SVG для SRC атрибут IMG тег:

logo

Давайте сделаем еще один пример. Предположим, что Приложение Компонент имеет переменную под названием сообщение :

function App() {
  const message = 'Hello!'
  //...
}

Мы можем распечатать это значение в JSX, добавив {сообщение} где угодно в JSX.

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

И утверждение должно что-то вернуть.

Например, это обычное утверждение, которое вы найдете в JSX. У нас есть тройной оператор, в котором мы определяем состояние ( сообщение ), и мы распечатаем одно значение, если условие имеет значение true или другое значение (содержание сообщение в этом случае), если условие ложно:

{
  message === 'Hello!' ? 'The message was "Hello!"' : message
}

Управляющее состояние в реакции

Каждый реактивный компонент может иметь свой собственный Государство Отказ

Что мы имеем в виду под Государство ? Государство – это Набор данных, управляемых компонентом Отказ

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

Кнопка отвечает за знание, если он нажимается, или нет. Если это на фокусе.

Ссылка отвечает за знать, если мышь наберет на нем.

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

Мы управляем штатом, используя Уместите Утилита, предоставляемая реагированием. Это технически Крюк (Вам не нужно знать детали крючков прямо сейчас, но это то, что она есть).

Вы импортируете Уместите от реагирования таким образом:

import React, { useState } from 'react'

Призыв Уместите () , вы получите новую переменную состояния и функцию, которую мы можем позвонить, чтобы изменить его значение.

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

Пример:

const [count, setCount] = useState(0)

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

Вызов модификатора – это то, как мы можем сказать, что состояние компонента изменилось.

Синтаксис немного странный, верно? С Уместите () Возвращает массив, мы используем деструктурирование массива для доступа к каждому отдельному элементу, как это: const [count, (0)

Вот практический пример:

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    

You clicked {count} times

) } ReactDOM.render(, document.getElementById('app'))

Вы можете добавить как можно больше Уместите () Вызовы, как вы хотите, чтобы создать столько важных переменных состояний, как вы хотите:

const [count, setCount] = useState(0)
const [anotherCounter, setAnotherCounter] = useState(0)

Компонент реквизит в реакции

Мы называем реквизит Начальные значения передаются на компонент.

Мы ранее создали Welcomessage составная часть

function WelcomeMessage() {
  return 

Welcome!

}

И мы использовали это так:


Этот компонент не имеет начального значения. У него нет реквизитов.

Реквисы могут быть переданы как атрибуты компоненту в JSX:


А внутри компонента мы получаем реквизиты в качестве аргументов:

function WelcomeMessage(props) {
  return 

Welcome!

}

Обычно используют деструктурирование объекта, чтобы получить реквизиты по имени:

function WelcomeMessage({ myprop }) {
  return 

Welcome!

}

Теперь, когда у нас есть опоры, мы можем использовать его внутри компонента. Например, мы можем распечатать его значение в JSX:

function WelcomeMessage({ myprop }) {
  return 

{myprop}

}

Кудрявые скобки здесь имеют различные значения. В случае аргумента функций в качестве части синтаксиса объекта используются вводные крошечные скобки.

Затем мы используем их для определения блока функционального кода и, наконец, в JSX для распечатки значения JavaScript.

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

Компонент либо содержит данные (имеет состояние) или получает данные через его реквизиты.

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

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

 Here is some message 

В этом случае внутри Welcomessage Мы могли бы получить доступ к значению Вот несколько сообщений Используя дети проп

function WelcomeMessage({ children }) {
  return 

{children}

}

Поток данных в приложении React

В приложении React Data обычно теряют из родительского компонента к дочерним компоненте, используя реквизиты, как мы видели в предыдущем разделе:


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

const [count, setCount] = useState(0)


Внутри счетчика Compotment мы можем схватить setcount опоры и назовите его, чтобы обновить Считать Состояние в родительском компоненте, когда что-то происходит:

function Counter({ setCount }) {
  //...

  setCount(1)

  //...
}

Вам нужно знать, что существует более продвинутые способы управления данными, которые включают в себя контекстные API и библиотеки, такие как Redux. Но те, кто вводит больше сложности, и 90% случаев, используя эти 2 способа, которые я только что объяснил, являются идеальным решением.

Обработка пользовательских событий в реакции

React предоставляет простым способом управления событиями, выпущенными из событий DOM, таких как клики, форм событий и многое другое.

Давайте поговорим о кликах событий, которые довольно просто переваривают.

Вы можете использовать OnClick Атрибут на любом элементе JSX:


Когда элемент нажат, функция передана на OnClick атрибут уволен.

Вы можете определить эту функцию за пределами JSX:

const handleClickEvent = (event) => {
  /* handle the event */
}

function App() {
  return 
}

Когда Нажмите Событие уволено на кнопке, ract вызывает функцию обработчика события.

Реагировать поддерживает огромное количество типов событий, таких как Onkeyup , Onfocus , Onchange , OnMousedown , OnsUbmit И многое другое.

Срок службы жизненного цикла в компоненте реагирования

До сих пор мы видели, как управлять государством с Уместите крюк.

Есть еще один крюк, который я хочу представить в этой книге: Useffect Отказ

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

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

Реагируйте первые обновления DOM, затем вызывает любую функцию, переданную на Useffect () Отказ

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

Вот пример:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(`You clicked ${count} times`)
  })

  return (
    

You clicked {count} times

) }

Поскольку функция USEFFECT () работает на каждом последующем повторном рендере/обновлении компонента, мы можем сказать отреагировать, чтобы пропустить его, для целей производительности. Мы делаем это, добавив второй параметр, который является массивом, который содержит список переменных состояний для наблюдения.

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

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
}, [name, count])

Аналогичным образом, вы можете сказать, что отреагируют только только один раз (при времени монтирования), передавая пустой массив:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

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

USEFFECT () отлично подходит для добавления журналов, доступа к 3-м сторонам API и гораздо больше.

Куда пойти отсюда

Освоение тем, объясненных в этой статье, является отличным шагом к вашей цели реагирования на обучение.

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

Что вы должны учиться дальше?

Узнать больше теории о Виртуальный Дом , написание декларативного кода , Однонаправленные данные поток , Непомышленность , Состав Отказ

Начните строить некоторые простые реактивные приложения. Например построить простой счетчик или Взаимодействовать с публичным API Отказ

Узнайте, как выполнить Условный рендеринг Как выполнить Петли в JSX Как использовать Инструменты разработчика реагирования Отказ

Узнайте, как применить CSS в приложении React, с помощью Простые CSS или Слифовые компоненты Отказ

Узнайте, как управлять состоянием, используя Контекст API , упреждающий текст и Redux Отказ

Узнайте, как взаимодействовать с Формы Отказ

Узнайте, как использовать React Router Отказ

Учить Как проверить React Applications Отказ

Узнайте структуру приложения, построенные на вершине реагирования, как GATSBY или Next.js Отказ

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

Заключение

Большое спасибо за чтение этого руководства.

Я надеюсь, что это вдохновит вас узнать больше о реагировании и все, что вы можете сделать с этим!

Помните, что вы можете Скачать этот справочник в формате PDF/EPUB/MOBI бесплатно если ты хочешь.

Я публикую программирование учебников каждый день на моем сайте flaviocopes.com Если вы хотите проверить более широкий контент, как это.

Вы можете связаться со мной в Twitter @flaviocopes Отказ