react

Знакомство с React за 5 минут - учебное пособие React.js для новичков

Fomenko Alexander

10 февр. 2020 г. • 5 min read

Этот туториал даст вам базовые знания о React, на примере создания очень простого приложения. Я упущу все, что, как мне кажется, не относится к базовым деталям ядра. В этой статье я расскажу лишь об основах, для формирования понимая азов React-a. Эта статья будет отправной точкой для ваших начинаний и глубокого изучения Реакта. Это простой react туториал для мягкого знакомства с ним за 5 минут.

Настройка

Для демонстрации примеров работы с React, я буду использовать самый простой вариант его установки: подключая CDN-скрипта в теге script, который импортирует библиотеки React и ReactDOM.

Это выглядит следующим образом:

<html>
<head>  
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
</head>  
<body>  
    <div id="root"></div>  
    <script type="text/babel">  
    /*   
        REACT код будет написан здесь
    */  
    </script>  
</body>

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

Здесь есть еще две вещи, на которые я хочу обратить ваше внимание:

<div> с идентификатором #root. Это основная точка инициализации для нашего приложения. Внутри этого блока будет рендериться наше приложение.
Тэг <script type="text/babel"> в теле. Здесь мы будем писать код React.

Компоненты

В React всё приложение состоит из компонентов, которые, как правило, принимают форму классов JavaScript. Вы создаете компонент, наследуясь от класса React-Component. Для демонстрации, создадим компонент под названием Hello:

class Hello extends React.Component {  
    render() {  
        return <h1>Мой первый компонент!</h1>;  
    }  
}

Затем вам нужно определить методы для компонента. В нашем примере у нас есть только один метод, который называется render().

Внутри render() вы возвращаете описание того, что вы хотите отобразить на странице (грубо говоря, какую вёрстку вы хотите вывести). В случае, описанном выше, мы просто хотим, чтобы был отображен тег h1 с текстом Мой первый компонент! внутри.

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

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

Таким образом, здесь мы связываем наш компонент Hello с корневой точкой входа приложения (<div id="root"></div>).

Таким образом, мы просто говорим: Эй, React! Пожалуйста, выведите компонент Hello внутри DOM-узла с id root!

Что приводит к следующему результату:
Screenshot

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

Следующий шаг - заставить наше приложение работать с динамическими данными.

Работы с динамическими данными

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

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

Компонент может изменять своё внутреннее состояние напрямую. И он не может изменять свои props-данные напрямую.

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

Props

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

Для достижения такого типа повторного использования компонентов, мы добавим props. Так мы передаём props-ы компоненту:

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

Здесь мы передали prop под названием message, который имеет значение "my data in props". И теперь мы можем получить доступ к нему внутри компонента Hello, обращаясь через this.props.message, вот так:

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

В результате, это отобразится на экране:
Screenshot-1

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

Так что теперь у нас есть компонент многократного использования, который может отрисовывать любое динамическое сообщение на странице.

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

Состояние (State)

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

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

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

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

Перед тем, как инициализировать состояние, мы должны, выше, перед инициализацией, вызвать super() в конструкторе. Это связано с тем, что инициализации не произойдёт, если выше не вызвать родительский метод 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>;  
    }  
}

Замечание: Чтобы это сработало, нам также необходимо привязать контекст текущего экземпляра компонента к методу 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. И при нажатии на кнопку, вот как это будет выглядеть: v2sblyfk5axax0sv77m9

Поздравляю! Теперь у вас есть самое базовое понимание наиболее важных и основополагающих понятий в React за 5 минут. Я постарался изложить по-максимуму подробно и понятно, чтобы эту статьи по праву можно было назвать туториалом по react js для новичков.