Научитесь реагировать через 5 минут

Этот учебник даст вам базовое понимание React путем создания a очень простое применение. Я пропущу все что я не считаю основным.

А потом, если это заинтересует вас и вы хотите узнать больше, вы можете посмотреть наш бесплатный курс React на Scrimba.

Но пока сосредоточимся на основах!

Настройка

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

Это выглядит так:

<html>
<head>  
<script src="  
<script src="  
<script src="  
</head>  
<body>  
    <div id="root"></div>  
    <script type="text/babel">  
      
    /*   
    ADD REACT CODE HERE 
    */  
      
    </script>  
</body>  
</html>

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

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

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

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

Компоненты

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

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

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

Внутри render() вы вернете описание того, что вы хотите, чтобы React нарисовал на странице. В вышеприведенном случае мы просто хотим, чтобы он отображал h1 тег с текстом Привет Мир! внутри него.

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

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

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

Поэтому мы просто говорим: Привет, React! Пожалуйста, предоставьте Привет компонент внутри узла DOM с идентификатором корень!

Это приводит к следующему:

1*T-bmSzg0KlijyB3dG1M-ow

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

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

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

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

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

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

Для начала рассмотрим подробнее реквизит.

Реквизит

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

Для достижения такого типа многоразового использования мы добавим атрибуты. Вот как вы передаете свойства компонента:

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

Этот реквизит называется message и имеет значение «мой друг». Мы можем получить доступ к этому пропу внутри компонента Hello с помощью ссылки this.props.messageнравится это:

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

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

1*M0-2Ct0K3SARZLSwIzgdJw

Причина, почему мы пишем {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 метод. Иначе мы не могли бы получить доступ 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>     
        )  
    }  
}

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

v2sblyfk5axax0sv77m9

Поздравляю! Теперь у вас есть базовое понимание важнейших концепций React.

Если вы хотите узнать больше, обязательно посмотрите наш бесплатный курс React на Scrimba.

Удачи с кодировкой 🙂

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *