Skip to content
This repository has been archived by the owner on Jul 13, 2021. It is now read-only.

Latest commit

 

History

History
242 lines (192 loc) · 8.48 KB

react-course.md

File metadata and controls

242 lines (192 loc) · 8.48 KB
Raw

React

Before the course:

  • You should have basic knowledge of JavaScript and HTML
  • Be able to work with Git
  • Join Discord chats https://discord.gg/Uazp6s, category REACT.

The course Trainers:

  • Yuliya Haluza
  • Artёm Sinicyn
  • Alexey Farbotko
  • Ander Rios
  • Andre Gloukhmantchouk

Communication

For any questions use Discord.

Learning Plan

React. 1 Lecture. Webpack

  • Overview
  • Webpack Config
  • Plugins
  • Loaders
  • Webpack Dev Server
  • react app creation from scratch
  • webpack configuration

Materials:

Task 1. Song Bird

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/songbird.md

Form for questions: https://docs.google.com/spreadsheets/d/1CKx6BcS7DgFHPhdaB3IUoaNLUcGDlqHqus3wms5b1V4/edit#gid=0

React. 2 Lecture. Components (Main)

Before the lecture

Hello, world
Introducing JSX
Rendering Elements
Components and Props
State and Lifecycle
Handling Events
Conditional Rendering
Lists and Keys

Form for questions: https://docs.google.com/document/d/1u86RSOAVfrSmiziIB3gXwI9yOw0Xty8QIvNG0GPB7FI/edit?usp=sharing

1 part

  • What is react?
  • Virtual DOM as approach to build fast UI components, Why V-DOM instead of direct DOM manipualtion
  • JSX introduction
  • the comoponent approach
  • stateless, statefull components
  • lifecycle hooks (React 16) and how they could be useful
  • how to pass data to child components
  • state. how to use it, how to change it (how react batches updates, async setState)
  • how to handle DOM events
  • how to create list, key prop
  • conditional rendering

2 part (practice)

  • hello world stateless component (basic syntax, jsx)
  • statefull counter component (event handling, this binding problem)
  • users list component (key prop explained)
  • TBA

Materials:

React. 3 Lecture. Components(Advanced)

Before the lecture

Reconciliation
Typechecking With PropTypes
Refs and the DOM
Context
Higher-Order Components
Portals
Render Props

Form for questions: https://docs.google.com/document/d/1UEm5-YvbDbyk75gvfeFjXS_PhP5cFQNzvztL99RR1_A/edit?usp=sharing

1 part

  • Quick revison of Lecture #1
  • Reconciliation algorithm
  • propTypes and why it is important
  • refs, uncontrolled components
  • new context API
  • advanced JSX (hoc, render prop, portal)
  • lazy, suspense, memo
  • performance optimisations

2 part (practice)

  • todo app development
  • add todo, remove todo
  • mark todo as completed
  • edit todo
  • filter todos
  • todos statistics (completed counter, uncompleted counter)
  • TBA

Materials:

React. 4 Lecture. Hooks

Before the lecture

Introducing Hooks
Hooks at a Glance
Using the State Hook
Using the Effect Hook
Rules of Hooks
Building Your Own Hooks

Form for questions: https://docs.google.com/document/d/1Uz08VF7V33UHGB7-o4AMI-CMzyI1B-IspWwP1msRfco/edit?usp=sharing

  • The useState Hook
  • useState vs. setState
  • Complex State with useState
  • The useEffect Hook
  • useEffect Dependencies
  • Cleaning up Effects
  • The Context API & useContext Hook
  • TBA

Task 2. Data Grid

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/datagrid.md

Form for questions: https://docs.google.com/document/d/1KRc6ahRG6UW8CpvJm8OTySNqS9shP2sxSyuVTOD-pJw/edit?usp=sharing

React. 5 Lecture. Routing

Before the lecture

The philosophy of React Router

Form for questions: https://docs.google.com/document/d/1EYVxVrQMSYe7djvljAvcYtxtNvmFF6zL9_Psl85CeEc/edit?usp=sharing

1 part

  • what is SPA
  • React-router
  • hash routing
  • browser routing
  • problems of SPAs
  • TBA

2 part (practice)

  • react-router usage

Materials:

React. 6 Lecture. Flux+Redux

Before the lecture

Redux motivation
Redux core concepts
Three Principles
Ecosystem

Form for questions: https://docs.google.com/document/d/1IZpVZTCegi7rmVXcZpp-rE_Z_UZbWjgrT06qszGFBaU/edit?usp=sharing

1 part

  • the problem with app state managment in react
  • the problem with passing props from root component to leaf components
  • what is flux architecture
  • what is redux
  • immutability
  • pure functions
  • main redux principles (read-only state, reducer, actions)
  • middlewares
  • redux hooks

2 part (practice)

  • redux implementation
  • redux usage

Materials:

React. 7 Lecture. Grapgql

TBA

React. 8 Lecture. SSR

Form for questions: https://docs.google.com/document/d/12i8sSn5K8qbDjYmOUYWY1kaii_60C4dm6gZ2Bt5RXho/edit?usp=sharing

1 part

  • serverside rendering as a way to solve the main problems of SPAs
  • why serverside rendering isn't silver bullet
  • TBA

2 part (practice)

  • ssr implementation (live)

Materials:

React. 9 Lecture. Testing

Form for questions: https://docs.google.com/document/d/1yl5g74K3Ohd407PRpG34LoQWGRXl_DSQzbzKmAzHewE/edit?usp=sharing

  • Testing react apps
  • jest
  • enzyme
  • TBA

Materials: