React для начинающих: полное руководство на 2021 год

React for Beginners: Полная шпаргалка на 2021 год

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

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

К концу вы получите полное представление о множестве основных концепций React, в том числе:

• Почему, что и как отреагировать
• Как легко создавать приложения на React
• JSX и базовый синтаксис
• Элементы JSX
• Компоненты и реквизит
• События в React
• Государство и государственное управление
• Основы React Hooks

Хотите свою копию? 📄

Загрузите шпаргалку в формате PDF здесь (занимает 5 секунд).

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

• Краткое справочное руководство для просмотра в любое время и в любое время
• Тонны копируемых фрагментов кода для удобного повторного использования
• Прочтите это обширное руководство в любом удобном для вас месте. В поезде, за столом, в очереди… где угодно.

Есть много чего интересного, так что приступим.

Основы React

Что такое React на самом деле?

React официально определяется как «библиотека JavaScript для создания пользовательских интерфейсов», но что это на самом деле означает?

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

Что мне нужно знать, чтобы изучить React?

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

Основные концепции JavaScript, с которыми вы должны быть знакомы, - это переменные, базовые типы данных, условные выражения, методы массивов, функции и модули ES.

Как мне изучить все эти навыки JavaScript? Ознакомьтесь с подробным руководством, чтобы изучить весь JavaScript, необходимый для React.

Если React был создан на JavaScript, почему бы нам просто не использовать JavaScript?

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

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

Другими словами, хотя для создания React использовался JavaScript, они были созданы для самых разных целей.

Могу ли я использовать JavaScript в приложениях React?

Да! Вы можете включить любой допустимый код JavaScript в свои приложения React.

Вы можете использовать любой API браузера или окна, например API геолокации или выборки.

Кроме того, поскольку React (когда он скомпилирован) запускается в браузере, вы можете выполнять стандартные действия JavaScript, такие как запросы и манипуляции с DOM.

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

Три разных способа создания приложения React

1. Помещение React в HTML-файл с внешними скриптами
2. Использование среды React в браузере, например CodeSandbox
3. Создание приложения React на вашем компьютере с помощью такого инструмента, как Create React App

Как лучше всего создать приложение на React?

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

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

Если вы заинтересованы в создании приложений React на своем компьютере, ознакомьтесь с полным руководством по использованию приложения Create React.

Самый простой и удобный для новичков способ создавать и создавать приложения React для обучения и создания прототипов - использовать такой инструмент, как CodeSandbox. Вы можете создать новое приложение React за секунды, перейдя на response.new!

Элементы JSX

JSX - мощный инструмент для структурирования приложений

JSX предназначен для упрощения создания пользовательских интерфейсов с приложениями JavaScript.

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

Пример кода ниже - это самый простой пример элемента React, который отображает текст «Hello World»:

<div>Hello React!</div>

Обратите внимание, что для отображения в браузере элементы React должны быть отображены (с использованием ReactDOM.render()).

Чем JSX отличается от HTML

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

Атрибуты, состоящие из нескольких слов, записываются в синтаксисе верблюжьего регистра (например, className) и имеют другие имена, чем в стандартном HTML (class).

<div id="header">
  <h1 className="title">Hello React!</h1>
</div>

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

JSX должен иметь завершающую косую черту, если он состоит из одного тега.

В отличие от стандартного HTML, такие элементы, как input, img или br, должны заканчиваться косой чертой в конце, чтобы они были действительным JSX.

<input type="email" /> // <input type="email"> is a syntax error

Элементы JSX с двумя тегами должны иметь закрывающий тег.

Элементы, которые должны иметь два тега, например div, main или button, должны иметь закрывающий второй тег в JSX, иначе это приведет к синтаксической ошибке.

<button>Click me</button> // <button> or </button> is a syntax error

Как стилизованы элементы JSX

Встроенные стили написаны иначе, чем обычный HTML.

• Встроенные стили должны быть включены не в виде строки, а внутри объекта.
• Еще раз, свойства стиля, которые мы используем, должны быть написаны в стиле верблюда.

<h1 style={{ color: "blue", fontSize: 22, padding: "0.5em 1em" }}>
  Hello React!
</h1>;

