Изучите React.js, создав Hacker News (часть 4) — Функции и компоненты на основе классов

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

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

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

Серия клонов Hacker News:

Часть 1: Что такое React?
Часть 2: Создание внутреннего устройства React-приложения
Часть 3: JSX и добавление CSS в ваше приложение React
Часть 4: Функция против компонентов на основе классов

Вы можете найти весь исходный код серии на моем Github. Исходный код можно найти здесь.

Склонируйте соответствующую ветку, откройте терминал в папке, запустите npm start и приступим к делу.

Реагировать Компоненты

Компоненты — это независимые и используемые куски кода. В React мы используем компоненты для создания независимых разделов пользовательского интерфейса.

Два основных преимущества, обеспечиваемые использованием компонентов:

Развязка — разделяет логику между компонентами, уменьшая зависимости и потенциальные ошибки.
Читаемость

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

Что такое функциональные компоненты?

Мы можем взять JSX, который мы написали ранее, и реорганизовать его в независимые компоненты, которые мы можем использовать в разных местах.

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

Мы уже видели компонент раньше, App.js — это функциональный компонент. Мы можем идентифицировать функциональный компонент по структуре компонента. Обозначение такое же, как у функции JavaScript.

Создание функционального компонента

Создайте новый каталог в каталоге src с именем компоненты. Здесь мы будем хранить все наши компоненты.

В каталоге component создайте файл JavaScript с именем Nav.js. Это будет наш компонент навигации.

Ваша файловая структура должна выглядеть так.

В Nav.js мы можем приступить к созданию нашего компонента function. Каждый компонент function состоит из трех частей.

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

Компонент Nav.js,

// Import Statement
import React from 'react'
// Function Declaration
function Nav() {
    return (
        <div>
            
        </div>
    )
}
// Export statement
export default Nav;

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

// Import Statement
import React from 'react'
// Function Declaration
export const Nav = () => {
    return (
        <div>
            
        </div>
    )
}

Давайте также импортируем файл Nav.css в компонент Nav.js.

// Import Statement
import React from 'react'
import "../styles/Nav.css";
// Function Declaration
export const Nav = () => {
    return (
        <div>
            
        </div>
    )
}

Из App.js скопируйте все содержимое компонента навигации, который мы создали, в файл Nav.js. Все из родительского div с классом container.

Импорт нового компонента в наше приложение

В App.js удалите все содержимое, которое было скопировано ранее. Мы должны остаться с родительским div.

Нам потребуется импортировать файл Nav.js, чтобы использовать компонент в нашем файле. Поскольку Nav.js был экспортирован с помощью функции стрелки, нам придется использовать именованный импорт вместо импорта по умолчанию.

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

Ускоренный курс импорта/экспорта

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

Импорт по умолчанию

При импорте по умолчанию используются следующие обозначения:

// file1.js
import fileAlias from './file2'

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

// file2.js
export default file2

При импорте файл может быть назван как угодно в качестве псевдонима. В этом случае мы используем «fileAlias».

Именованный импорт

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

// file1.js
import {file} from './file2'

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

// file2.js
export const file2

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

//file1.js
import {file as myFileName} from './file2'

Примечание: модуль может иметь только один экспорт по умолчанию, но может иметь неограниченное количество именованных экспортов.

Функция против компонентов на основе классов

Вам, наверное, интересно, почему я сосредоточился только на функциональных компонентах. С момента появления React Hooks в 2018 году (версия 16.8) потребность в компонентах класса отпала.

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

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

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

// Example taken from React docs
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Компонент класса — это компонент, объявленный в форме Класса ES6. Единственное существенное отличие состоит в том, что он вызывает метод рендеринга, который вызывает метод возврата. В то время как функциональный компонент имеет только метод возврата.

Мы можем преобразовать компонент класса в компонент функции, удалив:

Ключевое слово класса и замена его функцией (или функцией стрелки).
Расширяет React.Component.
Метод render().

// Example taken from React docs
function Clock(){
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
}

Создание компонента сообщений

Теперь у вас должно быть общее представление о том, как работают компоненты. Давайте начнем создавать наш клон Hacker News. Мы будем создавать компонент, который содержит все сообщения. Компонент Posts будет иметь вложенные компоненты Post, представляющие отдельные сообщения.

Создайте новый файл с именем Posts.js в каталоге компонентов. Посты будут функциональным компонентом. В каталоге стилей создайте файл с именем Posts.css и также импортируйте его в компонент. Вы можете найти содержимое файла CSS в исходном коде, так как я не буду включать его во фрагменты.

import React from 'react'
import '../styles/Posts.css'
export const Posts = () => {
    return (
        <div>
            Posts
        </div>
    )
}

Мы можем импортировать компонент Post из App.js.

import {Nav} from "./components/Nav"
import { Posts } from "./components/Posts"
function App() {
return (
        <div className="container">
           <Nav/>
           <Posts/>
        </div>
    );
}
export default App;

Теперь давайте создадим повторно используемый компонент Post с именем Posts.js и таблицу стилей для него с именем Posts.css в разделе styles.

Создайте каталог с именем assets, здесь мы будем хранить ресурсы, к которым обращаются файлы CSS.

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

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

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

Давайте импортируем компонент Post в файл Posts.js. Поскольку компонент можно использовать повторно, давайте заполним компонент Post несколькими сообщениями.

Теперь начинает собираться!

Вывод

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

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

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

Увидимся в следующем!

Ресурсы и дополнительная полезная литература
Функции JavaScript
Функции стрелок
Компоненты React
Дополнительные сведения об импорте/экспорте

Если вы хотите предложить мне темы для обсуждения или хотите поболтать, не стесняйтесь написать мне по электронной почте. Вы можете найти больше таких сообщений на www.colorcoder.dev. Спасибо за чтение!