Как обрабатывать события в React приложении

В JSX нам нужно обернуть выражения JavaScript фигурными скобками { }. Обычный JavaScript:

<button onclick="hitMe()">hit me</button>

В ReactJS:

<button onClick={hitMe}>hitme</button>

Рассмотрим подробнее, как присоединить обработчики событий в функциональных и классовых компонентах.

Функциональные компоненты

function Button() {
  function handleClick() {
    alert('some one clicked me')
  }
  
  return (
    <button onClick={handleClick}>Click me</button>
  )
}

В React нам нужно передать функцию обработчика событий.

Передача аргументов

Мы также можем передавать аргументы в функции обработчика событий, подобные этой.

function Button() {
  function handleClick(name) {
     alert(name)
  }

  return (
    <button onClick={()=>handleClick('react')}>Click me</button>
  )
}

Классовые компоненты

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

  handleInc(){
    this.setState({
      num: this.state.num+1
    })
  }

  render(){
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={this.handleInc.bind(this)}>Increment</button>
      </div>
    )
  }
}

В компонентах на основе классов нам нужно привязать this к классу, иначе this будет привязано к global window object или в строгом режиме this будет undefined. Мы можем решить эту проблему с помощью стрелочных функций, потому что в стрелочных функциях this будет привязано к его внешнему контексту выполнения. Давайте модифицируем приведенный выше компонент с помощью стрелочных функций.

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

  handleInc() {
    this.setState({
      num: this.state.num+1
    })
  }

  render(){
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={()=>this.handleInc()}>Increment</button>
      </div>
    )
  }
}

Второй способ использования class fields syntax

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

  // стрелочная функция
  handleInc = () => {
    this.setState({
      num: this.state.num+1
    })
  }

  render() {
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={this.handleInc}>Increment</button>
      </div>
    )
  }
}

Объект события

Мы также можем использовать объект события таким образом в react.

function Link(){

  function handleClick(e){
     console.log(e);
     e.preventDefault();
  }

  return (
      <a href="#" onClick={handleClick} >Click me</a>
  )
}

React – это JavaScript-библиотека, которая позволяет разработчикам строить мощные и масштабируемые веб-приложения. Однако, как и в любом проекте, эффективная организация кода играет ключевую роль в обеспечении чистоты, читаемости и управляемости приложения. В этой статье мы рассмотрим важные аспекты структуры файлов в React-приложении.

1. Основные Компоненты

В центре любого React-приложения находятся компоненты. Они представляют собой строительные блоки приложения, отвечающие за отображение пользовательского интерфейса. Обычно, компоненты разделяют на функциональные и классовые. Функциональные компоненты – это простые функции, возвращающие JSX, тогда как классовые компоненты обладают состоянием и методами жизненного цикла. Структура файлов для компонентов может выглядеть следующим образом:

/src
  /components
    Button.js
    Header.js
    /common
      Input.js
      Card.js
  /containers
    HomePage.js
    UserProfile.js

В данном примере /components содержит общие компоненты, такие как кнопки и заголовки, а /containers – компоненты, представляющие отдельные страницы приложения.

2. Работа с Состоянием и Хранилищем

Управление состоянием в React-приложении может осуществляться с использованием встроенного useState для функциональных компонентов или this.state для классовых компонентов. Если приложение имеет сложное состояние, разумно использовать контекст (Context) или библиотеки управления состоянием, такие как Redux. Структура файлов для работы с состоянием может выглядеть так:

/src
  /store
    index.js
    /reducers
      userReducer.js
      appReducer.js
    /actions
      userActions.js
      appActions.js

Здесь /store содержит файлы, связанные с управлением состоянием, такие как редьюсеры и действия.

3. Маршрутизация и Навигация

Во многих веб-приложениях присутствует необходимость в маршрутизации – переходе между различными страницами. Для этого обычно используется библиотека React Router. Структура файлов для маршрутизации может выглядеть так:

/src
  /pages
    Home.js
    About.js
    /profile
      UserProfile.js
  App.js
  index.js

В данном примере /pages содержит отдельные страницы приложения, а App.js может быть местом, где настраивается маршрутизация.

4. Стили и Ресурсы

Вопрос стилей часто стоит особняком. React позволяет использовать CSS, SCSS, или даже инлайн-стили. Для удобства, структура файлов стилей может выглядеть следующим образом:

/src
  /styles
    main.css
    /components
      Button.css
      Header.css
    /pages
      Home.css
      UserProfile.css

Это позволяет легко находить и редактировать стили, связанные с конкретными компонентами или страницами.

5. Тестирование и Документация

Хорошая структура файлов также облегчает тестирование и документирование кода. Обычно, тесты хранятся в отдельной директории, а документация может быть включена внутри файлов или храниться в отдельной папке.

/src
  /tests
    Button.test.js
    UserProfile.test.js
  /docs
    ComponentDocs.md
    APIReference.md

Итоги

Соблюдение структуры и организация файлов React-приложения не только улучшают читаемость кода, но и упрощают сопровождение, добавление новых функциональностей и работу в команде. При правильной организации файлов, код React-приложения становится более поддерживаемым и масштабируемым.