Свойства стиля, которые принимают значения пикселей (например, ширину, высоту, отступы, поля и т. Д.), Могут использовать целые числа вместо строк. Например, fontSize: 22 вместо fontSize: "22px".

JSX можно условно отображать

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

Один простой пример, если это условно скрыть или отобразить JSX-контент, мы можем использовать любое допустимое условное выражение JavaScript, например, оператор if или оператор switch.

const isAuthUser = true;

if (isAuthUser) {
  return <div>Hello user!</div>   
} else {
  return <button>Login</button>
}

Куда мы возвращаем этот код? В компоненте React, о котором мы поговорим в следующем разделе.

JSX не может быть понят браузером

Как упоминалось выше, JSX - это не HTML, а состоит из функций JavaScript.

Фактически, написание <div>Hello React</div> на JSX - это просто более удобный и понятный способ написания кода, подобного следующему:

React.createElement("div", null, "Hello React!")

Оба фрагмента кода будут иметь одинаковый вывод «Hello React».

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

Самый распространенный транспилятор называется Babel.

Компоненты React

Что такое компоненты React?

Вместо того, чтобы просто отрисовывать тот или иной набор JSX-элементов, мы можем включить их в компоненты React.

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

function Greeting() {
  return <div>Hello React!</div>;   
}

Зачем использовать компоненты React?

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

Думайте о компонентах React как о наших пользовательских элементах React, которые имеют свои собственные функции.

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

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

Компоненты не являются обычными функциями JavaScript

Как мы можем визуализировать или отобразить возвращенный JSX из компонента выше?

import React from 'react';
import ReactDOM from 'react-dom';

function Greeting() {
  return <div>Hello React!</div>;   
}

ReactDOM.render(<Greeting />, document.getElementById("root));

Мы используем React import для анализа JSX и ReactDOM для рендеринга нашего компонента в корневой элемент с идентификатором root.

Что могут возвращать компоненты React?

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

Зачем нам возвращать null? Обычно возвращается null, если мы хотим, чтобы компонент ничего не отображал.

function Greeting() {
  if (isAuthUser) {
    return "Hello again!";   
  } else {
    return null;
  }
}

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

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

Фрагменты можно записать как <></> или, когда вы импортируете React в свой файл, как <React.Fragment></React.Fragment>.

function Greeting() {
  const isAuthUser = true;  
    
  if (isAuthUser) {
    return (
      <>
        <h1>Hello again!</h1>
        <button>Logout</button>
      </>
    );
  } else {
    return null;
  }
}

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

Компоненты могут возвращать другие компоненты

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

Ниже приведен базовый пример приложения React, содержащегося в компоненте с именем App, который возвращает несколько компонентов:

import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';
import Navbar from './components/Navbar';
import Aside from './components/Aside';
import Main from './components/Main';
import Footer from './components/Footer';

function App() {
  return (
    <Layout>
      <Navbar />
      <Main />
      <Aside />
      <Footer />
    </Layout>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

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

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

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

Так же, как мы можем использовать переменные JavaScript в наших компонентах, мы можем использовать их и непосредственно в нашем JSX.

Однако есть несколько основных правил использования динамических значений в JSX:

• JSX может принимать любые примитивные значения (строки, логические значения, числа), но не принимает простые объекты.
• JSX также может включать выражения, разрешающие эти значения.

Например, условные выражения могут быть включены в JSX с помощью тернарного оператора, поскольку он преобразуется в значение.

function Greeting() {
  const isAuthUser = true;  
    
  return <div>{isAuthUser ? "Hello!" : null}</div>;
}

Реквизит в React

Компонентам можно передавать значения с помощью реквизита

Данные, передаваемые компонентам в JavaScript, называются реквизитами.

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

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

ReactDOM.render(
  <Greeting username="John!" />,
  document.getElementById("root")
);

function Greeting(props) {
  return <h1>Hello {props.username}</h1>;
}

Реквизит нельзя изменить напрямую

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

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

// We cannot modify the props object:
function Header(props) {
  props.username = "Doug";

  return <h1>Hello {props.username}</h1>;
}

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

Особый реквизит: детский реквизит

Свойство children полезно, если мы хотим передавать элементы / компоненты в качестве свойств другим компонентам.

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

function Layout(props) {
  return <div className="container">{props.children}</div>;
}

function IndexPage() {
  return (
    <Layout>
      <Header />
      <Hero />
      <Footer />
    </Layout>
  );
}

function AboutPage() {
  return (
    <Layout>
      <About />
      <Footer />
    </Layout>
  );
}

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

Списки и ключи в React

Как перебирать массивы в JSX с помощью карты

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

const people = ["John", "Bob", "Fred"];
const peopleList = people.map((person) => <p>{person}</p>);

Вы можете использовать .map() как для компонентов, так и для простых элементов JSX.

function App() {
  const people = ["John", "Bob", "Fred"];

  return (
    <ul>
      {people.map((person) => (
        <Person name={person} />
      ))}
    </ul>
  );
}

function Person({ name }) {
  // we access the 'name' prop directly using object destructuring
  return <p>This person's name is: {name}</p>;
}

Важность ключей в списках

Каждый элемент React в списке элементов требует особого ключевого свойства.

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

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

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

function App() {
  const people = [
    { id: "Ksy7py", name: "John" },
    { id: "6eAdl9", name: "Bob" },
    { id: "6eAdl9", name: "Fred" },
  ];

  return (
    <ul>
      {people.map((person) => (
        <Person key={person.id} name={person.name} />
      ))}
    </ul>
  );
}

Состояние и управление данными в React

Что такое состояние в React?

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

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

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

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

Примеры использования состояния в React

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

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

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

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

Введение в перехватчики React с помощью useState

Способ «создать» состояние - это React внутри конкретного компонента - с помощью хука useState.

Что такое крючок? Это очень похоже на функцию JavaScript, но может использоваться только в компоненте функции React в верхней части компонента.

Мы используем хуки, чтобы «подключиться» к определенным функциям, и useState дает нам возможность создавать состояние и управлять им.

useState - это пример основного хука React, который поступает непосредственно из библиотеки React: React.useState.

import React from 'react';

function Greeting() {
  const state = React.useState("Hello React");  
    
  return <div>{state[0]}</div> // displays "Hello React"
}

Как useState работает? Как и в обычной функции, мы можем передать ей начальное значение (например, Hello React).

Использование useState возвращает массив. Чтобы получить доступ к переменной состояния и ее значению, мы можем использовать первое значение в этом массиве: state[0].

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

import React from 'react';

function Greeting() {
  const [title] = React.useState("Hello React");  
    
  return <div>{title}</div> // displays "Hello React"
}

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

import React from "react";

function Greeting() {
  const [title] = React.useState("Hello React");

  return (
    <div>
      <h1>{title}</h1>
      <input placeholder="Update title" />
    </div>
  );
}

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

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

Что такое события в React?

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

Наиболее распространенными реквизитами, используемыми для обработки событий, являются onClick (для событий щелчка), onChange (когда пользователь вводит данные) и onSubmit (когда отправляется форма).

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

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

import React from "react";

function Greeting() {
  const [title] = React.useState("Hello React");

  function handleInputChange(event) {
    console.log("input changed!", event);
  }

  return (
    <div>
      <h1>{title}</h1>
      <input placeholder="Update title" onChange={handleInputChange} />
    </div>
  );
}

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

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

Как обновить состояние в React с помощью useState

Чтобы обновить состояние с помощью useState, мы можем использовать второй элемент, который useState возвращает нам в своем массиве.

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

import React from "react";

function Greeting() {
  const [title, setTitle] = React.useState("Hello React");

  function handleInputChange(event) {
    setTitle(event.target.value);
  }

  return (
    <div>
      <h1>{title}</h1>
      <input placeholder="Update title" onChange={handleInputChange} />
    </div>
  );
}

Используя приведенный выше код, все, что пользователь вводит во входные данные (текст поступает из event.target.value), будет переведено в состояние с использованием setTitle и отображено в элементе h1.

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

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

Что дальше?

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

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

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

• Как писать собственные перехватчики React
• Полное руководство по реквизитам React
• Как получать данные в React спереди назад
• Как создавать полностековые приложения в React с Node
• Узнать больше о состоянии React
• Как добавить маршрутизацию в ваше приложение React с помощью React Router
• Изучите каждую часть React с помощью расширенной шпаргалки по React