Изучите основы React, создав крошечное приложение за считанные минуты.
React - очень популярная библиотека JavaScript, созданная Facebook и используемая многими другими лидерами отрасли, такими как Netflix, Airbnb и т. Д. Это библиотека для создания пользовательских интерфейсов. Он вводит много новых концепций о том, как подходить к созданию сложных пользовательских интерфейсов. Мы рассмотрим основные концепции создания приложений с помощью React. Мы коснемся всех основ, которые вам нужно знать, чтобы начать чувствовать себя комфортно с React.
Примечание. Я буду использовать некоторый синтаксис ES6 +, включая class , arrow functions , const , let, import, export и т. д. Я предлагаю вам пройти Введение в ES6, если вы не знакомы с новым обновленным синтаксисом. Мы пропустим установку всех инструментов сборки благодаря Codesandbox - он дает вам готовую среду разработки прямо в вашем браузере.
Начиная
Для начала зайдите в Codesandbox и создайте новую песочницу React. Создав его, откройте index.js и Hello.js в каталоге src и удалите весь существующий код. Это просто для того, чтобы у нас был чистый лист для начала.
Теперь мы создадим приложение, у которого будет ввод, который принимает ваше имя и передает вам привет. Это действительно просто. Мы рассмотрим основы React, такие как компоненты, JSX, состояние, свойства, обработка событий в React, компоненты с сохранением состояния (компоненты как класс) и компоненты без состояния (компоненты как функции) при создании этого крошечного приложения.
Если вы хотите поиграть с готовым кодом, вот ссылка на приложение -
Компонент First React
Все в React является компонентом. Итак, давайте напишем наш первый компонент, и это будет компонент «Hello World». Никаких сюрпризов !!
Перейдите в index.js в каталоге src и напишите следующий код -
import React from 'react';
import ReactDOM from 'react-dom';
class HelloWorld extends React.Component {
render() {
return <div>Hello World</div>;
}
}
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
Вот и все, вы создали свой первый компонент React. Он отображает <div>, говорящий "Hello World". Давайте пройдемся по только что написанному коду.
Сначала мы импортируем React из пакета react. Нам нужно это, чтобы иметь возможность создать класс компонента HelloWorld, поскольку, как вы видите, он расширяет React.Component. Также он нам понадобится для написания JSX.
Во-вторых, мы импортируем ReactDOM из пакета react-dom. Нам это нужно, чтобы смонтировать приложение React к элементу DOM в html. Посмотрите на самую последнюю строку, мы используем метод ReactDOM.render для монтирования нашего приложения (в нашем случае это просто компонент HelloWorld) в элементе DOM с id из “root”. Если вы проверите index.html в общедоступном каталоге, вы заметите, что в нем есть <div> с id="root". «Монтирование» означает, что наши реагирующие приложения отображаются как дочерний узел <div> с id="root".
Теперь поговорим о Компоненте. В качестве реакции мы можем создать Компонент, создав class, который расширяет класс React.Component. И каждый компонент React должен иметь render метод. Этот метод render и метод ReactDOM.render не связаны между собой, поэтому не путайте их. Метод render возвращает то, что компонент должен отображать в DOM. В нашем случае это простой <div> с некоторым текстом. Вы заметите, что возвращаемое значение выглядит как HTML и не заключено в ""или ``. Следовательно, это не строка. Это то, что мы называем JSX. JSX выглядит как HTML и используется для упрощения создания контента для рендеринга.
JSX - не что иное, как синтаксический сахар для React.createElement вызовов. JSX может содержать любой допустимый HTML (с некоторыми изменениями, такими как - className вместо атрибута class и атрибуты обработчика событий camelCased, например, onChange вместо onchange), другие компоненты React, выражения JS и многое другое. Узнайте больше о JSX здесь. Пока этого достаточно.
Реквизит и состояние
Существует два наиболее распространенных способа обработки данных в React - Props и State.
Проще говоря, реквизиты - это любые данные, которые передаются компоненту из компонента верхнего уровня, что-то вроде аргументов функции. В то время как состояние зависит от компонента и доступно исключительно для самого компонента. Компонент может изменять свои собственные данные состояния, но не поддерживает данные.
Давайте посмотрим, как мы можем использовать Props -
Откройте index.js и внесите следующие изменения (изменения выделены жирным шрифтом) -
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
class App extends React.Component {
render() {
return <Hello name="World"/>;
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
Сейчас мы импортируем компонент Hello из файла Hello.js в том же локальном каталоге. Мы изменили оператор return JSX, чтобы использовать компонент Hello. Мы используем атрибут name со значением "World". name является опорой для компонента Hello. Мы можем получить доступ к переданному значению, используя опору name в компоненте Hello. Я также изменил имя основного компонента с HelloWorld на App.
Откройте Hello.js в каталоге src и напишите следующий код -
import React, { Component } from 'react';
class Hello extends Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
export default Hello;
Здесь мы создаем новое имя компонента Hello, и оно возвращает <h1> с некоторым текстом.
Помните, что при использовании компонента Hello в компоненте App мы передали ему свойство name. Внутри компонента мы можем получить доступ к значению, переданному в свойство name, используя его как this.props.name. В этом случае значение будет "World". Таким образом, он закончится рендерингом "Hello World".
Наконец, мы используем export компонент по умолчанию, чтобы использовать его из index.js.
Давайте теперь воспользуемся State -
Откройте index.js и внесите следующие изменения (изменения выделены жирным шрифтом) -
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
import Form from './Form';
class App extends Component {
state = {
name: ''
};
_updateName = event => {
const value = event.target.value;
this.setState({ name: value });
};
render() {
return (
<div>
<Hello name={this.state.name} />
<Form updateNameHandler={this._updateName} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Сейчас мы импортируем еще один новый компонент - Form. Мы инициализируем state и метод с именем _updateName с использованием синтаксиса инициализатора свойств ES6. Итак, в этом случае state - это object со свойством name, установленным на '' (пустое строковое значение).
Мы передаем значение name из состояния в компоненте App в компонент Hello как свойство. Мы обращаемся к нему как this.state.name.
Теперь мы подошли к обновлению или изменению состояния. Пишем метод _updateName. Метод принимает один параметр event, который мы получим от обработчика событий onChange, который мы будем использовать внутри компонента Form. Мы получаем новый value из event.target.value и обновляем значение name в состоянии с ним.
В React у нас есть специальный API для обновления состояния, то есть this.setState. Он принимает объект или функцию в качестве первого параметра и необязательную функцию обратного вызова в качестве второго параметра. Если объект передается в качестве первого параметра, он использует неглубокое слияние объекта предыдущего состояния и переданного объекта для формирования нового объекта состояния. . Если передается функция (вызываемая как функция обновления), возвращаемое значение функции неглубоко объединяется с предыдущим объектом состояния , чтобы сформировать новое состояние. Кроме того, функция обновления получает предыдущее состояние как первый параметр и реквизиты как второй параметр. .
Мы сохраним простоту и воспользуемся объектом для обновления значения name как такового this.setState({ name: value }).
Примечание. Не забывайте обновлять состояние непосредственно в React, т.е. вот так this.state.name = value. Это не приведет к повторному рендерингу и возникновению неприятных ошибок. Единственное место, где вы можете назначить this.state, - это конструктор. Всегда используйте this.setState.
Затем мы используем новый компонент Form в функции render. Мы передаем _updateName функцию как updateNameHandler prop компоненту Form.
Теперь создайте файл в каталоге src с именем Form.js и напишите в нем следующий код -
import React from 'react';
export default props => (
<input
type="text"
name="name"
onChange={props.updateNameHandler}
/>
);
Этот компонент выглядит иначе, чем App или Hello компонент. Это потому, что это функция-как-компонент, или более известный как компонент без состояния. Компонент, которому требуется только render функция, можно записать как function. Значение функции return - это то, что отображается точно так же, как значение return метода render в классе-как-компоненте или компоненте с отслеживанием состояния. Компонент без состояния не может иметь никаких перехватчиков состояния или жизненного цикла (подробнее об этом в промежуточном руководстве).
Чтобы обработать событие изменения в элементе ввода, мы присоединяем функцию updatNameHandler из реквизита к атрибуту onChange ввода. React использует так называемые синтетические события для обработки событий, поэтому на onchange это onChange.
event передается методу _updateName в App, оттуда мы получаем значение и обновляем this.state.name в App, который затем передает обновленное значение this.state.name как name реквизиты в Hello, который отображает новый вывод «Hello».
Таким образом, наше приложение готово. Он показывает «Hello» в начале, и когда пользователь вводит свое имя во вводе, он добавляет свое имя после «Hello».
Заключение
Поздравляем с созданием приложения React. Вы изучили основные концепции React и некоторые другие с помощью этого крошечного приложения за считанные минуты. Если вам понравилась эта статья, пожалуйста, аплодируйте, делитесь, комментируйте. Я скоро напишу статью среднего уровня по React.
А пока посмотрите эти, чтобы узнать больше -
