Пятиминутный курс по React.js

Пятиминутный курс по React.js

От автора: это руководство даст вам базовое представление о React.js через создание очень простого приложения. Я опущу все, что, по моему мнению, не существенно.

Настройка

Когда вы начинаете работу с React, вы должны использовать простейшую настройку: файл HTML, который импортирует библиотеки React и ReactDOM, используя теги скриптов, например:

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

div с идентификатором #root. Это точка входа для нашего приложения. Здесь будет жить все приложение.

Тег <script type=»text/babel»> в body. Здесь мы напишем наш код React.js.

Если вы хотите поэкспериментировать с кодом, зайдите на эту игровую площадку Scrimba.

Компоненты

Все в React — это компоненты, и они обычно принимают форму классов JavaScript. Вы создаете компонент, расширяя класс React-Component. Давайте создадим компонент Hello.

Затем вы определяете методы для компонента. В нашем примере у нас есть только один метод, и он называется render().
Внутри render() вы возвращаете описание того, что вы хотите, чтобы React отображал на странице. В приведенном выше случае мы просто хотим, чтобы он вывел тег h1 с текстом Hello world! внутри него.

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

Таким образом, мы подключаем наш компонент Hello к точке входа для приложения (<div id = «root»> </ div>). Это даст нам следующее:

Пятиминутный курс по React.js

HTML-подобный синтаксис, который мы только что рассмотрели (<h1> и <Hello />), — это код JSX, о котором я упоминал ранее. На самом деле это не HTML, хотя то, что вы пишете там, заканчивается в DOM HTML-тегами. Следующий шаг — заставить наше приложение обрабатывать данные.

Обработка данных

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

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

Компонент может напрямую изменить свое внутреннее состояние. Но он не может напрямую менять свои свойства. Давайте сначала рассмотрим свойства.

Свойства

Наш компонент Hello статичен, и он независимо отображает одно и то же сообщение. Большая часть React — это повторное использование, то есть возможность писать компонент один раз, а затем повторно использовать его в разных местах — например, для отображения разных сообщений.

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

Это свойство называется message и имеет значение “my friend”. Мы можем получить доступ к этому свойству внутри компонента Hello, ссылаясь на this.props.message, например:

В результате на экране отображается:

Пятиминутный курс по React.js

Причина, по которой мы пишем {this.props.message} с фигурными скобками, заключается в том, что нам нужно сообщить JSX, что мы хотим добавить выражение JavaScript. Это называется экранированием.

Итак, теперь у нас есть многократно используемый компонент, который может отображать любое сообщение, которое мы хотим на странице. Круто!

Однако что, если мы хотим, чтобы компонент мог изменять свои собственные данные? Тогда мы должны использовать состояние!

Состояние

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

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

Инициализация состояния

Чтобы инициализировать состояние, просто установите this.state в методе класса constructor(). Наше состояние — это объект, который в нашем случае имеет только один ключ с именем message.

Прежде чем установить состояние, мы должны вызвать в конструкторе super(). Это происходит потому, что this не инициализируется до вызова super().

Изменение состояния

Чтобы изменить состояние, просто вызовите this.setState(), передав новый объект состояния в качестве аргумента. Мы сделаем это внутри метода, который назовем updateMessage.

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

Следующим шагом будет создание кнопки для клика, чтобы мы могли вызвать метод updateMessage(). Итак, добавим в метод render() кнопку:

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

Затем метод updateMessage вызывает this.setState(), который изменяет значение this.state.message. И когда мы нажимаем кнопку, вот как это будет выглядеть:

Пятиминутный курс по React.js

Поздравляю! Теперь у вас есть базовое понимание наиболее важных концепций в React.

Автор: Per Harald Borgen

Источник: //medium.freecodecamp.org/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: