Harry Tran harrytran998

Translated from https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/, author: Mark Erikson (from Redux team)

A (Mostly) Complete Guide to React Rendering Behavior

Bài viết cung cấp chi tiết về cách mà React render hoạt động, và việc sử dụng Context và Redux ảnh hưởng thế nào tới quá trình render của React.

"Render" là gì

Rendering is the process of React asking your components to describe what they want their section of the UI to look like, now, based on the current combination of props and state.

Type-Safe React Context

By using ReturnType we don't have to manually write type for Context

See also gist for SolidJS https://gist.github.com/JLarky/a46055f673a2cb021db1a34449e3be07

And original tweet https://twitter.com/JLarky/status/1554152932425117697

Re: selfies project written in CRA and PWA

Planning of a project
- The project planning is mostly based on Fullstack Project Planning.
  
  For most of my projects, especially recently, I've been following a planning process that helps me breakdown the project into component parts that help me build more efficiently.
React Project Structure
- The project structure is mostly based on React Project Structure Best Practices for Scalable Application.
  
  A react project structure or architecture plays an important role in project maintenance. A good folder structure will help developers in the team easy to locate and easy to relate (ELER).

	/*
	Made by Elly Loel - https://ellyloel.com/
	With inspiration from:
	- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
	- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
	- Adam Argyle - https://unpkg.com/[email protected]/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

	Notes:
	- `:where()` is used to lower specificity for easy overriding.
	*/

	/* Ultra lightweight Github REST Client */
	// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
	const token = 'github-token-here'
	const githubClient = generateAPI('https://api.github.com', {
	headers: {
	'User-Agent': 'xyz',
	'Authorization': `bearer ${token}`
	}
	})

	import * as THREE from 'three'
	import { Suspense, useRef, useState } from 'react'
	import { Canvas, createPortal, applyProps, useFrame, useThree } from '@react-three/fiber'
	import { useFBO, PerspectiveCamera, ScrollControls, Scroll, useScroll, Image } from '@react-three/drei'

	function Images() {
	const { width, height } = useThree(state => state.viewport)
	const data = useScroll()
	const group = useRef()
	useFrame(() => {

	type CamelCase<S extends string> = S extends `${infer P1}_${infer P2}${infer P3}`
	? `${Lowercase<P1>}${Uppercase<P2>}${CamelCase<P3>}`
	: Lowercase<S>

	type KeysToCamelCase<T> = {
	[K in keyof T as CamelCase<string & K>]: T[K]
	}


	type CamelToSnakeCase<S extends string> = S extends `${infer T}${infer U}` ?

	const plugin = require("tailwindcss/plugin");

	module.exports = {
	mode: "jit",
	purge: {
	content: ["./src/*/.{js,ts,jsx,tsx,mdx,vue}"],
	},
	theme: { extend: {} },
	variants: {},
	plugins: [

	export function useEagerComputed() {
	const properties = []

	function eagerComputed(definitions) {
	const computedProps = {}
	for (const key in definitions) {
	const effect = definitions[key]
	properties.push({ key, effect })
	computedProps[key] = function () {
	return this.$data[key]

	import {
	ActionContext,
	ActionTree,
	GetterTree,
	MutationTree,
	Module,
	Store as VuexStore,
	CommitOptions,
	DispatchOptions,
	} from 'vuex'