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

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

Настройка

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

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body> <div id="root"></div> <script type="text/babel"> /* Здесь добавляется код REACT */ </script>
</body>
</html>

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

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

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

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

Компоненты

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

class Hello extends React.Component { render() { return <h1>Hello world!</h1>; }
}

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

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

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

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

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

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

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

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

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

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

Свойства

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

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

ReactDOM.render( <Hello message="my friend" />, document.getElementById("root")
);

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

class Hello extends React.Component { render() { return <h1>Hello {this.props.message}!</h1>; }
}

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

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

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

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

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

Состояние

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

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

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

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

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; } render() { return <h1>Hello {this.state.message}!</h1>; }
}

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

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

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

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return <h1>Hello {this.state.message}!</h1>; }
}

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

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

render() { return ( <div> <h1>Hello {this.state.message}!</h1> <button onClick={this.updateMessage}>Click me!</button> </div> )
}

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

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return ( <div> <h1>Hello {this.state.message}!</h1> <button onClick={this.updateMessage}>Click me!</button> </div> ) }
}

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

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