Реакция с 0


Начало работы с React, часть 1

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

Индекс

  • Основы
  • Элементы DOM
  • Добавление классов к элементу
  • ReactDOM
  • JSX
    • Вложение компонентов

Основы

React, как и многие другие фреймворки в настоящее время, основан на концепции компонентов.
Компонент — это часть кода, которая может быть повторно использована столько раз, сколько необходимо, даже между проектами (в зависимости от того, как она написана), это позволяет значительно сократить объем кода и следует принципу DRY (dont repeat yourself). Рассмотрим простой пример:

function NewButton (props) {
  // Se retorna un nuevo elemento del DOM
  return <button type="button">{props.label}</button>;
}
// Renderiza el componente
ReactDOM.render(<NewButton label="Save" />, document.getElementById("app"))
Войдите в полноэкранный режим Выход из полноэкранного режима

Мы видим здесь два ключевых элемента, функцию на обычном JavaScript, которая возвращает элемент DOM, в данном случае кнопку, мы видим свойство «props.label», которое в основном является значением, передаваемым этому компоненту, и мы также видим нечто под названием ReactDOM.render, что является способом, которым React отображает наш компонент в заданной нами позиции, в данном случае эта позиция будет в узле «app».

Страницы, которые мы создаем с помощью React, называются SPA (Single page application), позже я подробнее остановлюсь на этой концепции и различных способах использования React для создания различных типов приложений.
С помощью React мы избегаем прямого взаимодействия с DOM api, React делает это за нас, можно сказать, что он как посредник, это делается для того, чтобы иметь хорошую производительность при внесении изменений в те элементы DOM, которые мы хотим изменить, другими словами, мы не взаимодействуем напрямую с элементами DOM, а с элементами React (React elements).

Давайте вспомним, что такое DOM и что такое DOM Api.

Элементы DOM

React использует функцию createElement для представления элемента DOM, например:

React.createElement("h2", {id: "subtitle"}, "Subtitulo de la página")
Войдите в полноэкранный режим Выход из полноэкранного режима

Первый аргумент определяет тип элемента, второй — свойства, в данном случае Id будет «subtitle», а третий аргумент представляет собой дочерний элемент, это может быть любой узел, обернутый между <>, в данном случае это просто текст «page subtitle».
При рендеринге React отобразит:

<h2 id="subtitle">subtitulo de la página</h2>
Войдите в полноэкранный режим Выход из полноэкранного режима

Как мы видим, свойства добавляются как атрибуты, дочерний элемент добавляется как обычный текст внутри элемента. По сути, элемент React — это JavaScript литерал, который указывает React, как построить элемент DOM. Если мы сделаем console.log для элемента, мы увидим что-то вроде этого:

{
  $$typeof: Symbol(React.element),
  "type": "h2",
  "key": null,
  "ref": null,
  "props": {id: "subtitle", children: "subtitulo de la página"},
  "_owner": null,
  "_store": {}
}
Войдите в полноэкранный режим Выход из полноэкранного режима

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

ReactDOM

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

const subtitle = React.createElement("h2", null, "subtitulo de la página");
ReactDOM.render(subtitle, document.getElementById("app"));
Войдите в полноэкранный режим Выход из полноэкранного режима

При визуализации это будет выглядеть примерно следующим образом:

<body>
  <div id="app">
  <h2>subtitulo de la página</h2>
  </div>
</body>
Войдите в полноэкранный режим Выход из полноэкранного режима

Для внутреннего рендеринга элементов React использует props.children, в этом примере текст, который отображает подзаголовок страницы, являющийся дочерним элементом элемента h2, будет нашим дочерним элементом, но эти дочерние элементы — не просто элементы, они представляют собой дерево элементов, которое содержит родительский элемент и растет из него. Например, для вывода списка это будет выглядеть следующим образом:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>
Войдите в полноэкранный режим Выход из полноэкранного режима
React.createElement("ul", null, 
  React.createElement("li", null, "Elemento 1"),
  React.createElement("li", null, "Elemento 2"),
  React.createElement("li", null, "Elemento 3"),
);
Войдите в полноэкранный режим Выход из полноэкранного режима

Мы видим главный узел ul и дочерние узлы, которыми будут li.

Добавление классов к элементу

Class — это зарезервированное слово JavaScript, поэтому React использует className для получения имен классов в компоненте, например:

React.createElement("ul", {className: "elements"}, 
  React.createElement("li", null, "Elemento 1"),
  React.createElement("li", null, "Elemento 2"),
  React.createElement("li", null, "Elemento 3"),
);
Войдите в полноэкранный режим Выход из полноэкранного режима

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

<ul class="elements">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>
Войдите в полноэкранный режим Выход из полноэкранного режима

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

JSX

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

const Users = (props) => {
  const {names} = props;
  return (
    <ul>
     {names.map((item, i) => <li key={i}>{item}</li>)}
    </ul>
  )
}

export default Users;
Войдите в полноэкранный режим Выход из полноэкранного режима

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

 <div className="App">
    <Users names={users} />
 </div>
Войдите в полноэкранный режим Выход из полноэкранного режима

Вложение компонентов

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

const User = (props) => {
const {name} = props;
  return (
    <li>
       {name}
    </li>
  )
}

export default User;
Войдите в полноэкранный режим Выход из полноэкранного режима

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

import User from './User';

const Users = (props) => {
  const {names} = props;
  return (
    <ul>
     {names.map((item, i) => <User key={i} name={item} />)}
    </ul>
  )
}

export default Users;
Войдите в полноэкранный режим Выход из полноэкранного режима
 <div className="App">
    <Users names={users} />
 </div>
Войдите в полноэкранный режим Выход из полноэкранного режима

В данном случае мы видим, как можно вложить компоненты до нужного нам уровня, в предыдущих примерах я использовал что-то вроде {name}, это известно как выражения JavaScript, и это способ, с помощью которого мы можем показывать динамические данные в компонентах.
Еще один важный момент — при отображении массивов необходимо использовать KEY, этот идентификатор используется React для внутренней ссылки, вы можете видеть в примерах при использовании map, я передаю элементу тег key={i}.

Недостатком использования JSX является то, что браузер не понимает его, поэтому мы должны использовать компиляторы, такие как https://babeljs.io/, которые преобразуют код React в чистый JavaScript (я объясню это более подробно позже).

Фрагменты React

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

<React.Fragment></React.Fragment>
Войдите в полноэкранный режим Выход из полноэкранного режима

или упрощенный способ

<></>
Войдите в полноэкранный режим Выход из полноэкранного режима

Этот элемент не должен быть виден в DOM.

Оцените статью
Procodings.ru
Добавить комментарий