Как стать автором
Обновить
2649.27
RUVDS.com
VDS/VPS-хостинг. Скидка 15% по коду HABR15

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

Время на прочтение 5 мин
Количество просмотров 14K
Автор оригинала: Bob Ziroll
Сегодня, в заключительной части перевода курса по 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 занимается немало программистов в 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.


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

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


Оригинал

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

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


→ Оригинал

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

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

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

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

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

Теги:
Хабы:
+36
Комментарии 1
Комментарии Комментарии 1

Публикации

Информация

Сайт
ruvds.com
Дата регистрации
Дата основания
Численность
11–30 человек
Местоположение
Россия
Представитель
ruvds