Открыть список
Как стать автором
Обновить
2699,56
Рейтинг
RUVDS.com
VDS/VPS-хостинг. Скидка 10% по коду HABR

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

Блог компании RUVDS.comРазработка веб-сайтовJavaScriptReactJS
Перевод
Tutorial
Автор оригинала: 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.

Теги:Reactобучениеразработка
Хабы: Блог компании RUVDS.com Разработка веб-сайтов JavaScript ReactJS
Всего голосов 38: ↑37 и ↓1 +36
Просмотры12K

Комментарии 1

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Похожие публикации

Лучшие публикации за сутки

Информация

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

Блог на Хабре