Недавно я начал изучать React на Udemy. Вот мои заметки/наблюдения. Я добавлю больше к этому.

  • Компоненты или компоненты представления в React — это фрагменты кода, которые генерируют HTML. Поэтому, если вы когда-нибудь увидите «компонент» или «компонент представления», знайте, что он сгенерирует HTML.
  • JSX = JS + XML. Это шаг препроцессора, который добавляет синтаксис XML в JavaScript.
  • Модули ES6 похожи на модули в Python. Это означает, что их можно импортировать и экспортировать. например.
import React from 'react';
  • Приведенный выше пример работает при импорте из узловых модулей. Если вы хотите импортировать из js-файла, вам нужно указать путь. например.
import SearchBar from './components/search_bar';

React DOM — это отдельная библиотека от React.

import ReactDom from 'react-dom';
  • Создавайте экземпляры ваших компонентов, прежде чем отображать их в DOM.
  • Внутри компонентов могут быть мини-компоненты. Это помогает в ремонтопригодности и возможности повторного использования.
  • Вот правило — всегда создавайте только один компонент в файле.
  • В ES6 используйте фигурные скобки {} для ванильного (ES5) JavaScript.
  • Состояние — это простой JS-объект.
  • Инициализируйте состояние перед его использованием.
  • Функциональные компоненты не имеют состояния. Это делают только компоненты на основе классов.
  • Объявить состояние в методе конструктора класса и больше нигде
class SearchBar extends Component {
  //initialize the state by defining the constructor method
  constructor(props) {
    super(props); //super calls the constructor inside Component
    this.state = { term: '' };
  }

В остальных случаях обновляйте состояние с помощью this.state

  • Управляемый компонент — Управляемый компонент имеет значение, установленное state.