ОсновыReact.js
React.js – одна из самых популярных библиотек для создания сложных Frontend-приложений.
Однако, успешная разработка на нём требует хорошего понимания концепций, на которых он построен.
В этом скринкасте мы:
- Познакомимся с основными понятиями и внутренним устройством React.js.
- Разберёмся с тем, как создавать компоненты на React.js.
- Разберём ряд подводных камней, на которые часто наступают начинающие React-разработчики.
Одна из главных особенностей React.js – свобода действий, существует огромное количество подходов к построению приложений с его помощью (redux, mobx и другие).
Они не являются частью собственно React.js, а представляют собой архитектурные надстройки и также постоянно развиваются. Мы осваиваем их наОсновном и Продвинутом онлайн-курсах по React.JS.
Материалы взяты отсюда
Критерий завершения
видео просмотрены
-
Введение, компонентный подход
-
Настройка окружения, create-react-app
-
JSX - синтаксис для разметки в React.js
-
React-компонент, передача данных
-
Интерактивность, состояние компонентов
-
Virtual DOM - основной алгоритм React.js
-
Отображение массивов, смысл аттрибута key
-
Оформление компонентов, работа с CSS
-
Жизненный цикл React-компонентов
-
Оптимизация приложений, shouldComponentUpdate
-
Отладка React-приложений
-
Обратный поток данных, подъём состояния
Вывод
Курс хороший. Но все же осталось много вопросов, т.к. теорией все же стоит владеть. Но общая концепция React понятна. Будем копать дальше:)
Дневник цели
Жизненный цикл React-компонентов
1. Инициализация.
- constructor(props)
- componentWillMount() - если нужно сделать что-то до рендера компонента
- render() - построение вирт. DOM для компонента, потом будет помещен в реальный DOM
- componentDidMount() - если нужно сделать что-то после того, как компонент помещен в реальный DOM
2. Обновление. В 2х случаях: 1 - изменено состояние компонента, 2- изменено состояние родителя.
- componentWillReceiveProps(nextProps) - перестраивается кто-то из родителей и могли поменяться props
- shouldComponentUpdate(nextProps, nextState) - нужно ли перестраивать DOM для этого компонента (идля компонента, и для родителей)
- componentWillUpdate(nextProps, nextState) - выполнится перед перестриванием компонента (и для компонента, и для родителей)
- render()
- componentDidUpdate(prevProps, prevState)
3. Удаление.
- componentWillUnmount() - почистить подписки и т.д.
JSX - синтаксис для разметки в React.js
Babel is a JavaScript compiler.
//Описываем компонент Article
function Article() {
//можно объявлять const
const body = <section>body</section>
return (
<div className="hello" style={{color: 'red'}}>
<h2>title</h2>
{body}
<h3>
//можно писать js
creation date: {(new Date).toDateString()}
</h3>
</div>
)
}
function App() {
return (
<div>
<h1>App Name</h1>
//Подключаем компонент Article
<Article />
</div>
)
}
Настройка окружения, create-react-app
//create-react-app - модуль, кот. позволяет создавать react-приложения с настроеным окружением
1. npm install -g create-react-app
//Создаем приложение (вызываем cmd непосредственно из папки для будущего приложения)
2. create-react-app Your_Name_Of_Project
Введение, компонентный подход
Компонент:
- Самостоятельная часть приложения
- Содержит часть логики
- Описывает свой вид и поведение
- Можно использовать несколько раз
import React from 'react'
//Подключаем метод render из react-dom
import {render} from 'react-dom'
//React-компонент
function HelloWord() {
return {
<div>
</div>
<h1>Hello Word!</h1>
</div>
}
}
//Рендерим в div id='root'
render(<HelloWord/>, document.getElementById('root'))
Композиция компонентов - компоненты внутри себя содержат более мелкие компоненты
Состояния компонентов - реакция на click, hover и т.д.
