Что такое Реакт?

Проще говоря, React — это библиотека JavaScript, которая используется для создания пользовательских интерфейсов.

Почему реагировать?

Кроме того, React эффективно отрисовывает и обновляет компоненты для наилучшего взаимодействия с пользователем. Поскольку React управляет виртуальным DOM, он экономит пользователю много времени, потому что JavaScript работает быстро, но не DOM.

Компоненты

Цель?

  1. Позволяет разделить пользовательский интерфейс на независимые повторно используемые части.
  2. Дайте каждому компоненту единственную ответственность. Как правило, компонент отвечает за визуализацию некоторого HTML.
  3. Создайте иерархию компонентов для желаемого DOM.

Базовый синтаксис

file name: Example.js
import React from 'react'
class Example extends React.Component {
state = {} //if stateful component
   componentDidMount(){ 
      this.props.fetchExample()
   }

   render(){
      return (
         <div> Hi! </div>
      //whatever you want the DOM to look like 
      )
   }
}
export default Example

Состояние против реквизита

Важно отметить, что ОБА состояние и свойства являются объектами JavaScript. Кроме того, ОБА состояния и свойства являются объектами, которые содержат информацию, влияющую на вывод функции рендеринга. Однако PROPS — это, по сути, свойства или параметры, которые можно передавать между компонентами или между ними. С другой стороны, STATE управляется внутри самого компонента. Следовательно, STATE будет объявлен внутри компонента как переменные (поэтому его нельзя будет передавать между компонентами). Кроме того, STATE содержит информацию, которую можно изменить или изменить в приложении. Кроме того, некоторые методы жизненного цикла, используемые в React, конкретно относятся к изменению или подтверждению существования STATE.

Access the component's state object:
this.state 
Access to a specific property of the component's state:
this.state.name_of_property

Как передать реквизиты между компонентами?

Рендеринг — это единственный способ для компонента передать свойства другому компоненту.

Функции конструктора и классы

Синтаксис extends React.Component предоставляет много встроенного синтаксиса и функциональности в ES6.

До и после

1. Состояние инициализации

Перед // this.state = {}

Теперь // состояние = {}

2. Функция конструктора и реквизит

До //

constructor(props){
  super() // this calls the constructor from React.Component and it             will set up the props for you
}

В настоящее время //

React will handle the props and assign them to the particular instance.

3. Функции связывания

До //

this.click = this.click.bind(this)

В настоящее время //

Arrow functions replace the .bind(this)
click = () => {}

Мораль истории в том, что функция конструктора все еще используется, но устарела из-за нового синтаксиса ES6.

Как говорится в документах React, «[i]если вы не инициализируете состояние и не привязываете методы, вам не нужно реализовывать конструктор для вашего компонента React».

По сути, просто имейте в виду, что функция конструктора теперь вызывается под капотом при использовании:

extends React.Component

Жизненный цикл компонента

Методы жизненного цикла компонента вызываются в определенные моменты его жизни.

Монтирование: создайте новый компонент и выполните первоначальную визуализацию компонента.

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

Отключение: удаление компонента со страницы.

Наиболее распространенные методы: конструктор, визуализация, componentDidMount и componentWillUnmount.

Базовый заказ:

Конструктор: перед визуализацией компонента необходимо создать экземпляр этого компонента.

Рендеринг: после вызова метода рендеринга React начнет обновлять DOM, что означает, что материал действительно помещается на страницу.

**Важно отметить, что метод рендеринга обновляет ТОЛЬКО обновленные элементы DOM.

componentDidMount: после загрузки HTML этот метод извлечет данные и добавит их в состояние.

**вы можете setState в этом методе

componentWillUnmount: этот метод вызывается непосредственно перед размонтированием и уничтожением компонента.

Что такое JSX?

** не требуется, но визуально полезно, когда

JSX означает JavaScript XML, который является расширением JavaScript. JSX позволяет людям писать HTML в React, что объясняет, почему он визуально привлекателен для пользователей. Чтобы написать JSX, вы должны поместить свой код в фигурные скобки.

ex)  <div> {this.state.name} <div>

Вывод

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