Полное руководство для начинающих по React.js

Начало работы с React.js за 10 минут

Таблица содержания

1. Что такое React?
2. Зачем учиться реагировать?
3. Руководство по началу работы!!
4. Структура папок
5. Основные понятия, которые необходимо знать
6. Заключение

Что такое Реакт?

• React — это библиотека с открытым исходным кодом для создания пользовательских интерфейсов.
• React — это нефреймворк.
• Его основное внимание уделяется разработке UIинтерфейсов.
• React не поддерживает маршрутизацию или HTTP-запросы, так как он ориентирован только на пользовательский интерфейс. Но React можно легко интегрировать с другими библиотеками, предоставляющими необходимые функции.
• React создается и поддерживается Facebook и имеет огромное сообщество.

Почему Реакт?

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

Ключевое слово"это"

Ключевое слово this будет появляться снова и снова. Важно четко понимать его использование в React и JS.

Ключевое слово this обычно ссылается на элемент JavaScript в зависимости от области или контекста его использования.

Обратитесь к этой статье: https://medium.com/byte-sized-react/what-is-this-in-react-25c62c31480

Начать

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

Лучший способ начать работу с React — использовать пакет create-react-app npm, он поможет вам настроить совершенно новый проект React со всеми необходимыми файлами и конфигурацией.

npm install -g create-react-app
create-react-app helloworld
or
npx create-react-app helloworld

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

Структура папок

package.json: содержит метаданные о проекте. Настраивает зависимости пакетов npm, которые доступны для всех проектов в рабочей области.

node_modules: где установлены все необходимые зависимости.

/public:

• manifest.json . Этот файл требуется при создании PWA (прогрессивного веб-приложения) для приложения React. (см. официальный документ: https://create-react-app.dev/docs/making-a-progressive-web-app/ ).
• index.html : это точка входа на нашу веб-страницу, в теге body есть только один тег div с id=‘root’. Он ссылается на корневой компонент в нашем приложении React.

/источник:

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

index.js: это точка входа в наше приложение React. Используя react-dom, мы отображаем наше приложение React внутри ‹div› с идентификатором «root» в файле index.html.

App.js: это корневой компонент нашего приложения React. create-react-app уже разработали для вас фиктивную страницу.(здесь указан файл App.css, который содержит все стили для компонента приложения).

Вы, должно быть, заметили, что в App.js возвращается JSX, вместо использования атрибута class в тегах используется className. Это связано с тем, что class является зарезервированным ключевым словом в React и используется для объявления класса JS, поэтому вместо этого используется className, он работает так же.

Прежде чем приступить к разработке своего приложения, удалите все лишние файлы и код, который create-react-app сгенерировал.

удалите файлы logo192.png и logo512.png , logo.svg и их объявления и очистите App.css и make function App в файле App.js возвращает <div></div>

Основные понятия, которые вам нужно знать

• JSX
• Компонент: компонент класса и функциональный компонент
• Реквизит
• Штат
• Обработка событий
• Привязка обработчиков событий
• Методы жизненного цикла компонентов

JSX

JavaScript XML (JSX) — это расширение синтаксиса языка JavaScript, мы используем JSX для написания элементов и компонентов в React.

JSX не является обязательным требованием для использования React. Каждый элемент JSX — это просто синтаксический сахар для вызова React.createElement(component, props, ...children)

JSX делает код более простым и элегантным.

обратитесь к этому документу: https://reactjs.org/docs/react-without-jsx.html

Компонент

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

App.js с функцией приложения представляет собой корневой компонент, который экспортирует компонент приложения, который импортируется файлом index.js и объявляется как <App/> , который заменяется JSX, возвращаемым функцией приложения.

Функциональный компонент или компонент без сохранения состояния

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

Эта HelloFunction() возвращает <h1>My First React App.</h1> , импортируйте эту функцию в App.js и добавьте тег <HelloFunction/>

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

Начиная с версии React 16.8 были добавлены React Hooks, которые предоставляют некоторое состояние функциональному компоненту. ссылка: https://reactjs.org/docs/hooks-intro.html

Компонент класса или компонент с отслеживанием состояния

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

Реквизит

Реквизиты относятся к параметру, передаваемому функциональному или классовому компоненту. Реквизиты неизменны по своей природе. Компоненты создаются с учетом возможности повторного использования, поэтому, если вы скопируете и вставите <HelloFunction/> 10 раз, вы увидите «Мое первое приложение React» 10 раз в качестве вывода.

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

Реквизиты могут быть переданы в качестве атрибута тегу компонента.

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

Фигурные скобки {} — это специальный синтаксис JSX для оценки выражения JavaScript, поэтому значение props.message оценивается и заменяется выражением.

В компонентах класса реквизиты получаются в конструкторе, супер(реквизиты) должны вызываться из конструктора, поскольку мы расширяем класс React.Component.

Ключевое слово this используется для доступа к объекту реквизита компонента класса.

Штат

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

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

В классе Component State объект может быть инициализирован в конструкторе, State — это Json-объект пар ключ-значение данных, который после инициализации может быть изменен только с помощью функции setState.

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

Посторонний тег «div» раздражает, так как он увеличивает сложность без всякой причины, так как этот тег <React.Fragment> можно использовать для включения всех ваших элементов без дополнительных узлов в DOM.

ссылка: https://reactjs.org/docs/fragments.html

Давайте добавим кнопку для изменения значения состояния (обработка событий в React будет правильно объяснена в следующем разделе).

Состояние также можно использовать в функциональных компонентах с помощью хуков, представленных в обновлении React 16.8, вы можете найти больше на https://reactjs.org/docs/hooks-intro.html.

Обработка событий

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

В функциональном компоненте

Мы создадим новый функциональный компонент EventFunction.js, который возвращает кнопку

Создайте новую функцию handleClick(), которая будет вызываться при нажатии кнопки, затем присвойте атрибуту onClick тега кнопки значение handleClick.

Примечание. Не добавляйте круглые скобки при передаче или назначении функции событию <button onClick={handleClick}>Click Me</button> , handleClick — это ссылка на функцию, которая будет назначена событию onClick и соответственно вызвана, в то время как handleClick() вызывает эту функцию при загрузке, поэтому вы обнаружите, что сообщение уже регистрируется во время загрузки страницы.

Кроме того, React следует за конвекцией имен на основе camelCasing, поэтому его onClick вместо onclick

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

процесс обработки событий такой же, но для ссылки на handleFunction мы должны использовать ключевое слово «this».

<button onClick={this.handleClick}>Click Me</button>

Обработчики привязки событий

Причина привязки событий в компонентах класса React исключительно из-за поведения ключевых слов this в JS.

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

Создайте новый файл EventClassComponent.js в папке src и добавьте его в App.js.

Существует 3 способа привязки функции.

• Привязка метода в самом методе рендеринга.

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

• Использование функции стрелки в качестве свойства класса

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

• Привязка в самом конструкторе

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

• Вызов обработчика событий в теле функции стрелки

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

Методы жизненного цикла компонентов

У каждого компонента есть несколько «методов жизненного цикла», которые вы можете переопределить, чтобы запустить свой код, что зависит от состояния жизненного цикла вашего компонента. Жизненный цикл компонента можно разделить на три части 1. Установка 2. Обновление 3. Размонтирование

Монтаж

Когда экземпляр компонента создается и вставляется в DOM

• конструктор()
• статический getDerivedStateFromProps()
• оказывать()
• компонентDidMount()

Функции конструктора, рендеринга и componentDidMount обычно переопределяются, конструктор переопределяется, чтобы разрешить реквизиты и инициализировать состояние и другие переменные, рендеринг переопределяется для возврата элемента JSX, а componentDidMount этот метод вызывается, когда компонент успешно смонтирован/загружен, и это идеальное время для выполнения HTTP-запросов.

Обновление

Когда есть какие-то изменения в свойствах или состоянии, запускается обновление.

• статический getDerivedStateFromProps()
• долженОбновитьКомпонент()
• оказывать()
• получитьSnapshotBeforeUpdate()
• компонентDidUpdate()

Функции render и componentDidUpdate обычно переопределяются, render переопределяется для возврата обновленного элемента JSX, а componentDidUpdate this метод вызывается, когда компонент успешно обновлен, и процесс постобновления может быть выполнен, включая HTTP-запросы.

Размонтирование

Когда компонент удаляется из DOM.

• компонентWillUnmount()

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

Заключение

React — замечательная библиотека для разработки пользовательского интерфейса, и она никуда не исчезнет.React очень стабильна и включена в технические списки многих компаний, таких как Uber, Airbnb, Netflix и, конечно же, Facebook :) гибкость и простота интеграции сделали его популярным вариантом.

Надеюсь, эта статья поможет вам начать знакомство с React.js.

Похлопайте👏, подпишитесь, чтобы узнать больше🔥и ПРОДОЛЖАЙТЕ УЧИТЬСЯ 🤓