Рефакторинг в React: советы и примеры

React - это библиотека JavaScript, разработанная компанией Facebook, предназначенная для создания пользовательских интерфейсов веб-приложений.

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

React использует JSX (расширение синтаксиса JavaScript), который позволяет разработчикам писать HTML-подобный код прямо внутри JavaScript.

  import React from 'react';

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: 0 };
    }

    incrementCount() {
      this.setState(prevState => ({ count: prevState.count + 1 }));
    }

    render() {
      return (
        <div>
          <h1>Пример компонента React</h1>
          <p>Счетчик: {this.state.count}</p>
          <button onClick={() => this.incrementCount()}>Увеличить</button>
        </div>
      );
    }
  }

  export default MyComponent;
  

React также предоставляет набор жизненных циклов, которые нам особенно интересны при работе с компонентами.

  import React from 'react';

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { data: null };
    }

    componentDidMount() {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }

    render() {
      return (
        <div>
          <h1>Пример компонента React с загрузкой данных</h1>
          {this.state.data ? (
            <p>Данные: {this.state.data}</p>
          ) : (
            <p>Загрузка данных...</p>
          )}
        </div>
      );
    }
  }

  export default MyComponent;
  

React также поддерживает передачу данных между компонентами через props (свойства).

  import React from 'react';

  const ChildComponent = (props) => {
    return <p>Привет, {props.name}!</p>;
  };

  class ParentComponent extends React.Component {
    render() {
      return (
        <div>
          <h1>Пример передачи данных через props</h1>
          
        </div>
      );
    }
  }

  export default ParentComponent;
  

React предлагает множество других возможностей и функций, таких как работа со списками, роутинг и управление состоянием приложения.

React является мощной и популярной библиотекой для разработки пользовательских интерфейсов веб-приложений.