Эта статья даст вам основные знания о React; пример, который мы будем использовать, - очень простое приложение. Я не буду говорить обо всем, что не кажется мне основным в понимании React JS.
Первое использование React
Если вы только начали работать с React JS, используйте простейший способ: HTML-файл, который вносит библиотеки React и ReactDOM при помощи тегов script:
<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, чтобы браузер мог понимать написанное.
Я хочу, чтобы вы обратили внимание на 2 вещи:
<div> с id #root - точка входа приложения. Тут будет «обитать» все созданное нами приложение;
Тег <script type="text/babel"> в теле кода. Здесь мы будем писать на React пример в виде кода.
Если вы хотите проделать эксперименты с кодом, обратитесь к этой песочнице Scrimba.
Компоненты
В React все состоит из компонентов, которые обычно имеют вид классов JavaScript. Написать компонент можно при помощи расширения рамок класса React-Component. Давайте напишем компонент Hello.
class Hello extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}
Далее нужно определить методы компонента. В нашем примере будет рассматриваться лишь 1 метод - render().
Внутри render() нужно вернуть описание того, что вы хотите, чтобы React изобразил на странице. В нашем случае, который описан выше, мы просто хотим, чтобы программа отображала тег H1 с текстом «Hello world!».
Чтобы наше небольшое приложение показалось на экране, надо также прописать применение ReactDOM.render():
ReactDOM.render(
<Hello />,
document.getElementById("root")
);
Здесь мы привязываем компонент Hello к точке входа приложения (<div id="root"></div>). Результат таков:
Мы только что столкнулись с синтаксисом, который напоминает HTML, - <h1> и <Hello/>. Это код JSX, о котором упоминалось ранее. Это не чистый HTML, однако написанное превращается в теги HTML в DOM.
Следующий шаг - сделать так, чтобы приложение могло управлять данными.
Управление данными React JS
В React существует 2 вида данных: props и state. Разницу между ними поначалу немного трудно понять, так что не волнуйтесь, если вас эта информация сбивает с толку. Как только вы начнете работать с данными, все станет легче.
Ключевая разница состоит в том, что state имеют приватный характер и могут быть отредактированы непосредственно из компонента. Props - внешние данные, их не может контролировать компонент. Такие данные импортируются компонентами, которые стоят выше по иерархии и занимаются управлением иными данными.
Компонент может изменять внутренние данные типа state напрямую, в отличие от props.
Давайте сначала поподробнее рассмотрим props.
Props
Наш компонент Hello очень статичен; он всегда отображает одно и то же сообщение. Огромную роль в React играет возможность повторного использования, то есть: вы можете создать компонент 1 раз, а затем применять его в разных случаях - например, для высвечивания разных сообщений.
Чтобы достигнуть возможности повторного использования, мы добавим props. Вот так передаются данные типа props в компонент:
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>;
}
}
В результате на экране получится вот это:
Мы пишем выражение {this.props.message} в фигурных скобках, так как нам необходимо сообщить JSX, что мы хотим использовать выражение на JavaScript. Такая методика получила название экранирования.
Теперь у нас есть компонент, который можно использовать повторно и который может показывать любое сообщение, какое мы захотим увидеть на странице. Ура!
А что если нам нужно использовать компонент, который сможет самостоятельно изменять свои данные? Тогда нужно использовать тип state!
State
Другой способ хранения данных в библиотеке React - в state компонента. В отличие от props, state могут изменяться компонентом напрямую.
Если вы хотите, чтобы данные в вашем приложении изменились (например, на основе команд пользователя), данные должны находиться в state компонента.
Инициализация state
Чтобы ввести state, просто поместите this.state в метод constructor() класса. Нашим state является объект, который в нашем случае имеет лишь 1 ключ - message.
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}
Перед тем как установить state, нужно вызвать super() в constructor. Это нужно сделать потому, что this не было определено до вызова super().
Изменение state «состояния»
Чтобы поменять значение state, просто вызовите this.setState(), используя новый объект state как аргумент. Мы сделаем это внутри метода 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. Иначе мы бы не смогли использовать this в методе.
Следующий шаг - создать кнопку, на которую можно будет нажимать, чтобы сработал метод 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 пример, вы научились важнейшим основам этой библиотеки.