https://github.com/shopot/react-101

Introduction to React.js for RS School students and beyond
https://github.com/shopot/react-101

mobx react redux rsschool typescript vite vitest zustand

Last synced: about 16 hours ago
JSON representation

Introduction to React.js for RS School students and beyond

• Host: GitHub
• URL: https://github.com/shopot/react-101
• Owner: shopot
• License: mit
• Created: 2023-09-03T09:03:10.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-12T08:54:42.000Z (14 days ago)
• Last Synced: 2024-12-12T09:20:56.993Z (14 days ago)
• Topics: mobx, react, redux, rsschool, typescript, vite, vitest, zustand
• Language: TypeScript
• Homepage:
• Size: 7.71 MB
• Stars: 61
• Watchers: 1
• Forks: 23
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 📚 React.js introducing

Учебное пособие в виде конспекта для студентов курса [RS School React Course](https://rs.school/react).

Разделы располагаются в порядке возрастания сложности, все примеры в разделах README.md написаны на JavaScript, там где

есть уточнения с использованием TypeScript это указано.

Примеры кода в разделах написаны

на [TypeScript](https://www.typescriptlang.org/) + [Tailwind CSS](https://tailwindcss.com/).

* [Знакомство с JSX](https://github.com/shopot/react-101/tree/jsx)

* [Отрисовка элементов](https://github.com/shopot/react-101/tree/react-render)

* [Компоненты - одна из основных концепций React](https://github.com/shopot/react-101/tree/components)

* [Условный рендеринг](https://github.com/shopot/react-101/tree/conditional-rendering)

* [Обработка событий](https://github.com/shopot/react-101/tree/event-handling)

* [Списки и ключи - React Key Concepts](https://github.com/shopot/react-101/tree/rendering-lists)

* [Состояние: память компонента, знакомство с useState](https://github.com/shopot/react-101/tree/hook-use-state)

* [Применение стилей CSS - краткий обзор](https://github.com/shopot/react-101/tree/react-styling)

* [React DOM компоненты - компоненты форм](https://github.com/shopot/react-101/tree/form-components)

* [Совместное использование состояния между компонентами](https://github.com/shopot/react-101/tree/sharing-state)

* [Знакомство с хуком useEffect](https://github.com/shopot/react-101/tree/hook-use-effect)

* [Руководство React Quiz App - Мыслим как React](https://github.com/shopot/react-101/tree/react-quiz-app)

* [Получение данных - Fetching data](https://github.com/shopot/react-101/tree/fetching-data)

* [Маршрутизация в SPA - React Routing](https://github.com/shopot/react-101/tree/react-routing)

* [Знакомство с хуком useReducer](https://github.com/shopot/react-101/tree/hook-use-reducer)

* [Знакомство с хуком useRef](https://github.com/shopot/react-101/tree/hook-use-ref)

* [Знакомство с хуком useContext](https://github.com/shopot/react-101/tree/hook-use-context)

* [Работа с формами - обзор библиотеки React Hook Form](https://github.com/shopot/react-101/tree/react-hook-form)

* [Знакомство с React API: createPortal](https://github.com/shopot/react-101/tree/react-create-portal)

* [Путеводитель по Flux в картинках](https://github.com/shopot/react-101/tree/react-flux)

* [Знакомство с Redux](https://github.com/shopot/react-101/tree/redux-base)

* [Знакомство с Redux Toolkit (RTK)](https://github.com/shopot/react-101/tree/redux-toolkit-quick)

* [Знакомство с RTK Query](https://github.com/shopot/react-101/tree/rtk-query)

* [Новые возможности в Redux Toolkit 2.0](https://github.com/shopot/react-101/tree/redux-tollkit-2)

* [Знакомство MobX](https://github.com/shopot/react-101/tree/mobx)

* [Знакомство с Zustand](https://github.com/shopot/react-101/blob/zustand/README.md)

  Примеры приложений (деплой):

- 🔗 [Приложение Todo App](https://todo-app-ab1e50.netlify.app)

    - [form-components](https://github.com/shopot/react-101/tree/form-components)

    - [hook-use-reducer](https://github.com/shopot/react-101/tree/hook-use-reducer)

    - [hook-use-context](https://github.com/shopot/react-101/tree/hook-use-context)

- 🔗 [Приложение React Roadmap (Accordion)](https://react-roadmap-ab1e50.netlify.app)

    - [sharing-state](https://github.com/shopot/react-101/tree/chapter-10)

- 🔗 [Приложение с примерами useEffect](https://react-use-effect-ab1e50.netlify.app)

    - [hook-use-effect](https://github.com/shopot/react-101/tree/hook-use-effect)

- 🔗 [Приложение React Quiz App](https://quiz-app-ab1e50.netlify.app)

    - [react-quiz-app](https://github.com/shopot/react-101/tree/react-quiz-app)

- 🔗 [Приложение Fetching Data](https://fetch-data-ab1e50.netlify.app)

    - [fetching-data](https://github.com/shopot/react-101/tree/fetching-data)

- 🔗 [Приложение с React Router](https://react-router-ab1e50.netlify.app)

    - [react-routing](https://github.com/shopot/react-101/tree/react-routing)

- 🔗 [Приложение с примерами useRef](https://react-useref-ab1e50.netlify.app)

    - [hook-use-ref](https://github.com/shopot/react-101/tree/hook-use-ref)

- 🔗 [Приложение с примерами React Hook Form](https://react-hook-form-ab1e50.netlify.app)

    - [react-hook-form](https://github.com/shopot/react-101/tree/react-hook-form)

  Information

Для работы с примерами кода клонируйте репозиторий

```shell

git clone https://github.com/shopot/react-101.git

cd react-101

```

Выберите раздел на который вы хотите перейти (например redux-base)

```shell

git checkout redux-base

```

Установите зависимости

```shell

npm install

```

Запустите dev-сервер

```shell

npm run dev

```

## 📚 React Testing

* [Основы тестирования](https://github.com/shopot/react-101/tree/react-testing-01)

* [Vitest: Установка и базовая настройка](https://github.com/shopot/react-101/tree/react-testing-02)

* [Обзор React Testing Library](https://github.com/shopot/react-101/tree/react-testing-03)

* [Обзор Mock Service Worker (MSW)](https://github.com/shopot/react-101/tree/react-testing-msw)

## 📚 React и TypeScript

* [Конспект по TypeScript](https://github.com/shopot/react-101/blob/ts-notes/README.md)

* [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example)

## 📚 Архитектура и паттерны

> Coming soon...

## 📓️ Полезности

- 🔗 [Соглашение о коммитах (conventionalcommits.org)](https://www.conventionalcommits.org/ru/v1.0.0/)