Обзоры
- React: создание простых в обслуживании, быстродействующих компонентов пользовательского интерфейса
- React.js курс для начинающих
Статьи
- Вышел React v.16.3.0
- Новшества React 16.3(.0-alpha)
- React v16.3.0: New lifecycles and context API
- Мыслим в стиле React
- Как организовать большое React-приложение и сделать его масштабируемым
- Погружение в React:
— Роутер
— Контейнеры
— Redux - Reactjs (документация, руководство, примеры, flux)
- React.js на русском языке:
— 1. Установка
— 2. Внедрение JSX
— 3. Отрисовка элементов
— 4. Компоненты и свойства
— 5. Состояние и жизненный цикл
— 6. Обработка событий
— 7. Условный рендеринг
— 8. Списки и ключи - React. Продвинутые руководства:
— 1. JSX — подробности
— 2. PropTypes — проверка типов в React
— 3. Ref-атрибуты и DOM в React
— 4. Неконтролируемые компоненты в React
— 5. Оптимизация производительности в React - CSSSR Shorts. React
Tips & tricks
- Компоненты высшего порядка в React
- Паттерны React
- Шаблоны проектирования в React
- Ответы на распространённые вопросы о шаблоне render prop
- Гайд как писать на React в 2017
- Recompose
- https://habrahabr.ru/post/348298/
boilerplate
Keys
Context
- Новый контекст Реакта или жизнь без боли и бойлерплейта
- Новый контекст React в деталях, пример
- Мир недокументированного React.js. Context
Lifecycle
- Понимание жизненного цикла React-компонента
- React lifecycle methods diagram
- Как использовать getDerivedStateFromProps в React 16.3
Props & State
- Валидация свойств React компонентов
- Working with Data in React: Properties & State
- Exploring React’s State Propagation
Hooks
Типизация
Flow
CSS
- React Easy Style
- ReactCSS
- Конец эры глобального CSS
- Finally, CSS In JavaScript! Meet CSSX
- Modular CSS with React
- Стилизация React-компонентов
- Visual primitives for the component age
ES6
- React на ES6+
- React and ES6 - Part 1, Introduction into ES6 and React
- React and ES6 - Part 2, React Classes and ES7 Property Initializers
- React and ES6 - Part 3, Binding to methods of React class (ES7 included)
- React and ES6 - Part 4, React Mixins when using ES6 and React
- React and ES6 - Part 5, React and ES6 Workflow with JSPM
- React and ES6 - Part 6, React and ES6 Workflow with Webpack
Functional way
- Компоненты высшего порядка в React (RUVDS)
- Write Reacts components in a functional way with Ramda and PointFree
- Компоненты высшего порядка в React
UI
Frameworks
- Material-UI. A Set of React Components that Implement Google’s Material Design.
- Office UI Fabric by Microsoft
- Atlassian’s official UI library
- PrimeReact
- Blueprint
- React Toolbox. Bootstrap your application with beautiful Material Design Components
- Belle. Configurable React Components with great UX
- Grommet. The most advanced open source UX framework for enterprise applications.
- Elemental UI. A UI Toolkit for React.js Websites and Apps
- React-Bootstrap. The most popular front-end framework, rebuilt for React.
- reactstrap - easy to use React Bootstrap 4 components
- react-md
- Semantic UI React
- Onsen UI for React
- React UWP
- gestalt
- React + Foundation
- react-desktop
- Rebass
- awesome-react-components
- arui-feather: Alfa Bank UI lightweight library
Layout frameworks
- React Flexbox Grid. Set of React components that implement flexboxgrid.css
- Golden Layout, getting started ReactJS
Form frameworks
Components
- Rich Text Editor Framework for React
Awesome Draft.js
Draft.js — фреймворк для создания текстовых редакторов от Facebook - Griddle. Grid component for use with React
- Searchable database of React components
- React yearly calendar
- Примеры приложений на ReactJS
Tools
Animations
React & Web Components
- React. Using Web Components in React. Using React in your Web Components
- Complementarity of React and Web Components
React Router
- Leveling Up With React: React Router
- Погружение в React: роутер
- React Router tutorial
- React Router: a comprehensive introduction
State
Flux
- Flux в картинках
- Руководство по Flux в картинках
- Разбираемся с Flux, реактивной архитектурой от facebook
- Flux для глупых людей
- The Evolution of Flux Frameworks
- The Case for Flux
Redux
- Redux. Официальная документация
- Redux в картинках
- Курс React Redux
- Погружение в React: Redux
- Работа с Redux: введение
- Руководство по работе с Redux
- Redux: шаг за шагом
- Изоморфное Приложение с React и Redux
- Вникаем в механизмы Redux, делая своё хранилище (Store)
- Full-Stack Redux Tutorial
- Getting Started with Redux
- Leveling Up with React: Redux
- Redux DevTools
- Redux — управление состоянием React-приложений
- Управление состоянием в Redux
- Tutorial: Let’s Build a Redux Powered React Application
Redux state management middleware
redux-thunk
[![npm](https://img.shields.io/npm/v/redux-thunk.svg)](https://www.npmjs.com/package/redux-thunk)
[![npm](https://img.shields.io/npm/dm/redux-thunk.svg)](https://www.npmjs.com/package/redux-thunk) * [redux-thunk](https://www.npmjs.com/package/redux-thunk) * [Redux и Thunk вместе с React. Руководство для чайников.](https://tuhub.ru/posts/redux-i-thunk-vmeste-react-rukovodstvo-dlya-chajnikov)
redux-saga
[![npm](https://img.shields.io/npm/v/redux-saga.svg)](https://www.npmjs.com/package/redux-saga)
[![npm](https://img.shields.io/npm/dm/redux-saga.svg)](https://www.npmjs.com/package/redux-saga) * [redux-saga](https://redux-saga.js.org/), [перевод](https://nfpk.gitbooks.io/redux-saga-ru/) * [Разбираемся в redux-saga: От генераторов действий к сагам](https://habr.com/post/351168/) * [Редакс в реальной жизни](https://iamakulov.com/talks/redux-in-real-life/)
MobX
Relay
Авторизация/Аутентификация
Изоморфные приложения
- Изоморфные приложения. Взгляд в будущее с React
- Построение надежных веб-приложений на React: Часть 4, серверная генерация
- Изоморфное Приложение с React и Redux
- Full-Stack Redux Tutorial
- React.js: собираем с нуля изоморфное приложение:
— Часть 1: собираем стек
Cheatsheets
Курсы
Инструменты
Webpack
Debuggers
- Developer tool for debugging render react components
- Анализ производительности React 16 приложений с помощью инструментов разработчика Chrome