Понимаем React за 5 минут

6 min readMay 14, 2018

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

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

Перевод статьи Learn React.js in 5 minutes

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

Настройка

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

<html>
<head>  
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>  
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.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">  
      
    /*   
    ADD REACT CODE HERE 
    */  
      
    </script>  
</body>  
</html>

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

Есть ещё две вещи на которые вам нужно обратить внимание:

1. div c id #root. Это точка входа для нашего приложения. В общем, это то место где будет жить всё наше приложение.

2. <script type="text/babel"> тег в body. Это то, где мы будем писать наш React.js код.

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

Компоненты

Все в реакте это компонент и они обычно принимают форму 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.

В следующем шаге нашего приложения мы будем обрабатывать данные.

Этот блог бесплатный, в нём нет рекламы и ограничений paywall.
Вы можете его поддержать через Яндекс.Деньги. Спасибо.

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

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

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

Компонент может менять своё внутреннее состояние напрямую. Но он не может менять свои props таким же образом.

Давайте поближе посмотрим на props.

Props

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

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

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

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

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

Как результат на экране мы увидим:

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

Теперь у нас есть переиспользуемый компонент, в который может отрендерить любое сообщение, какое мы только захотим. Woohoo!

Однако, что если нам нужен компонент способный менять свои же собственные данные? Тогда мы будем использовать 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() в конструкторе. Это потому, что this — неинициализирован перед вызовомsuper() .

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

Чтобы изменить state, просто вызовите 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!