В этом туториале вы получите базовое представление о 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/[email protected]/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> /* ADD REACT CODE HERE */ </script> </body> </html>
Мы также импортировали Babel, так как React использует нечто, что называется JSX для разметки. Нам нужно будет преобразовать этот JSX в обычный JavaScript, чтобы браузер смог понять его.
Также обратите внимание на два следующих пункта:
- Тег
<div>с параметромid=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>) нашего приложения. Результат будет следующий:
HTML-подобный синтаксис, который мы увидели выше (<h1> и <Hello/>) — это тот самый JSX-код, который я упоминал выше. Это не совсем HTML, хотя то, что вы пишете там, представляется HTML-тегами в DOM.
Следующий шагом наше приложение научиться работать с данными.
Работы с данными
В React есть два типа данных: props и state. Сначала немного сложно понять разницу между ними, поэтому не волнуйтесь, если не сразу поймёте, о чем речь. Всё станет попроще, как только вы начнёте с ними работать.
Ключевая особенность в том, что state — это приватный тип данных и может быть изменен изнутри компонента. Props же, наоборот, являются внешними и не могут управляться самим компонентом. Они передаются компонентами, которые находятся выше по иерархии, которые также управляют и данными.
Компоненты могут напрямую менять своё внутреннее состояние (state), но не могут напрямую менять props.
Давайте сначала взглянем поближе на props.
Props
Наш компонент Hello очень статичен и в любом случае выводит одно и то же сообщение. Большой частью React является повторное использование, которое значит, что вы можете однажды написать компонент, а затем использовать его несколько раз в разных случаях. Например, чтобы отобразить разные сообщения.
Чтобы достичь такого уровня повторного использования, мы добавим props. В примере ниже вы увидите, как мы передаём props для компонента:
ReactDOM.render(
<Hello message="my friend" />,
document.getElementById("root")
);
Prop называется message и передаёт значение «my friend». Мы можем получить доступ к этому pror внутри Hello-компонента написав this.props.messag. Пример:
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.message}!</h1>;
}
}
Как результат, на экран выводится следующее:
Причина, по которой мы пишем {this.props.message} в фигурных скобках, это потому что мы хотим сказать JSX, что мы хотим добавить JavaScript-выражение. Это называется экранирование.
Теперь у нас есть компонент, который мы можем использовать повторно для того, чтобы вывести любое сообщение на страницу. Вуху!
Тем не менее, что, если мы захотим, чтобы компонент мог поменять свои собственные данные? Тогда вместо props мы воспользуемся state!
State
Другой способ хранить данные в React — это внутри состояния(state) компонента. И в отличии от props, state могут быть изменены изнутри компонента.
Поэтому, если вы хотите, чтобы данные в вашем приложении менялись, например, в зависимости от действий пользователя, они должны храниться в state компонента.
Инициализация state
Для инициализации state просто задайте this.state в метод класса constructor(). В нашем случае state — это объект, у которого есть только один ключ 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() в конструкторе, так как до вызова super() this является неинициализированным.
Изменение 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>
)
}
Мы привязываем чтение событий (event listener) для кнопки, а именно событие 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.
Перевод статьи Per Harald Borgen: Learn React.js in 5 minutes
