{"id":14981842,"url":"https://github.com/rtivital/react-things","last_synced_at":"2025-04-04T06:10:01.155Z","repository":{"id":40533423,"uuid":"83982646","full_name":"rtivital/react-things","owner":"rtivital","description":"Коллекция материалов для изучения React","archived":false,"fork":false,"pushed_at":"2020-09-01T13:06:06.000Z","size":64,"stargazers_count":814,"open_issues_count":3,"forks_count":153,"subscribers_count":67,"default_branch":"master","last_synced_at":"2025-03-28T05:13:26.736Z","etag":null,"topics":["babel","react","redux","testing","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rtivital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-05T15:57:27.000Z","updated_at":"2025-03-15T20:58:39.000Z","dependencies_parsed_at":"2022-07-25T13:02:02.462Z","dependency_job_id":null,"html_url":"https://github.com/rtivital/react-things","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtivital%2Freact-things","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtivital%2Freact-things/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtivital%2Freact-things/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtivital%2Freact-things/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rtivital","download_url":"https://codeload.github.com/rtivital/react-things/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128753,"owners_count":20888235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","react","redux","testing","webpack"],"created_at":"2024-09-24T14:04:22.032Z","updated_at":"2025-04-04T06:10:01.133Z","avatar_url":"https://github.com/rtivital.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Things\nКоллекция материалов для изучения ES2015, React, Redux, Webpack, Babel и всего остального.\n\nДумаешь, что подборка не полная? Присылай Pull Request с недостающими материалами!\n\n---\n\nСодержание:\n1. [ES2015: то, что действительно нужно](#es2015-то-что-действительно-нужно)\n2. [React: Основы основ](#react-Основы-основ)\n3. [Ныряем в React с головой](#Ныряем-в-react-с-головой)\n4. [Робкое знакомство с Redux](#Робкое-знакомство-с-redux)\n5. [Продвинутый Redux](#Продвинутый-redux)\n6. [Роутинг](#Роутинг)\n7. [Архитектура приложения](#Архитектура-приложения)\n8. [От и до: уроки по созданию полноценных приложений](#От-и-до-уроки-по-созданию-полноценных-приложений)\n9. [Тестирование](#Тестирование)\n10. [Инструменты](#Инструменты)\n11. [Разное](#Разное)\n\n---\n\n\n## ES2015: то, что действительно нужно\nПеред тем, как вы утоните с головой в пучине вод React самое полезное, что вы можете сделать – изучить некоторые возможности ES2015, которыми вы будете пользоваться постоянно.\n* [Блочные зоны видимости](http://jsraccoon.ru/es6-block-scoped-declarations) [**RU**] – `const`, `let` вместо `var`: в чём разница и где стоит быть осторожным.\n\n* [Стрелочные функции](http://jsraccoon.ru/es6-arrow-functions) [**RU**] – `f =\u003e f` вместо `function (f) { return f; }` и как не потерять контекст выполнения функции без использования метода `bind`.\n\n* [Расширение литерала объекта](http://jsraccoon.ru/es6-object-literal) [**RU**] – сокращённые записи свойств и методов в объектах.\n\n* [Деструктуризация объектов и массивов](http://jsraccoon.ru/es6-destructuring) [**RU**] – сокращённая запись обращения к свойствам.\n\n* [Модульная система](https://learn.javascript.ru/modules) [**RU**] – основы использования нативных модулей.\n\n* [Классы](https://learn.javascript.ru/es-class) [**RU**] – работа с прототипами и наследованием в новом стандарте.\n\n* [Интерполяция строк](http://jsraccoon.ru/es6-interpolation) [**RU**] или как забыть про `'hello, ' + userName + '!'`.\n\n* [Новые методы массивов](http://2ality.com/2014/05/es6-array-methods.html) [**EN**]: `Array.from`, `find`, `fill`, `includes` и многие другие.\n\n* Промисы:\n  * [Обещание бургерной вечеринки](https://medium.com/web-standards/%D0%BE%D0%B1%D0%B5%D1%89%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D1%83%D1%80%D0%B3%D0%B5%D1%80%D0%BD%D0%BE%D0%B9-%D0%B2%D0%B5%D1%87%D0%B5%D1%80%D0%B8%D0%BD%D0%BA%D0%B8-b0ed209809ab) [**RU**] – основы работы промисов на интересных примерах.\n\n  * [Сборник наиболее необходимых на практике приёмов использования промисов](https://habrahabr.ru/post/311804/) [**RU**]\n\n  * [Онлайн песочница](http://bevacqua.github.io/promisees/) [**EN**] для изучения промисов с визуализацией алгоритма их выполнения. Есть несколько отличных примеров для демонстрации принципов работы и возможность написать код своими руками.\n\n\n## React: Основы основ\n* [Статья из официальной документации Thinking in React](https://habrahabr.ru/post/319134/) [**RU**] про идеологию библиотеки, поможет понять, основные идеи лежащие в основе React.\n\n* [React курс для начинающих](https://www.gitbook.com/book/maxfarseer/react-course-ru/details) [**RU**] – текстовый курс по основам React на русском языке. Научит только самым базовым вещам: работе с компонентами, lifecycle хуками, формами и валидацией пропсов с помощью PropTypes.\n\n* [Все фундаментальные принципы React.js, собранные в одной статье](https://medium.com/@divermak/%D0%B2%D1%81%D0%B5-%D1%84%D1%83%D0%BD%D0%B4%D0%B0%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%BF%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF%D1%8B-react-js-%D1%81%D0%BE%D0%B1%D1%80%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5-%D0%B2-%D0%BE%D0%B4%D0%BD%D0%BE%D0%B9-%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B5-ec6a97bfd1bf) [**RU**].\n\n* [React.js for Stupid People](http://blog.andrewray.me/reactjs-for-stupid-people/) [**EN**] – спасёт вас, если вы до сих пор ничего не поняли. Всё максимально доступно для самых чайников. Есть перевод на русский язык – [React.js для глупых людей](https://habrahabr.ru/post/249107/) [**RU**].\n\n* [Абсолютный минимум](http://krasimirtsonev.com/blog/article/The-bare-minimum-to-work-with-React) [**EN**], того что надо знать, чтобы начать работать с React.\n\n* [Modern React with Redux](https://www.udemy.com/react-redux/) [**EN**] – курс по основам React. Подойдёт для всех, кто только начинает своё знакомство с экосистемой React. В ходе первой части курса вы построите приложение для поиска и просмотра видео на YouTube (только React, никаких изысков), во второй части начнёте своё путешествие в страну Redux и создадите приложение с использованием Redux и Google Maps API.\n\n* [React to the Future](http://elijahmanor.com/talks/react-to-the-future/dist/#/) [**EN**] – презентация про то, чем действительно является React и, почему появление библиотеки – это большой шаг вперёд.\n\n* [Объяснение принципов работы пропсов и состояний](https://medium.freecodecamp.com/react-props-state-explained-through-darth-vaders-hunt-for-the-rebels-8ee486576492) [**EN**] в React на примере Дарт Вейдера и повстанцев.\n\n* [Подборка интерактивных примеров](https://edgecoders.com/learning-react-js-is-easier-than-you-think-fbd6dc4d935a) [**EN**], которые помогут разобраться в базовых идеях, лежащих в основе библиотеки.\n\n\n## Ныряем в React с головой\n* [PureComponent в React](https://habrahabr.ru/company/redmadrobot/blog/318222/) [**RU**] – как и зачем применять, разбор отличий от Component.\n\n* [Основы производительности React-приложений](http://blog.csssr.ru/2016/12/07/react-perfomance) [**RU**] – как правильно работать с `shouldComponentUpdate`.\n\n* [Основы работы с содержимым head](https://habrahabr.ru/post/311964/) [**RU**] в React-приложениях (в том числе и изоморфных) с помощью библиотеки react-helmet.\n\n* [React Lifecycle Methods – how and when to use them](https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1) [**EN**] – всё про жизненный цикл компонентов в React: подробно о том, как работает каждый метод + разбор ситуаций, в которых может понадобиться каждый хук.\n\n* [Контекст в React](https://www.youtube.com/watch?v=lxq938kqIss) [**EN**] – экспериментальный функционал, на который опираются многие популярные библиотеки (react-redux, react-intl).\n\n* [Компоненты высшего порядка](https://www.youtube.com/watch?v=LTunyI2Oyzw) [**EN**] – руководство по работе с вашими собственными компонентами высшего порядка.\n\n* [Десять мини-паттернов в React](https://hackernoon.com/10-react-mini-patterns-c1da92f068c5) [**EN**]: разбор лучших практик при работе с компонентами.\n\n* Курс [Advanced React and Redux](https://www.udemy.com/react-redux-tutorial/) [**EN**] расскажет про основы тестирования React компонентов, работу с аутентификацией на стороне клиента и сервера и компоненты высшего порядка.\n\n* [Работа с AJAX запросами в React](https://daveceddia.com/ajax-requests-in-react/) [**EN**] — где и когда загружать данные.\n\n* [Работа с анимациями в React](https://www.youtube.com/watch?v=npvQX53YuCs) [**EN**] с помощью ReactCSSTransitionGroup. Если вы видели приложения на React с невероятно крутыми переходами между страницами, то посмотрите, как за пару минут можно прикрутить нечто подобное к себе в проект.\n\n\n## Робкое знакомство с Redux\n* Подробное объяснение [принципов разделения презентационных компонентов и компонентов контейнеров](http://www.kanby.ru/prezentaczionnyij-komponent-i-kontejner-v-react.html) [**RU**] при работе с React и Redux.\n\n* [Подборка 8 вещей](https://www.robinwieruch.de/learn-react-before-using-redux/), которые обязательно надо изучить в React, перед знакомством с Redux. [**EN**]\n\n* [Когда я пойму, что готов к Redux?](https://medium.com/@redlan/%D0%BA%D0%BE%D0%B3%D0%B4%D0%B0-%D1%8F-%D0%BF%D0%BE%D0%B9%D0%BC%D1%83-%D1%87%D1%82%D0%BE-%D0%B3%D0%BE%D1%82%D0%BE%D0%B2-%D0%BA-redux-f3198cc5044), перевод статьи разработчика о том, как понять, что наступило время освоить Redux.\n\n* Лучший способ ознакомиться с Redux — посмотреть [курс от самого создателя (Дэна Абрамова) на egghead.io](https://egghead.io/series/getting-started-with-redux) [**EN**] — 30 видео уроков, в которых покажут не только, как пользоваться библиотекой, но и объяснят принцип её работы (по сути, в ходе курса вы сами напишете свой мини-Redux) + в конце расскажут про связку с React с помощью компонентов из React-redux, объяснят, как создавать компоненты-контейнеры, единственная цель которых передавать данные в другие компоненты, а также, как использовать контексты при работе с React.\n\n* Сразу после курса бегите читать [официальную документацию](http://redux.js.org/) [**EN**]. Документация небольшая по объёму, но проясняет многие детали, которые не смог покрыть курс. Так же существует вольный перевод [документации на русском языке](https://www.gitbook.com/book/rajdee/redux-in-russian) [**RU**].\n\n* Статья [Лучшие практики при работе с Redux](https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e) [**EN**] расскажет, как не совершить типичных ошибок: где и как организовать бизнес логику приложения, как правильно работать с асинхронными операциями, как создать архитектуру проекта на Redux и многое другое.\n\n\n## Продвинутый Redux\n* [mergeStateToProps](https://habrahabr.ru/post/314582/) [**RU**] — возможности React Redux, о которых вы не знали (`mapDispatchToProps` на стероидах).\n\n* [Идиоматический Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) [**EN**] – второй курс от создателя Redux (Дэна Абрамова) про продвинутые техники использования библиотеки.\n\n* [Обзор экосистемы Redux](https://medium.com/@denisraslov/the-redux-ecosystem-539c630ec521) [**EN**] — объяснение принципов сосуществования с React, React Router + паттерны работы с асинхронностью и аутентификацией.\n\n* [Пишем свой middleware](https://medium.com/@jihdeh/creating-custom-middleware-in-react-redux-961570459ecb) [**EN**].\n\n* [Асинхронный Redux](https://medium.com/@jtbennett/asynchronous-actions-in-redux-8412cf92a26f) [**EN**] – разбор библиотек для работы с асинхронными операциями в Redux.\n\n\n## Роутинг\n* [React Router 4](https://habrahabr.ru/post/329996/) [**RU**] – простое объяснение отличий от предыдущих версий.\n\n* [React router + browserHistory](https://www.youtube.com/watch?v=cdUyEou0LHg) [**EN**] – как правильно использовать в продакшене.\n\n* [Всё о React Router 4](https://css-tricks.com/react-router-4/) [**EN**] – подробно о новых идеях заложенных в новой версии библиотеки и почему всё так кардинально изменилось.\n\n* Напиши свой React Router, или [как работает четвёртая версия React Router изнутри](https://tylermcginnis.com/build-your-own-react-router-v4/) [**EN**] – лучший способ понять принцип работы React Router.\n\n* [Изоморфные приложения на React с React Router 4 версии](https://ebaytech.berlin/universal-web-apps-with-react-router-4-15002bb30ccb) [**EN**] – как организовать server-side рендеринг приложения.\n\n* React Router не всегда идеальное решение для организации роутинга. Facebook, например, вообще не использует его в своих проектах. [Обзор альтернатив React Router](https://auth0.com/blog/react-router-alternatives/) [**EN**].\n\n* [Как написать свой роутер](https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997) [**EN**] – руководство по созданию собственного роутера, работающего с server-side рендерингом.\n\n* [Анимированные переходы между страницами + React Router 4](https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a) [**EN**] – введение в использование ReactTransitionGroup.\n\n\n## Архитектура приложения\n* [Как избежать излишней сложности состояния приложения](https://habrahabr.ru/post/316070/) [**RU**] – руководство по правильной организации Redux-стора в больших приложениях.\n\n* [Как правильно организовать архитектуру большого приложения на React и Redux](https://www.sitepoint.com/organize-large-react-application/) [**EN**].\n\n* [Пять советов по работе с Redux в больших приложениях](https://techblog.appnexus.com/five-tips-for-working-with-redux-in-large-applications-89452af4fdcb) [**EN**] – продвинутое использование селекторов, техники разделения состояния, переиспользование редюсеров.\n\n## От и до: уроки по созданию полноценных приложений\n* [Создаём клон Trello](https://habrahabr.ru/post/308056/) [**RU**]. Описывается разработка сайта c авторизацией и функционалом популярного. Помимо React используется Redux, PostgreSQL, Phoenix (фреймворк для Elixir, который в свою очередь работает на Erlang VM).\n\n* Собираем с нуля изоморфное приложение – пошаговое руководство по настройке сборки приложения на React с server-side рендерингом [**RU**]:\n  * [Часть 1](https://habrahabr.ru/post/309958/)\n  * [Часть 2](https://habrahabr.ru/post/310284/)\n  * [Часть 3](https://habrahabr.ru/post/310952/)\n\n* [Создаём клон Реддита](https://www.sitepoint.com/reddit-clone-react-firebase/) [**EN**] с помощью React и Firebase\n\n* [Создаём клон Твиттера](https://scotch.io/tutorials/build-a-twitter-like-search-feed-with-react-js-and-appbase-io) [**EN**] на React с использованием appbase в качестве бэкенда.\n\n* Создаём медиа-библиотеку с помощью React, Redux и Redux-saga [**EN**]:\n  * [Часть 1](https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-1)\n  * [Часть 2](https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-2)\n\n* [Создаём приложение для изучения React с использованием API Hacker News](https://leanpub.com/the-road-to-learn-react-russian) [**RU**]\n\n## Тестирование\n* [Тестирование компонентов в React](https://medium.freecodecamp.com/the-right-way-to-test-react-components-548a4736ab22) [**EN**]: как сделать это правильно и что нужно тестировать в первую очередь.\n\n* [Лучшие практики тестирования React компонентов](https://medium.com/selleo/testing-react-components-best-practices-2f77ac302d12) [**EN**].\n\n* [Видео курс от egghead.io](https://egghead.io/lessons/javascript-test-javascript-with-jest?pl=testing-javascript-with-jest-a36c4074) [**EN**] про тестирование React приложения с Jest.\n\n* [Руководство по использованию TDD подхода при разработке React приложений](https://www.spencerdixon.com/blog/test-driven-react-tutorial.html) [**EN**]\n\n\n## Инструменты\n* [Webpack + React](https://habrahabr.ru/post/308926/) [**RU**] – как уменьшить бандл в 15 раз: подборка плагинов для экстремального сжатия.\n\n* [Webpack 4 для начинающих](https://www.sitepoint.com/beginners-guide-webpack-module-bundling/) [**EN**] – подробное введение в использование четвертой версии сборщика.\n\n* [Видео курс](https://www.youtube.com/playlist?list=PLkEZWD8wbltnRp6nRR8kv97RbpcUdNawY) [**EN**] по второй версии Webpack. Расскажут, как написать базовый конфиг, работать с лоадерами и плагинами, автоматически генерировать HTML, работать с React и Babel, стилями и другими файлами + подробно про настройку Webpack dev server для удобной горячей перезагрузки.\n\n* [Собираем React приложение с помощью Webpack 2 и Babel](https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel) [**EN**] – руководство по настройке самых необходимых инструментов.\n\n* [Code Splitting](http://mxstbr.blog/2016/01/react-apps-with-pages/) [**EN**] в React приложении – разделение большого бандла на меньшие части для более быстрой загрузки приложения.\n\n* [Горячая перезагрузка всего!](https://hackernoon.com/hot-reload-all-the-things-ec0fed8ab0) [**EN**] Как использовать Hot Module Replacement в Webpack для перезагрузки фронтенда и бэкенда в изоморфном приложении.\n\n* [Руководство по настройке редактора кода Atom](https://medium.com/productivity-freak/my-atom-editor-setup-for-js-react-9726cd69ad20) [**EN**] для наиболее продуктивной работы с React приложениями.\n\n\n## Разное\n* [Подборка 15 вопросов с собеседования](http://www.kanby.ru/voprosyi-pro-react-na-sobesedovanii.html) [**RU**] для React-разработчика.\n\n* [Подборка интересных open source проектов](https://www.reddit.com/r/reactjs/comments/496db2/large_open_source_reactredux_projects/) [**EN**] сделанных на React. На их примере можно посмотреть, как правильно организовать код в своих проектах и подглядеть пару интересных инструментов для сборки.\n\n* [Awesome React Talks](https://github.com/tiaanduplessis/awesome-react-talks) [**EN**] – подборка лучший докладов с конференций, посвященных React, всё разделено по годам.\n\n* [React за 30 минут](https://www.youtube.com/watch?v=_MAD4Oly9yg) [**EN**] – создайте свой клон библиотеки и посмотрите, как всё устроено изнутри.\n\n* [Основы работы с recompose](https://www.youtube.com/watch?v=SQtrgiLy3Fo) [**EN**] – библиотекой для расширения возможностей функциональных компонентов и их оптимизации.\n\n* [Шпаргалка по принципам работы с экосистемой React + Redux](https://github.com/uanders/react-redux-cheatsheet) [**EN**] в виде диаграммы.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtivital%2Freact-things","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frtivital%2Freact-things","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtivital%2Freact-things/lists"}