Быстрый старт для новичков

Привет всем,

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

Это основные вещи в React, которые вы должны сначала понять как новичок.

  1. Элементы
  2. Компоненты
  3. Реквизит
  4. Состояние
  5. Жизненный цикл
  6. Обработка событий

1. Элементы

Самая простая вещь для рендеринга в react js.

Элемент - это простой объект, это может быть строка, целое число или тег HTML и т. Д.

Например. вы просто определяете такой элемент и визуализируете его так

<div id="root"></div>
const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

2. Компоненты

Компоненты - это блоки, которые помогают нам создавать пользовательский интерфейс.

Компоненты возвращают элемент, который мы должны визуализировать или отобразить на экране.

Как и в случае с функциями javascript, входные данные могут передаваться в компонент, который называется «реквизит».

Есть два метода создания компонента в React.

Первый - определить его для написания функции JavaScript. Да, это самый простой способ определить компонент, но он не может иметь всех преимуществ (конструктор, состояние и т. Д.) компонентов React, поэтому давайте перейдем к следующему методу.

function Hello(props) {
  return <h1>Hello, {props.name} !</h1>;
}

Второй способ - определить его с помощью класса ES6, который расширяет React.Component

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name} !</h1>;
  }
}
const element = <Hello name="BlueDash" />;
// render its output
ReactDOM.render(
  element,
  document.getElementById('root')
);
// or you can directly call component to render its output
ReactDOM.render(
  <Hello name="BlueDash" />,
  document.getElementById('root')
);

3. Реквизит

В приведенном выше примере мы передали объект как атрибут JSX.

name="BlueDash"

это то, что мы называем «реквизитом» в React js.

Реквизиты, которые мы передаем в пользовательские компоненты, могут быть получены

{this.props.name}

в классе ES6.

4. Состояние

«Состояние похоже на свойства, но является частным и полностью контролируется компонентом». - reactjs.org

Это самое простое объяснение, которое у нас есть.

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

constructor(props) {
  super(props);
  this.state = {comment: 'Hi'};
}

И если вам нужно отрендерить компонент, вы можете изменить это с помощью

this.setState({comment: 'Hello'});

Всякий раз, когда он находится в компоненте, setState (), вызываемый React, знает, что состояние изменилось, и он должен повторно визуализировать компонент, чтобы изменить его в пользовательском интерфейсе.

5. Жизненный цикл

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {comment: 'Hi'};
  }
  componentDidMount() {
    this.timer = setInterval(
      () => this.change(),
      5000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
 
  change() {
    this.setState({
      comment: 'Hello'
    });
  }
  render() {
    return (
      <div>
        <h1>{this.state.comment}, {this.props.name} !</h1>
      </div>
    );
  }
}
ReactDOM.render(
  <App name="BlueDash" />,
  document.getElementById('root')
);

Это основная структура компонента. В этом примере вы можете увидеть два метода: «componentDidMount ()» и «componentWillUnmount ()», эти методы называются «крючками жизненного цикла» .

Хук componentDidMount () запускается после рендеринга вывода компонента в DOM.

Хук componentWillUnmount () очищает ресурсы, занятые компонентом, всякий раз, когда DOM, созданная компонентом, удаляется или уничтожается.

Если вам нужно сохранить что-то, что используется только в логике и не используется для отображения в пользовательском интерфейсе, вы можете добавить любое поле (здесь this.timer), кроме this.props и this.state, поскольку оба они специфичны для React.

Результатом вышеприведенного примера будет «Привет, BlueDash!», а через 5 секунд он будет повторно визуализировать «Привет, BlueDash!».

6. Обработка событий

События React именуются с помощью camelCase

Всякий раз, когда вам нужно вызвать триггер события, это должно быть записано как

<button onClick={handleClick}> </botton>

Теперь, если вам нужно инициировать как событие JavaScript «handleclick (this)», вы должны записать его как

<button onClick={this.handleClick}> </botton>

И должен привязываться к конструктору следующим образом

this.handleClick = this.handleClick.bind(this)

Теперь вы можете вызвать функцию

handleClick() {
  // do something
}

Вот пример обработки события onclick

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  render() {
    return(
      <div>
        <button onClick={this.handleClick}>
          {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
      </div>
    );
  }
}
ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

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

Поэтому вместо этого вы можете использовать стрелочную функцию () = ›{}

onClick={(e) => this.handleClick(e)}

Приведенный выше пример теперь будет выглядеть как

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
  }
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  render() {
    return(
      <div>
        <button onClick={(e) => this.handleClick(e)}>
          {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
      </div>
    );
  }
}
ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

Заворачивать

Теперь, если вы новичок или хотите начать учиться, вы можете иметь некоторое представление о том, как все это работает в React. Надеюсь, этот пост поможет вам разобраться в некоторых основах.

Мой следующий пост будет о том, как создать базовое приложение CRUD с помощью Laravel и React.