Хабрахабр

[Перевод] Учебный курс по React, часть 28: современные возможности React, идеи проектов, заключение

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

image

→ Часть 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 очень быстро развивается. Работой над библиотекой React занимается немало программистов в Facebook, вклад в проект делают и члены многочисленного сообщества, сложившегося вокруг React. Например, в React 16. Например, если вы, изучая React в начале 2019 года, смотрели материалы по этой библиотеке, скажем, двухгодичной давности, вы не могли не заметить изменений, произошедших в React с момента выхода тех материалов. А, скажем, в React 16. 3 появились некоторые новые методы жизненного цикла компонентов, а некоторые методы были признаны устаревшими. Огромное количество новшеств ожидается в React 17. 6 появилось ещё больше новых возможностей. 0 и в следующих версиях этой библиотеки.

Сейчас мы поговорим о некоторых современных возможностях React.

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

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

Вот код компонента App, который выводит на экран текстовое поле:

import React, 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.

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

Занятие 47. Идеи React-проектов

→ Оригинал

Вполне возможно, что вы уже знаете — что хотите создать с использованием React. В ходе освоения React мы с вами создали пару проектов — Todo-приложение и генератор мемов. Если же вы пока не определились с выбором, и учитывая то, что практика — это лучший способ осваивать компьютерные технологии — вот, вот и вот — материалы, в которых вы найдёте целую кучу идей веб-приложений, которые можно создать с помощью React. Может быть, вы уже разрабатываете собственное приложение.

Занятие 48. Заключение

→ Оригинал

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

Пройдёмся по основным концепциям, которые вы изучили в ходе освоения этого курса.

  • JSX. JSX позволяет описывать пользовательские интерфейсы с применением синтаксиса, очень похожего на обычный HTML-код.
  • Два подхода к разработке компонентов. Компоненты, основанные на классах и функциональные компоненты.
  • Разные способы стилизации React-приложений.
  • Передача свойств от родительских компонентов дочерним компонентам.
  • Использование состояния компонентов для хранения данных и для работы с ними.
  • Условный рендеринг.
  • Работа с формами в React.

Благодарим за внимание!

Уважаемые читатели! Просим вас поделиться впечатлениями от этого курса и рассказать нам о том, что вы хотите разработать (или уже разрабатываете) с использованием React.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть