{"id":19580710,"url":"https://github.com/shopot/react-101","last_synced_at":"2025-07-15T01:13:14.384Z","repository":{"id":192359832,"uuid":"686577558","full_name":"shopot/react-101","owner":"shopot","description":"Introduction to React.js for RS School students and beyond","archived":false,"fork":false,"pushed_at":"2024-12-12T08:54:42.000Z","size":8086,"stargazers_count":61,"open_issues_count":1,"forks_count":23,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T18:18:26.130Z","etag":null,"topics":["mobx","react","redux","rsschool","typescript","vite","vitest","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shopot.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-03T09:03:10.000Z","updated_at":"2024-12-12T08:54:46.000Z","dependencies_parsed_at":"2023-09-26T15:58:02.439Z","dependency_job_id":"5508c3ae-d45b-478e-b79a-ae42a88484c0","html_url":"https://github.com/shopot/react-101","commit_stats":null,"previous_names":["shopot/react-101"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shopot%2Freact-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shopot%2Freact-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shopot%2Freact-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shopot%2Freact-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shopot","download_url":"https://codeload.github.com/shopot/react-101/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085326,"owners_count":21045139,"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":["mobx","react","redux","rsschool","typescript","vite","vitest","zustand"],"created_at":"2024-11-11T07:29:06.232Z","updated_at":"2025-04-09T18:18:31.274Z","avatar_url":"https://github.com/shopot.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📚 React.js introducing\n\nУчебное пособие в виде конспекта для студентов курса [RS School React Course](https://rs.school/react).\n\nРазделы располагаются в порядке возрастания сложности, все примеры в разделах README.md написаны на JavaScript, там где\nесть уточнения с использованием TypeScript это указано.\n\nПримеры кода в разделах написаны\nна [TypeScript](https://www.typescriptlang.org/) + [Tailwind CSS](https://tailwindcss.com/).\n\n* [Знакомство с JSX](https://github.com/shopot/react-101/tree/jsx)\n* [Отрисовка элементов](https://github.com/shopot/react-101/tree/react-render)\n* [Компоненты - одна из основных концепций React](https://github.com/shopot/react-101/tree/components)\n* [Условный рендеринг](https://github.com/shopot/react-101/tree/conditional-rendering)\n* [Обработка событий](https://github.com/shopot/react-101/tree/event-handling)\n* [Списки и ключи - React Key Concepts](https://github.com/shopot/react-101/tree/rendering-lists)\n* [Состояние: память компонента, знакомство с useState](https://github.com/shopot/react-101/tree/hook-use-state)\n* [Применение стилей CSS - краткий обзор](https://github.com/shopot/react-101/tree/react-styling)\n* [React DOM компоненты - компоненты форм](https://github.com/shopot/react-101/tree/form-components)\n* [Совместное использование состояния между компонентами](https://github.com/shopot/react-101/tree/sharing-state)\n* [Знакомство с хуком useEffect](https://github.com/shopot/react-101/tree/hook-use-effect)\n* [Руководство React Quiz App - Мыслим как React](https://github.com/shopot/react-101/tree/react-quiz-app)\n* [Получение данных - Fetching data](https://github.com/shopot/react-101/tree/fetching-data)\n* [Маршрутизация в SPA - React Routing](https://github.com/shopot/react-101/tree/react-routing)\n* [Знакомство с хуком useReducer](https://github.com/shopot/react-101/tree/hook-use-reducer)\n* [Знакомство с хуком useRef](https://github.com/shopot/react-101/tree/hook-use-ref)\n* [Знакомство с хуком useContext](https://github.com/shopot/react-101/tree/hook-use-context)\n* [Работа с формами - обзор библиотеки React Hook Form](https://github.com/shopot/react-101/tree/react-hook-form)\n* [Знакомство с React API: createPortal](https://github.com/shopot/react-101/tree/react-create-portal)\n* [Путеводитель по Flux в картинках](https://github.com/shopot/react-101/tree/react-flux)\n* [Знакомство с Redux](https://github.com/shopot/react-101/tree/redux-base)\n* [Знакомство с Redux Toolkit (RTK)](https://github.com/shopot/react-101/tree/redux-toolkit-quick)\n* [Знакомство с RTK Query](https://github.com/shopot/react-101/tree/rtk-query)\n* [Новые возможности в Redux Toolkit 2.0](https://github.com/shopot/react-101/tree/redux-tollkit-2)\n* [Знакомство MobX](https://github.com/shopot/react-101/tree/mobx)\n* [Знакомство с Zustand](https://github.com/shopot/react-101/blob/zustand/README.md)\n\n\u003cdetails\u003e\n  \u003csummary\u003eПримеры приложений (деплой):\u003c/summary\u003e\n\n- 🔗 [Приложение Todo App](https://todo-app-ab1e50.netlify.app)\n    - [form-components](https://github.com/shopot/react-101/tree/form-components)\n    - [hook-use-reducer](https://github.com/shopot/react-101/tree/hook-use-reducer)\n    - [hook-use-context](https://github.com/shopot/react-101/tree/hook-use-context)\n- 🔗 [Приложение React Roadmap (Accordion)](https://react-roadmap-ab1e50.netlify.app)\n    - [sharing-state](https://github.com/shopot/react-101/tree/chapter-10)\n- 🔗 [Приложение с примерами useEffect](https://react-use-effect-ab1e50.netlify.app)\n    - [hook-use-effect](https://github.com/shopot/react-101/tree/hook-use-effect)\n- 🔗 [Приложение React Quiz App](https://quiz-app-ab1e50.netlify.app)\n    - [react-quiz-app](https://github.com/shopot/react-101/tree/react-quiz-app)\n- 🔗 [Приложение Fetching Data](https://fetch-data-ab1e50.netlify.app)\n    - [fetching-data](https://github.com/shopot/react-101/tree/fetching-data)\n- 🔗 [Приложение с React Router](https://react-router-ab1e50.netlify.app)\n    - [react-routing](https://github.com/shopot/react-101/tree/react-routing)\n- 🔗 [Приложение с примерами useRef](https://react-useref-ab1e50.netlify.app)\n    - [hook-use-ref](https://github.com/shopot/react-101/tree/hook-use-ref)\n- 🔗 [Приложение с примерами React Hook Form](https://react-hook-form-ab1e50.netlify.app)\n    - [react-hook-form](https://github.com/shopot/react-101/tree/react-hook-form)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eInformation\u003c/summary\u003e\n\nДля работы с примерами кода клонируйте репозиторий\n\n```shell\ngit clone https://github.com/shopot/react-101.git\ncd react-101\n```\n\nВыберите раздел на который вы хотите перейти (например redux-base)\n\n```shell\ngit checkout redux-base\n```\n\nУстановите зависимости\n\n```shell\nnpm install\n```\n\nЗапустите dev-сервер\n\n```shell\nnpm run dev\n```\n\n\u003c/details\u003e\n\n## 📚 React Testing\n\n* [Основы тестирования](https://github.com/shopot/react-101/tree/react-testing-01)\n* [Vitest: Установка и базовая настройка](https://github.com/shopot/react-101/tree/react-testing-02)\n* [Обзор React Testing Library](https://github.com/shopot/react-101/tree/react-testing-03)\n* [Обзор Mock Service Worker (MSW)](https://github.com/shopot/react-101/tree/react-testing-msw)\n\n## 📚 React и TypeScript\n\n* [Конспект по TypeScript](https://github.com/shopot/react-101/blob/ts-notes/README.md)\n* [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example)\n\n## 📚 Архитектура и паттерны\n\n\u003e Coming soon...\n\n## 📓️ Полезности\n\n- 🔗 [Соглашение о коммитах (conventionalcommits.org)](https://www.conventionalcommits.org/ru/v1.0.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshopot%2Freact-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshopot%2Freact-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshopot%2Freact-101/lists"}