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

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

^[1]

→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX ^[2]
→ Часть 2: функциональные компоненты ^[3]
→ Часть 3: файлы компонентов, структура проектов ^[4]
→ Часть 4: родительские и дочерние компоненты ^[5]
→ Часть 5: начало работы над TODO-приложением, основы стилизации ^[6]
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript ^[7]
→ Часть 7: встроенные стили ^[8]
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов ^[9]
→ Часть 9: свойства компонентов ^[10]
→ Часть 10: практикум по работе со свойствами компонентов и стилизации ^[11]
→ Часть 11: динамическое формирование разметки и метод массивов map ^[12]
→ Часть 12: практикум, третий этап работы над TODO-приложением ^[13]
→ Часть 13: компоненты, основанные на классах ^[14]
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов ^[15]
→ Часть 15: практикумы по работе с состоянием компонентов ^[16]
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий ^[17]
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов ^[18]
→ Часть 18: шестой этап работы над TODO-приложением ^[19]
→ Часть 19: методы жизненного цикла компонентов ^[20]
→ Часть 20: первое занятие по условному рендерингу ^[21]
→ Часть 21: второе занятие и практикум по условному рендерингу ^[22]
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников ^[23]
→ Часть 23: первое занятие по работе с формами ^[24]
→ Часть 24: второе занятие по работе с формами ^[25]
→ Часть 25: практикум по работе с формами ^[26]
→ Часть 26: архитектура приложений, паттерн Container/Component ^[27]
→ Часть 27: курсовой проект ^[28]
→ Часть 28: современные возможности React, идеи проектов, заключение ^[1]
→ The end!

Занятие 46. Разработка современных React-приложений

→ Оригинал ^[29]

Работой над библиотекой 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

Обратите внимание на то, что тут мы избавились от конструктора, инициализировав состояние при объявлении соответствующего свойства. Всё ^[30] указывает на то, что эта возможность JS будет, в обозримом будущем, включена в стандарт.

Вот список материалов, посвящённых современным возможностям React.

• API Context ^[31]. Его можно использовать вместо Redux, хотя это не говорит о том, что библиотека Redux потеряла актуальность.
• Границы ошибок ^[32].
• Шаблон Render props ^[33].
• Компоненты высшего порядка ^[34].
• Маршрутизатор React ^[35].
• Хуки React ^[36].
• Новые возможности React 16.6 ^[37].

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

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

→ Оригинал ^[39]

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

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

→ Оригинал ^[43]

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

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

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

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

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

Автор: ru_vds

Источник ^[44]