Недавно я начал изучать 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
.