Как обрабатывать события в React приложении
2 года назад·2 мин. на чтение
В этой статье рассмотрим как обработать события в React, а также о том, почему мы связываем ключевое слово `this` в классовых компонентах React.
В JSX нам нужно обернуть выражения JavaScript фигурными скобками
{ }
.
Обычный JavaScript:
В ReactJS:<button onclick="hitMe()">hit me</button>
Рассмотрим подробнее, как присоединить обработчики событий в функциональных и классовых компонентах.<button onClick={hitMe}>hitme</button>
Функциональные компоненты
В React нам нужно передать функцию обработчика событий.function Button() { function handleClick() { alert('some one clicked me') } return ( <button onClick={handleClick}>Click me</button> ) }
Передача аргументов
Мы также можем передавать аргументы в функции обработчика событий, подобные этой.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-приложении: Основы Организации Кода
2 месяца назад·2 мин. на чтение
В статье рассматриваются основные принципы структурирования файлов, правила и лучшие практики, способствующие поддерживаемости, масштабируемости и читаемости кода в React-приложениях.
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