Oleksandr Tkalenko steamhammer

Idiomatic Data Fetching using React Hooks

This post has been written in collaboration with @klervicn

Virtually all web apps and websites need to pull data from a server, usually through a JSON-returning API. When it comes to integrating data fetching in React component, the "impedence mismatch" between the React components, which are declarative and synchronous, and the HTTP requests, which are imperative and asynchronous, is often problematic.

Many apps use third-party libraries such as Redux or Apollo Client to abstract it away. This requires extra dependencies, and couple your app with a specific library to perform data fetching. In most cases, what we want is a direct way to integrate plain HTTP requests (e.g. using native fetch) for usage in React components.

Here we will discuss how we can use React Hooks to do this in an elegant, scalable manner.

Про токены, JSON Web Tokens (JWT), аутентификацию и авторизацию. Token-Based Authentication

Last major update: 25.08.2020

Что такое авторизация/аутентификация
Где хранить токены
Как ставить куки ?
Процесс логина
Процесс рефреш токенов
Кража токенов/Механизм контроля токенов

Promises, under the hood

Everyone knows that to create a new Promise, you need to define it this way:

  new Promise((resolve, reject) => {
    ...
    resolve(someValue)
  })

You pass a callback that defines the specific behavior of your promise.

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

Clarify and agree on the scope of the system

User cases (description of sequences of events that, taken together, lead to a system doing something useful)
- Who is going to use it?
- How are they going to use it?

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	Lesson 1 - Iterations
	- BinaryGap - https://codility.com/demo/results/trainingU2FQPQ-7Y4/

	Lesson 2 - Arrays
	- OddOccurrencesInArray - https://codility.com/demo/results/trainingFN5RVT-XQ4/
	- CyclicRotation - https://codility.com/demo/results/trainingSH2W5R-RP5/

	Lesson 3 - Time Complexity
	- FrogJmp - https://codility.com/demo/results/training6KKWUD-BXJ/
	- PermMissingElem - https://codility.com/demo/results/training58W4YJ-VHA/

	{
	"env": {
	"browser": true,
	"node": true,
	"es6": true
	},

	"plugins": ["react"],

	"ecmaFeatures": {