Сегодня, в заключительной части перевода курса по React, мы поговорим о современных возможностях React и обсудим идеи React-приложений, создавая которые, вы можете повторить то, чему научились, проходя этот курс, и узнать много нового.
→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами
→ Часть 25: практикум по работе с формами
→ Часть 26: архитектура приложений, паттерн Container/Component
→ Часть 27: курсовой проект
→ Часть 28: современные возможности React, идеи проектов, заключение
→ The end!
Занятие 46. Разработка современных React-приложений
→ Оригинал
Работой над библиотекой React занимается немало программистов в Facebook, вклад в проект делают и члены многочисленного сообщества, сложившегося вокруг React. Всё это ведёт к тому, что React очень быстро развивается. Например, если вы, изучая React в начале 2019 года, смотрели материалы по этой библиотеке, скажем, двухгодичной давности, вы не могли не заметить изменений, произошедших в React с момента выхода тех материалов. Например, в React 16.3 появились некоторые новые методы жизненного цикла компонентов, а некоторые методы были признаны устаревшими. А, скажем, в React 16.6 появилось ещё больше новых возможностей. Огромное количество новшеств ожидается в React 17.0 и в следующих версиях этой библиотеки.
Сейчас мы поговорим о некоторых современных возможностях React.
Многие из этих возможностей зависят от того, какая версия спецификации ECMAScript поддерживается инструментами, используемыми при разработке React-проекта. Скажем, если вы пользуетесь танспилятором Babel — это означает, что вам доступны самые свежие возможности JavaScript. При этом надо отметить, что при использовании в проектах неких возможностей JavaScript, ещё не включённых в стандарт, вы можете столкнуться с тем, что они, если будут включены в стандарт, могут измениться.
Одной из современных возможностей JavaScript, которой можно пользоваться при разработке React-приложений, является возможность объявления методов классов с использованием синтаксиса стрелочных функций.
Вот код компонента App, который выводит на экран текстовое поле:
import React, {Component} from "react"
class App extends Component {
// Перепишем с использованием свойств класса
constructor() {
super()
this.state = {
firstName: ""
}
this.handleChange = this.handleChange.bind(this)
}
// Перепишем в виде стрелочной функции
handleChange(event) {
const { name, value } = event.target
this.setState({
[name]: value
})
}
render() {
return (
<main>
<form>
<input
type="text"
name="firstName"
value={this.state.firstName}
onChange={this.handleChange}
placeholder="First Name"
/>
</form>
<h1>{this.state.firstName}</h1>
</main>
)
}
}
export default AppВот как выглядит страница этого приложения в браузере.
Приложение в браузере
Перепишем метод handleChange() в виде стрелочной функции, приведя код компонента к следующему виду:
import React, {Component} from "react"
class App extends Component {
// Перепишем с использованием свойств класса
constructor() {
super()
this.state = {
firstName: ""
}
}
// Переписано в виде стрелочной функции
handleChange = (event) => {
const { name, value } = event.target
this.setState({
[name]: value
})
}
render() {
return (
<main>
<form>
<input
type="text"
name="firstName"
value={this.state.firstName}
onChange={this.handleChange}
placeholder="First Name"
/>
</form>
<h1>{this.state.firstName}</h1>
</main>
)
}
}
export default App
В ходе такого преобразования в код внесены небольшие изменения, но эти изменения оказывают серьёзное влияние на то, как будет работать метод. Ключевое слово this в стрелочных функциях указывает на лексическую область видимости, в которой они находятся. Эти функции не поддерживают привязку this. Эта особенность стрелочных функций ведёт к тому, что методы, объявленных с их использованием, не нужно привязывать к this в конструкторе класса.
Ещё одна возможность, которую мы тут рассмотрим, заключается в использовании свойств классов. Сейчас мы, при инициализации состояния в конструкторе, пользуемся инструкцией this.state. Так мы создаём свойство экземпляра класса. Теперь же свойства можно создавать за пределами конструктора. В результате можно преобразовать код следующим образом:
import React, {Component} from "react"
class App extends Component {
// Переписано с использованием свойств класса
state = { firstName: "" }
// Переписано в виде стрелочной функции
handleChange = (event) => {
const { name, value } = event.target
this.setState({
[name]: value
})
}
render() {
return (
<main>
<form>
<input
type="text"
name="firstName"
value={this.state.firstName}
onChange={this.handleChange}
placeholder="First Name"
/>
</form>
<h1>{this.state.firstName}</h1>
</main>
)
}
}
export default AppОбратите внимание на то, что тут мы избавились от конструктора, инициализировав состояние при объявлении соответствующего свойства. Всё указывает на то, что эта возможность JS будет, в обозримом будущем, включена в стандарт.
Вот список материалов, посвящённых современным возможностям React.
- API Context. Его можно использовать вместо Redux, хотя это не говорит о том, что библиотека Redux потеряла актуальность.
- Границы ошибок.
- Шаблон Render props.
- Компоненты высшего порядка.
- Маршрутизатор React.
- Хуки React.
- Новые возможности React 16.6.
В целом можно отметить, что, так как React развивается очень быстро, всем, кто занимается React-разработкой, рекомендуется постоянно наблюдать за новшествами этой библиотеки.
Занятие 47. Идеи React-проектов
→ Оригинал
В ходе освоения React мы с вами создали пару проектов — Todo-приложение и генератор мемов. Вполне возможно, что вы уже знаете — что хотите создать с использованием React. Может быть, вы уже разрабатываете собственное приложение. Если же вы пока не определились с выбором, и учитывая то, что практика — это лучший способ осваивать компьютерные технологии — вот, вот и вот — материалы, в которых вы найдёте целую кучу идей веб-приложений, которые можно создать с помощью React.
Занятие 48. Заключение
→ Оригинал
Примите поздравления! Вы только что завершили изучение курса, посвящённого библиотеке React. Вы ознакомились с базовыми строительными блоками React-приложений, которые вы уже можете использовать для создания собственных проектов. Правда, если вы хотите создавать что-то с использованием React, будьте готовы к тому, что вам предстоит узнать ещё очень много нового.
Пройдёмся по основным концепциям, которые вы изучили в ходе освоения этого курса.
- JSX. JSX позволяет описывать пользовательские интерфейсы с применением синтаксиса, очень похожего на обычный HTML-код.
- Два подхода к разработке компонентов. Компоненты, основанные на классах и функциональные компоненты.
- Разные способы стилизации React-приложений.
- Передача свойств от родительских компонентов дочерним компонентам.
- Использование состояния компонентов для хранения данных и для работы с ними.
- Условный рендеринг.
- Работа с формами в React.
Благодарим за внимание!
Уважаемые читатели! Просим вас поделиться впечатлениями от этого курса и рассказать нам о том, что вы хотите разработать (или уже разрабатываете) с использованием React.
Автор: ru_vds
