React Starter Kit - Часть 1 (Введение)

Я кодирую на Angular почти два года, но постоянно слышу от коллег-разработчиков, на встречах, технических конференциях и даже барах «на это так легко реагировать», а я был совершенно невежественен и отвечал просто: « Действительно! » или «Может быть».

Я покончил с глупостью и подумал о том, чтобы самому изучить React, чтобы понять различия. Итак, начнем

Что такое React?

Библиотека Javascript (не Framework)
Создан на Facebook (проще создавать большие одностраничные приложения)
Способствует функциональному программированию

Кто им пользуется?

Различные лидеры рынка используют React в производстве, чтобы получить более подробную информацию, пожалуйста, обратитесь по этой ссылке https://github.com/facebook/react/wiki/Sites-Using-React

Какой React мы собираемся использовать?

Мне посчастливилось начать с React 16 (или React fiber). Версий с небольшими изменениями очень много. Некоторые из его особенностей:

Улучшенный асинхронный рендеринг
Возврат массивов элементов
Лучшая обработка ошибок
Меньшие размеры файлов

Многие первопроходцы замечают значительное улучшение производительности, но не так много для разработчиков.

Реагировать синтаксис

Давайте посмотрим на наш образец файла index.html, у нас есть ссылки на скрипты для реагирования и реагирования dom. Последний отвечает за рендеринг всего на нашей странице.

Здесь мы только что создали новый элемент реакции, используя React.createElement, не передавая никаких свойств и «Hello world» в качестве дочерних элементов. Второй аргумент - это целевой элемент, в котором вы хотите отобразить этот вновь созданный элемент. Легко, верно, поэтому, если вы откроете страницу выше в браузере, вы увидите в качестве вывода «Hello world».

Введение в JSX

Пока все хорошо, но подумайте, где вы хотите отобразить новые сложные теги в цикле, например list (li) или tr и т. Д. Тогда этот способ создания элемента может пойти наперекосяк. Вот где на сцену выходит JSX. JSX, или JavaScript как XML, - это языковое расширение, которое позволяет писать теги прямо в вашем JavaScript.

Но если мы напрямую напишем код ниже в нашем существующем файле, мы получим ошибку, потому что нам нужно скомпилировать jsx в javascript.

<script type="text/javascript">
ReactDOM.render(
<h1></h1>,
document.getElementById('react-container')
)
</script>

Для компиляции jsx мы сейчас будем использовать браузер babel и изменить файл, как показано ниже.

Здесь мы включили версию babel со сценарием cdn, но она будет очень медленной. Он используется для демонстрации, позже мы сделаем это более эффективно.

Итак, когда проект становится больше, становится сложно писать React.createElement снова и снова. Тогда jsx - отличное спасение для нас.

ES6 - Компоненты класса

Основная идея React - компонентная. Мы составляем различные компоненты вместе, чтобы создать пользовательский интерфейс.

Создадим наш первый компонент. Для этого мы будем использовать класс ES6.

Мы создаем простой класс ES6 с именем HELLO и расширяем React.component. Внутри мы напишем обязательный метод с именем render method, который просто возвращает JSX. Позже нам нужно будет использовать этот недавно созданный компонент, как показано ниже.

ReactDOM.render(
<Hello></Hello>,
document.getElementById('react-container')
)

Пожалуйста, обратитесь к приведенному ниже коду для всего файла:

Если вы заметили, мы также добавляем id и class в наш новый компонент реакции. Единственная загвоздка в том, что мы не можем использовать класс для класса css внутри JSX, поскольку он уже используется при определении класса ES6. Итак, мы назвали его className. Все остальное то же самое.

Компонент функции без сохранения состояния

Другой способ создания компонента - это функция компонента без сохранения состояния. Наш приведенный выше пример - это просто класс, который возвращает UI или jsx. Наша функция без сохранения состояния тоже такая же, это функция, возвращающая UI.

Это очень распространенный синтаксис, который вы увидите во многих проектах React и документации.

Характеристики

Следующая цель - как мы можем передать некоторые данные внутри только что созданного компонента без сохранения состояния. Для этого у нас есть реквизит. Единственное различие между компонентом es6 и функциональным компонентом без сохранения состояния состоит в том, что в предыдущих свойствах доступны такие же свойства, как this.props, а в более поздних - это функциональный параметр.

Обратитесь к приведенной ниже сути, чтобы увидеть фактическую реализацию

Состояние

Лично я считаю, что состояние - одна из важнейших концепций реакции. Это похоже на то, как всякий раз, когда изменяется состояние, функция рендеринга вызывается снова.

Чтобы изобразить реализацию состояния, мы создадим компонент путем класса es6 и конструктор для этого нового класса.

constructor(props) {
super(props)
this.state = {
checked: true
}
}

Здесь мы просто передаем наши реквизиты в super и инициализируем состояние с одним проверенным ключом, вот и все.

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

handleCheck = () => {
this.setState({
checked: !this.state.checked
})
}

Это все просто, не теряйте фокус, это скоро закончится

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

И для проверки визуализация вызывается снова при изменении состояния. На самом деле мы отображаем сообщение на экране, которое зависит от установленного или снятого состояния флажка.

Вывод

Это первое из трех руководств по React Starter. Идея этого руководства заключалась в том, чтобы познакомить вас с идеей реагирования перед непосредственным созданием нового проекта. Далее мы собираемся создать полноценный проект в React, используя основные концепции, описанные в этой статье.

Ссылка на следующую статью скоро будет обновлена здесь.

React Starter Kit - Часть 1 (Введение)