React.js

2022/06/11 (增加連結)

簡介

React 是一個專注於 UI（View）的 JavaScript 函式庫（Library），利用純JavaScript在前端產生HTML(而不是由後端產生)。但是，React並沒有提供css及對應的js，所以，還是需要採用如Material-UI、Bootstrap或Semantic-UI的UI架構。

程式範例請詳見:

• Web programming (react + spring / rest)

基礎教學

• React Learning Roadmap For 2021

  • Getting Started

    • JavaScript To Know For React

  • Core Components

    • JSX

    • MDX

    • Components & Props

    • State & Lifecycle

    • Reconciliation & Virtual DOM

      • React: Behind the scenes : Working with Virtual DOM, Reconciliation, Diffing Algorithms

    • Handling Events

    • Refs

    • Fragments

  • Styling

    • CSS In React

    • CSS-In-JS

    • Animation

  • State Management

    • Redux

    • MobX

    • Unstated

    • RxJS

      • How to Write a Redux Like State Management Store Using RxJS

  • Data Management

    • REST APIs (in react & REST )

    • GraphQL

  • Backend Development

    • Node.js

  • Content Management System

  • Formik

  • Server-Side Rendering

    • Next.js (in Node.js)

    • Razzle

      • Not only it works with React, but also with Reason, Elm, Vue, Angular and will work whatever comes next.

  • Routing

    • React-Router

  • Testing

    • Jest & Enzyme (in test )

  • Deployment

• Top 7 Libraries for Blazingly Fast ReactJS Applications

  • React Query

  • React Hook Form

• A 2021 Roadmap to Learning React

  • Basics

    • create-react-app

    • React basics: components, props, lifecycle methods, and states

    • React Hooks

    • React Router

    • React Query

  • More Advanced

    • Redux and Redux Thunk

    • Testing

    • Advanced React concepts

• How To Learn React in 2021: The 7 Skills You Need To Know

  • Step 1: Become confident with the core fundamentals of HTML, CSS, and JavaScript

  • Step 2: Learn React fundamentals and React hooks

  • Step 3: Learn to fetch data from both REST and GraphQL APIs

  • Step 4: Learn to style your React apps with a component library or utility class library

  • Step 5: Manage state in React with React context

  • Step 6: Learn a React router. In particular, react-router-dom

  • Step 7: Learn patterns for authentication in React

• Understanding Common Terms Associated to React JS

• React Technical Interview Questions

• React for Real (不錯的電子書，不過有些內容需要更新，例如，還沒更新為functional component也沒使用hook)

• 猴子也能看懂的 React 教學

  • 猴子也能看懂的 React 教學 - 1 - React 概念

    • React 概述

      • React 特色 – 為什麼我要用它？

        • 用純 JS 在前端產生 HTML （一般來說是在後端產生 HTML 送到前端）

        • 使用 Virtual DOM，重繪時效率高

          • The Virtual DOM

          • React Virtual DOM Postmortem

          • Is Virtual DOM Derived From Document Fragments? : An interview guide for DOM, document fragments, virtual DOM, React fragments, incremental DOM, and shadow DOM

          • Why is the Virtual DOM So Fast?

        • 自定義 Component，方便開發

        • 父子 Component 可透過 props 通訊

        • 只負責 MVC 的 View 部份，所以不算框架，彈性高

        • 因為完全是 JS 操作 UI 的關係，使得它可以跟後端分離，達到即時互動、自動更新的效果

        • 只是一個 JS 函式庫，所以容量小易移植

    • JSX

    • props & states

    • Component Lifecycle - 元件的生命周期

  • 猴子也能看懂的 React 教學 - 2 - 開始打 code 啦~

    • ES5 vs ES6

    • Component

  • 猴子也能看懂的 React 教學 - 3 - Webpack 建置指南

  • 猴子也能看懂的 React 教學 - 4 - 從 React 走向框架，把後端移到前端

    • React router

    • ** 在 react router 4裡面，沒有IndexRoute了

const App = () => (

<div>

<Route exact path="/" component={Home}/>

</div>

)

• • • Redux

• 從零開始學 ReactJS（ReactJS 101）

  • Ch01 前端工程簡介和 React 生態系簡介

  • Ch02 React 開發環境設置與 Webpack 入門

  • Ch03 React/JSX/Component 簡介

  • Ch04 Props/State 基礎與 Component 生命週期

    • Props、State、Refs 與表單處理

    • React Component 規格與生命週期（Life Cycle）

  • Ch05 React Router

  • Ch06 ImmutableJS

  • Ch07 Flux/Redux

  • Ch08 Container 與 Presentational Components

• 30天React從入門到入坑 (2018 iT 邦幫忙鐵人賽)

• 激戰 ReactJS 30天 (2018 iT 邦幫忙鐵人賽)

• 一步一腳印的React旅程 系列 (2019 iT 邦幫忙鐵人賽)

• Tutorial: Intro to React (官方教學)

• Getting Started (官方文件)

• react from facebook (官方github)

  • Create a New React App (官方文件)

• React: A basic introduction

  • with create-react-app

  • Updating with user input

  • Styling our app

• React for Beginners

  • React for Beginners - Part 1: Introduction

    • with create-react-app

  • React for Beginners - Part 2: JSX

• A Beginner’s Guide to React

  • Components

  • JSX

  • State

  • Props

• React from Scratch

• Learn Basics of React.js in 11 Minutes

  • What is Virtual DOM?

  • What is JSX?

  • What is a Component?

  • What is Props?

  • What is a State?

  • What are Styles?

  • What is Proptype?

    • Understanding React PropTypes - Type-Checking in React

    • Levelling Up with React PropTypes

    • Type Checking using PropTypes in React

  • What are Forms?

  • What are Lifecycle methods?

• A Complete Beginner’s Guide to React

  • Components

  • State and Props

  • Event Handlers

  • Bonus: Functional components

• The Missing Introduction to React

• How does React.js work?

• Learn React with the React Starter Kit

  • Part 1: Intro to React

  • Part 2: React Starter

  • Part 3: React Router

  • Part 4: React Redux

  • Part 5: What’s Next?

• React basic 1 — "Hello React World". Setting Up Your First React App.

• React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML

• Get Started With React.js

• The React Handbook

• A Journey through React Rendering

• GETTING STARTED WITH COMPONENT-BASED DEVELOPMENT

  • Creating Your First React Application

  • Creating your Second React Application: Managing State

• From HTML to Understanding Modern Web-Application Development With React

• 5 Things Novice React Developers Do Wrong

  • Forgetting to Capitalize React Components

    • It turns out that React treats lowercase components as DOM tags instead. If you are new to React, you may have missed this tiny little detail in the React docs.

  • Calling Received Props Wrongly

    • To access the props that were passed in by the parent component, the child component must ensure that they call the correct prop names.

  • Passing Incorrect Types of Props

  • Calling setState() Inside render()

  • Asynchronous Nature of setState()

• Architecting your React application. The development and business perspective of what to be aware of

  • Dev stack and toolkits — razzle (server) or create-react-app (client)

  • UI Library: Dashboard UI Kit

  • State management — Redux

  • Localisation — react-i18next

  • Routing — react-router

• Front-End Development with JavaScript using Reactjs , Redux , Sass and Webpack

• Resources for Front End Developers & Thoughts on Angular, React, Redux, Node and Git

  • Coding Paths

    • Bento

    • freeCodeCamp

    • egghead

  • React

    • React Native Radio Episodes on Devchat.tv

    • The Road to learn React

    • React JS Tutorials on YouTube

    • Build App with React - Live Coding Series on YouTube

    • 30 days of React on FullstackReact

  • React + Redux

• Start your journey into the world of React by learning these basics

  • Virtual DOM

  • JSX

  • Components

  • Props

  • State

• Getting started with ReactJS

  • Creating ReactApp

  • What is JSX?

  • Prop vs State

  • Accessing Remote API

• React JS for Beginners — The Basics

  • React Virtual DOM

  • React’s Core Syntax: JSX

    • JSX (JavaScript XML) is a syntax extension to JavaScript used by React.

  • Installation

• Creating a Simple App With React.js: Build a simple task-tracker app from scratch with React

• Build Your First React Single Page App

• 4 reasons you still struggle learning React

  • You don’t know JavaScript well enough

  • You don’t know JS ES6 syntax

  • You struggle with OOP concepts

  • You’re trying to learn React and Redux at the same time

• Enterprise React in 2018–2019

  • Core things

    • Create React app — React starting kit from Facebook

    • Duck structure — Project architecture

• Enterprise React in 2020

  • Core things

    • Create React app — React starting kit from Facebook

      • The major change in React ecosystem is the change in React library itself with the introduction of hooks.

      • Now I have refactored my demo app with the functional components and hooks. They are more convenient and result in less JavaScript code after being transpiled.

    • Duck structure — Project architecture

  • Main modules

    • Redux — State management

    • Formik — Working with forms (replaces Redux Form)

    • Redux-Saga — REST and WebSocket API

    • React Router — Client side routing

    • I18next — Translation

    • Material-UI — Styling and working with CSS (unless you want to build your own design system)

  • Utilities

    • Redux devtools — state and actions monitoring

    • Lodash — Data handling toolkit

    • Query String — Query string parser

    • Date-fns — Date and time management

    • Testing — Jest + Enzyme

• Let’s Talk About React: A guide covering React’s history, syntax, and more

  • Understanding React's history

  • Some JavaScript concepts useful in React

    • Synchronous and asynchronous

    • this keyword

    • Ternary operator

    • Destructuring

    • Callbacks

  • React essentials

    • Elements

    • Components

  • Lifecycles in React

  • Passing data to child components

• Multi Page Application

  • Multi Page Application with React

  • Multiple Entries

  • Multi-page applications

• Javascript

  • JavaScript (本網站)

  • Javascript for react (Web Programming課程教材)

  • All The JavaScript You Need To Know Before Learning React

    • Es6 classes

    • Array functions (especially filter and map) you will use them a lot!

    • Arrow functions

    • let and const

    • Imports and Exports

    • Spread and Rest Operator

    • The ‘this’ concept

  • 10 JavaScript Concepts You Need to Master React (+ Cheatsheet)

    • let and const variables

    • Template Literals

    • Arrow Functions

    • Powerful Array Methods (.map(), .filter(), .reduce(), etc.)

    • Default parameters

    • Spread Operator

    • Short Conditionals

    • ES Modules

    • Promises + Async / Await

  • Updating a value in a nested array of objects

    • Step 1: Find the element

    • Step 2: Create a copy of the state array

    • Step 3: Update the one value

    • Step 4: SetState

  • 4 useful JavaScript Shorthands you can use in React.js

    • The if-else shorthand

    • The Spread Operator Shorthand

    • Destructuring

    • Template String / Multiline Strings

  • 5 Epic React Tips To Use Today

    • Replace Redux with React Query

    • Make React Context Easier with a Custom Hook

    • Manage Context Providers in a Custom Component

    • Pass props easier using the object spread operator

    • Map over fragments with React fragment

  • Small Tips to Write Better React Code

    • Object destructuring

    • Simplify your conditional statements

    • Spread Operator

    • Template Literals

  • Object Indexing in React

  • Object Indexing in React Part II : Another example for how to stop overusing array functions

JSX

• 一看就懂的 JSX 簡明入門教學指南

• React篇: JSX語法撰寫指引

• Day 03-其實我只是披著html的javascript(JSX)

• Introducing JSX

• What is JSX and How JSX works????

• JSX In Depth

• What the heck is JSX and why you should use it to build your React apps

• React Sans JSX

• Smart ways to write JSX in your React app

  • Variables

  • Rendering nothing

  • Conditional rendering

  • React Fragments

  • Capitalization

• Conditionals in JSX

• If Statement in JSX

const headline = (

<h1>

{ age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }

</h1>

);

• Thinking About console.log Usage in React

  • Composing specific but succinct messages

  • Utilizing debugger or alert as alternatives

  • Using a component/constants to selectively print messages

  • Deciding message necessity (creation and deletion)

• Can you console.log in JSX?

  • The most used solution:

render() {

return (

<div>

<h1>List of todos</h1>

{ console.log(this.props.todos) }

</div>

);

}

進階教學

• React Components

• These React Fundamentals You Skip may be Killing You

  • How React works under the hood

    • functional component vs. class based component

  • React Only Updates What’s Necessary. True?

  • Wasted Renders vs. Visual Updates

• React.js: a better introduction to the most powerful UI library ever created

• Real world React learnings, part one

• Setting up a React project from scratch

  • Implementing redux and react-router v4 in your react app

• How to build your own React boilerplate

• How to loop through arrays in React

• Concepts to become an advanced React developer

  • Use Fragment instead of div

  • Use context more

  • Have at least one Error Boundaries

    • Exploit React Error Boundaries to Improve UX

    • React’s ErrorBoundary. Are You Using It Yet?

    • React Error Handling and Logging Best Practices

      • Error Handling

        • Error handling with Error Boundaries — For class components

        • Error handling with Try-Catch — Catch beyond boundaries

        • Using react-error-boundary Library — The best way

      • Logging

        • Sentry

        • redux-logger

        • Log level

  • Use production build in LIVE environment

  • Use Refs to interact with child

  • Use code splitting

  • Static Type Checking

• React Refs

  • How to Use React Refs

  • React Refs, both Class and Functional Components

  • Understanding Ref Forwarding in React

  • How to Use The Forwarded Ref in React

  • Creating a Stateful Ref Object in React

• Thinking About React, Atomically

• These are the concepts you should know in React.js (after you learn the basics)

  • The Component Lifecycle

  • Higher-Order Components

  • React State and setState()

  • React Context

  • Stay up to date with React!

• Building a React component as an NPM module

• A Complete React Boilerplate Tutorial — From Zero to Hero

• Understanding how to code ReactJS

  • Basic Setup and General Understanding

  • React Routing

  • Data Fetch using Axios

• 
  

• Refactoring for big react applications!

  • Structuring your project

  • Presentational and Container components

  • Wrapping your components

  • Dynamic loading

  • Make your code beautiful

• How to Build a Productivity Application in React: Part 1

• How to Build a Productivity Application in React: Part 2

• 5 Simple But Effective React Practices

• 5 Practices in React You Might Find Effective

  • Sidebar with Recursion

  • Combining Multiple Providers

  • Declaring Components with an HTML Tag Name as a String

  • Mapping Components Through Exports

  • Allow Components to be Controlled Elsewhere

• 6 Easy React Tricks That May Surprise You

  • React Keys with Fragments

  • String Values as HTML Elements

  • Pass a Function to setState

  • Implement useState with useReducer

  • Manually Re-render a Component

  • Move Objects or Functions Out of Component If There is No Direct Props/State Dependency

• More Easy React Tricks We Should Know

• 3 Extremely Useful React Tips to Speed Up The Development Process

• React Tips — Clean Syntax

  • Toggling Components

  • Destructuring Props and State

• React Tips — Modern Structures and State Updates

  • Reduce the Use of Class Components

    • With the introduction of React hooks, function components are now smart. Therefore, we can use function components like we did we with class components, but without the headache of this and lifecycle hooks.

  • Don’t use Props in Initial State

    • The better way to reference props is to do it in componentDidUpdate . It’s a lifecycle method that lets us update the component when something change, such as when props change.

• React Tips — Component Organization

  • Container and Presentational Components

  • Portals

  • Code Splitting

• React Tips and Tricks You May Have Missed

  • Use React Hooks In Functional Components

  • Use The React Context API For Passing Props

  • Styled Components

• Delicious React Apps : Advanced recipes to level up your apps

  • Context API

    • When you find yourself passing props down deep into your tree

    • You need a global state (user settings, translations, themes, etc)

    • Someone tells you to use Redux when it’s not really needed

  • Presentation / Container components

  • Render Props

• Six Ways To Get Better At React

  • ESLint + TypeScript

  • Dive Deep Into Hooks

  • Don’t Optimize Too Soon

  • Know When To Make A New Component

  • Concentrate On Testing

  • When to use Global vs Local State

• 5 Tips to Write Better React Code

  • Destructure props

  • Keep correct order of import modules

  • Use Fragments

  • Use Presentational and Container Components

  • Use styled-components

• 10 Tips and Tricks That Will Make You a Better ReactJS Dev

  • Use React Hooks In Functional Components

  • Use The React Context API For Passing Props

  • Styled-Components

  • React Fragments

  • Use Error Boundaries

  • React and Typescript

  • Jest and Enzyme for Testing

  • Conditionals in JSX

  • Higher-Order Components

  • React DevTools

• Starting With React? Benefit From These Coding Tips

  • Components

  • Classes

  • Rendering multiple components

  • Conditional rendering

  • Handling events

  • Using state in a component

• 8 Development Tips for React Developers

  • Updating an object with setState in React

  • Updating a nested object in React

  • Deploy App on a subdirectory

  • Render nested object

  • Simple nested Mapping

  • Detect Route Change

  • history push INSTEAD OF window.location

  • Query String

• These 5 Tips Will Change The Way You Build React Apps

  • Tip #1: SSR

  • Tip #2: Service Workers (PWA)

  • Tip #3: Localhost HTTPS

    • Using HTTPS in Development

  • Tip #4: “Code Splitting” with @loadable/component

  • Tip #5: Tachyons & Styled-Components

• Portals

  • Thinking With Portals

  • React Portals: What are they and why should we use them?

    • Two common examples for doing this are when the parent element has styling (like a z-index pushing it to the front of the page or an overflow: hidden) but you want the child to visually appear on top of its container.

  • Reusable React Portals

  • Understanding React Portals and Its Use-Cases

  • Everything You Need to Know About React Portals

• Patterns

  • React in patterns

  • Evolving Patterns in React

    • Conditional Render

    • Passing Down Props

    • Destructuring Props

    • Provider Pattern

    • High Order Components

    • Render Props

  • React Patterns

    • Function component

    • Destructuring props

    • JSX spread attributes

    • Merge destructured props with other values

    • Conditional rendering

    • Children types

    • Array as children

    • Function as children

    • Render prop

    • Children pass-through

    • Proxy component

    • Style component

    • Event switch

    • Layout component

    • Container component

    • Higher-order component

    • State hoisting

    • Controlled input

  • 5 Advanced React Patterns

    • Compound Components Pattern

    • Control Props Pattern

    • Custom Hook Pattern

    • Props Getters Pattern

    • State reducer pattern

• Arrow functions are disrupting React.Components

• Environment variable

  • My Awesome Custom React Environment Variables Setup

  • Using Environment Variables in ReactJS

  • Managing .env Variables In React App: A step by step guide to setting up multiple staging environments

  • Handle Multiple Environments in React

  • How To Correctly Build a Multi-Environment React App with react-app-rewired and env-cmd

• What Time Is It?: Develop your own world clock with React

  • Create, Start, and Deploy Your React-App

  • Create The World (in far less than six days)

  • Adding Time Zones

  • Interact With The World

  • How Can You Save Light? (daylight saving)

• Search

  • Create an Instant Search Experience in Less than 15 Minutes

  • Let’s build a search bar in React!

  • How to Implement Instant Search within 5 Minutes in your React App using MeiliSearch

  • Build a beautiful Job Search App using React : Learn how to use Lazy loading, Context API, add Load More functionality, Create Custom Hooks and much more

• Conditional Rendering

  • 8 React conditional rendering methods

    • If/Else

    • Prevent rendering with null

    • Element variables

    • Ternary operator

    • Short-circuit operator (&& )

    • Immediately-Invoked Function Expressions (IIFE)

    • Subcomponents

    • High Order Components (HOCs)

  • Conditional Rendering

  • 4 Ways to Conditionally Render in React

    • Using If..else

    • Using a Switch Statement

    • Using a Ternary Operator

    • Short Circuit Evaluation Using &&

  • Conditional Rendering With React Hider

重要資源

• React admin

  • ES6

  • React

  • Material Design

• React Starter Kit

  • isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

  • react-starter-kit-example

    • eGroup 團隊的 React Starter Kit example，這個example包括

      • redux

      • redux-observable

      • redux-action

      • semantic-ui-react

      • react-router-dom

      • normalizr

      • immutable

      • react-intl

工具

• React Team推薦的工具 (只列部份)

  • JSX Integrations

    • Editor Integration

      • Sublime

      • Atom

      • Visual Studio Code

    • Build Tools

      • Create React App

      • ESLint

      • Babel

      • webpack

  • Starter kits

    • Create React App

    • Gatsby

  • Routing

    • react router

    • Reach Router (未來跟react router整併)

  • Data fetching

    • Apollo (GraphQL)

    • Axios

  • Testing

    • Enzyme

    • Jest

  • UI components

    • Material-UI

    • react-bootstrap (currently support bootstrap 3)

    • reactstrap (support bootstrap 4)

    • semantic-ui-react

• Top 10 ReactJS Tools used by the Most Successful Developers

• 10 Productivity Tools for React Developers in 2020

  • ESLint

  • Bit

  • Create React App

  • React Cosmos

  • React Toolbox

  • React Bootstrap

  • React Slingshot

  • Reactide

  • React Testing Library

  • Storybook

• The React Developer Tools You Should Know in 2019

  • Component Libraries

    • React Material-UI, Grommet 2.0, React Bootstrap, Reactstrap, Prime React, Elemental-UI, Semantic-UI & more.

  • Styling Components

  • State Management

    • Among the popular tools, you can find Unstated, as well as the re-rise of Mobx which incorporates React’s encapsulated-components paradigm. It also reviews the new Context-API which is a promising alternative to Redux.

  • Testing

    • The 2018 “State of JS” survey lists the most in-demand testing frameworks looking forward into 2019, with popular testing frameworks such as Jest, Mocha, Karma and more to make TDD simpler on the component level.

  • Kick-Starters and Boilerplates

    • With the release of create-react-app 2.0 it seems like this React app boilerplate remains the most popular and recommended projects out there. However, it’s also worth taking a look at projects like React-Boilerplate and React Slingshot which provide an alternative for different use cases.

  • React Hooks and Context-API

  • React Static-site Generators

    • React brought a new era into the composition of component-based static websites, with new frameworks like Gatsby and React static.

• 5 Tools For Faster Development In React

• 1. Bit (community版:免費)

     • 分享元件的平台

     • Will Bit Replace npm? : What role do Bit and Bit.dev play in web development?

  2. StoryBook / Styleguidist

  3. React devTools

  4. Redux devTools

  5. Boilerplates & Kick-Starters

     • Are React Boilerplates Obsolete?

       • So what are the alternatives to using a boilerplate?

         • Set up the project by yourself.

         • Use create-react-app

           • If you are working on a client-side rendered application that doesn’t require webpack customization, I would recommend that you use create-react-app

         • Use create-next-app

           • If you need custom build configurations, or you need to support server-side rendering or static site rendering, then go with create-next-app.

     • Create React App (50k stars) (推薦)

       • Create a New React App

     • React Boilerplate (18k stars)

     • React Slingshot (8.5k stars)

• 20 BEST TOOLS FOR REACT DEVELOPMENT (2018)

  • Reactide (not officially released yet)

  • React Studio (For macOS 10.12 or higher)

  • create-react-app (by facebook)

  • StoryBook

    • Getting Started with Storybook for React

    • Setting up a React + TypeScript + Storybook project

    • Using Storybook as a Visual Testing Platform

    • Documenting React Components With Storybook

    • How and Why to Add a Storybook.js Design System to Your Existing React Application

    • Building a Design System Package With Storybook, TypeScript, and React in 15 Minutes

    • Create React Components Using Hygen with storybook files

    • Components at Scale: Implementing Storybook

    • Building UI Components in React using Storybook

    • Your React Storybook Game Sucks

    • An In-Depth Look at Storybook 6

      • Zero-configuration setup

      • Dynamic component editing

      • Multiple Storybook Composition

      • Documentation improvement

  • React-Styleguidist

    • 5 Tips to Help Improve Your UI Development Environment : Advice for configuring your React-Styleguidist

      • Describe Connected Components

      • Develop Mobile Version of Component

      • Iconography

      • Typography

      • Customize Style Guide

    • Document Your React Applications The Right Way with react-styleguidist

  • REACT DEVELOPER TOOLS FOR CHROME

  • REACT DEVELOPER TOOLS FOR FIREFOX

  • REACT SIGHT

    • React Sight — Visualise your React apps

  • REACT COSMOS

  • CODESANDBOX FOR REACT

  • REACT BITS

  • REACT BOILERPLATE

  • REACT SLINGSHOT

  • REACT STYLE GUIDE GENERATOR

  • REACT EXTENSION PACK FOR VISUAL STUDIO CODE

  • ATOM REACT PLUGIN

  • React-Bootstrap (bootstrap 3, will be ready for bootstrap 4)

    • Reactstrap (for bootstrap 4)

  • React Toolbox (for Google's Material Design)

  • Semantic UI React

  • React Belle

• 50 amazing tools for developers 2018

  • React tools (30-34)

    • React Datasheet

    • React Native for Web

    • Reactide (not officially released yet)

    • React Studio (For macOS 10.12 or higher)

    • ORY Editor (written in react)

• 45 NPM Packages to Solve 16 React Problems

• React.js: 5 awesome packages you need to try out

  • react-snapshot

  • react-helmet

  • react-use

  • react-color

  • react-loading-skeleton

• Five awesome React packages to check out

  • React Loader Spinner

  • React Animated Burgers

  • React Responsive Carousel

  • React CountUp

  • React Markdown

• 14 Useful Packages Every React Developer Should Know

• Advanced Roadmap for React.js developers

  • Testing

  • Internationalization

  • Server-Side Rendering

  • Static Site Generator

  • Backend Framework Integration

  • Mobile

  • Desktop

  • Virtual Reality

• Better alternatives to the most popular React libraries

  • moment VS date-fns

  • Formik VS React Hook Form

  • React-router vs HookRouter (第一次聽到)

  • Lodash VS Native JavaScript

• 5 Essential Libraries For Your Next React Application

  • Formik

  • Downshift

  • CSS-Modules and Classnames

  • Testing Library

• 8 Powerful React Libraries To Try In 2021

• 7 React Libraries That Will Make Your Life Easier

  • Lodash

    • Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, and strings.

  • React Bootstrap (UI)

  • React-i18next

    • If you need a multilanguage application, then you’ll definitely need the React-18next library.

  • React DnD (UI)

  • Material UI (UI)

  • React Spinners (UI)

  • Enzyme (Testing)

• React.js Libraries that you never heard about

  • React 360 (3D VR library)

  • React-Blessed

  • React NodeGUI

• 8 React Libraries That I’d Like To Introduce To You

  • React Lazyload

  • React Responsive

  • React Beautiful DnD

  • Styled Components

  • React Select

  • React Helmet

  • React Tooltip

  • React Markdown

• React components & libraries

  • 非常完整，可以依照用途及星等來搜尋、排序

• Must-Have Weapons in Your React Armory

  • React Dev Tools

    • React developer tools are available for Chrome and Firefox as an extension

    • How Using React Dev Tools Made Me Better Developer

      • I Streamlined My Workflow

      • I Improved My Debugging

      • I Discovered What Slows Me Down

      • I Learned Useful Tricks

    • Top five Chrome Dev Tools tips for React

  • Styled Components

  • React-Intl

    • Translate Create-React-App with React-Intl: How to set up react-intl with CRA without ejecting

      • Provide the Context

      • Create some messages

      • Creating our LocaleContext

      • Extracting intl messages

      • Passing messages to react-intl

  • Storybook

    • Storybook allows you to write and test components in isolation.

    • Moreover, the storybook also serves as a living document of what has been done so far.

  • React Testing Library

    • React Testing Library comes up with guidelines about what should be tested, allowing us to test the DOM changes and updates as good as what the end-user will perceive.

• 5 Great Libraries for New React Developers

  • Moment.js

  • Chart.js

  • Semantic UI

  • Hover.css

  • React-vis

• 5 Micro libraries to elevate any React JS project

  • is.js

  • React-use

  • Date-fns

  • Pass-meter

  • Anime

• 5 Awesome React.js Libraries You Should Know About

  • react-portal

  • react-toastify

  • react-contextmenu

    • Create a context menu in React js

  • react-lazy-load-image-component

  • react-onclickoutside

• Here Are 6 Useful React Components

  • React Credit Cards

  • react-window

    • Render Huge List With react-window

  • react-tabs

  • React Sidebar

  • React-Toastify

  • React Tooltip

• React Libraries You’ll Want to Check Out for Your Next Project

  • Libraries For Styling

    • Material-UI

    • AntDesign

    • Tailwind-UI

  • Libraries For DataCharts

    • Nivo

    • Victory

      • Add Charts into Our React App with Victory — Custom Labels and Points

    • Recharts

• Document

  • Documenting React Components With Storybook

  • Document your React components using docz

  • Docz — It’s Never Been Easier to Document Your Project

User Interface

• 11 React UI Component Playgrounds for 2018

  • Bit (community版:免費)

    • 分享元件的平台

  • Codesandbox

  • StoryBook / Styleguidist

  • React component playground

  • Stackblitz

  • React live

  • JS Bin

  • CodePen

    • Codepen－－美觀實用的線上編輯器

  • JSFiddle (React Boilerplate)

    • jsFiddle－－線上檢測網頁原始碼的實用工具

  • PlayCode

  • UiZoo

• 21 React UI Component Libraries You Should Start Using from Today

• The Top 3 React UI Libraries for Beginners

  • React Bootstrap

  • React Suite

  • Ant Design

    • Ant Design is by far my preferred React UI library.

• Best React UI component libraries and frameworks in 2019

  • Material-UI

  • React Bootstrap

• 23 Best React UI Component Frameworks

  • 統整 11 React UI Component Libraries You Should Know In 2018 及 Best React UI Component Libraries And Frameworks Part 2的內容

• 1. Material-UI (Google Material Design)

  2. React-Bootstrap (bootstrap 3, will be ready for bootstrap 4)

  3. Grommet

  4. Ant Design React

  5. Blueprint

  6. Reactstrap (for bootstrap 4)

  7. React toolbox (Google Material Design)

  8. React Desktop

  9. Semantic UI React

  10. Onsen UI

  11. Rebass

  12. Elemental UI

  13. Belle

  14. Prime React

  15. Atlaskit

  16. Fabric (in Typescript)

  17. Carbon Components

  18. Khan React Components

  19. Gestalt by Pinterest

  20. Material Components Web

  21. React MD (Google Material Design)

  22. React Foundation

  23. React Virtualized

• Best UI Frameworks for your new React.js App

  • Material-UI (Google Material Design)

  • React Desktop

  • Semantic UI React

  • Ant-design

  • Blueprint

  • React-Bootstrap (bootstrap 3, will be ready for bootstrap 4)

    • Reactstrap (for bootstrap 4)

  • React-Toolbox (Google Material Design)

  • Grommet

  • Fabric

  • React-md

• 5 React Component Toolkits

  • Material-UI (Google Material Design)

  • React-Bootstrap (bootstrap 3, will be ready for bootstrap 4)

    • Reactstrap (for bootstrap 4)

  • React Toolbox (Google Material Design)

  • Blueprint

  • React Native Web

• Here Are 5 Useful React Components: Building an awesome user interface

  • React Beautiful Dnd

  • Sweetalert2

  • React Big Calendar

  • React Virtualized

  • React Spring

    • How to create a collapsable panel with smooth animations in React

    • Create a Number Animation with React Spring

• Chakra

  • Accessible and Beautiful Components with Chakra UI

  • Review of Chakra UI

  • Chakra UI is the Only React Component Library You Need

• Fluent UI React— How we cut more than 30% of component’s bundle size by creating icons package

• Semantic-UI-React

  • A Beginner’s Guide to Using Semantic UI React

  • Create an Auto Saving React Input Component

• React Spectrum

  • Introducing React Spectrum

    • React Spectrum — A React implementation of Spectrum, Adobe’s design system.

    • React Aria — A library of React Hooks that provides accessible UI primitives for your design system.

    • React Stately — A library of React Hooks that provides cross-platform state management and core logic for your design system.

  • Getting Started with Adobe’s React Spectrum

• Configure a Responsive Grid Component in a ReactJS Application in 14 Steps

• React Socks and Responsive Web Design With React

  • Rendering viewport-specific components without hassle

  • The ability to name and define your own breakpoints where you need them (React Socks also has predefined breakpoints as well, if you prefer not to customize them)

  • The potential for improved app performance if you lazy load viewport-specific components

  • Simpler and sweeter syntax, for ease of use

• Build a Simple Customized Dropdown Menu in React

• Create a fancy burger menu using reactjs-popup

• Creating A PopUp Window Using JS And React

• Create a Modern Dynamic Sidebar Menu in React Using Recursion

• Create a reusable Sidebar component with React

• Atomic Design With React And Bit: Simplify a Complex UI

• Building a UI Component Design System

• Editor

  • Build a Rich Text Editor with Editor.js : react-editor-js for React

  • Top 5 Rich Text Editors for React in 2021

    • Draft.js — Most Popular Free Editor for Basic Needs

      • How To Implement a Rich Text Editor in Your React App

        • react-draft-wysiwyg

    • Slate.js — Free Editor with Complex Content Support

      • Let’s build a fast, slick and customizable rich text editor with Slate.js and React — Part II

    • Quill.js — Free API Driven Editor with Themes

    • TinyMCE — Commercial Feature Rich Text Editor

    • KendoReact — Commercial Production Ready Editor

  • Create Your Own Markdown Editor With React

• Build interactive diagrams with storm-react-diagrams!

• Building a minimum viable UI with React and open source components

• Pagination in ReactJs

• React — Why Ionic lets you develop faster

• How to create a Buttons UI Kit

• Why do I need Keys in React Lists?

• Why Keys Matter in React : And why you shouldn’t ignore key warnings in your console

• 3 Common Mistakes With React Keys

  • Mistake #1: Not Using a Key

  • Mistake #2: Adding the Key in the Wrong Place

  • Mistake #3: Not Using a Stable Identifier as a Key, Especially When Working With Dynamic Lists

• SVGs

  • Working with SVGs in React

  • Render sparklines as SVGs in React.

    • react-sparkline-svg

  • Flexible SVG components in React

  • Flexible Icons with React and SVG

  • The right way to use SVG icons with React

  • How to display icons in React (SVG)

  • How To Make Clickable/Dynamic Graphics In React Using SVG

  • Breakout Game with JavaScript, React and SVG

  • Breakout Game with JavaScript, React and SVG. Part 2

  • How to Use SVG in React

• Timeline

  • How to create a Timeline Component with React

  • Build a Timeline Component With React and React-Chrono

• Enhance Your React App With Undo and Reset Abilities

• Master UX with React in 2020: Four Ways to Upgrade Your React App User Experience

  • Tactic 1: Improving your loading screens

  • Tactic 2: Implement Placeholder Content

  • Tactic 3: Master the Fade In

  • Tactic 4: Insert lovable micro-interactions

• Improving React UX: Micro-interactions

  • react-rewards

• Improving Your React App UI: Upgrades to Five Essential Components

  • #1: Improving our Tables with the versatile Material-Table

  • #2: Improving our Maps with the powerful React-Map-GL

  • #3: Improving our Headers with the easy React-Headroom

  • #4: Improving our Lists with the beautiful React-Sticky

  • #5: Improving our Notifications with the simple Cogo-Toast

• How To Create Maps in React : Learn how to create a maps using React and Leaflet.

• Matter.js

  • How To Use Matter.js in a React App: No physics experience required

• GraphQL

  • An introduction to GraphQL: how it works and how to use it

  • Consuming an Apollo GraphQL Server using React

  • The optimistic UI with React (Apollo / GraphQL)

  • Reading Data From A JSON File With Gatsby + GraphQL

  • GraphQL, and the end of shared client-side model objects

  • Building a Real-time React App with GraphQL and Apollo

  • Apollo client GraphQL for React From Scratch A-Z

  • Why GraphQL is the Ideal API Language for Frontend Engineers

  • React Apollo and GraphQL Hooks — two ways of using GraphQL in React

  • GraphQL & Complex Client State: Why We Reached For Redux

  • ReactQL

    • Why using ReactQL Starter Kit for your App will save you Weeks in Development

  • Hook

    • Use GraphQL Query Hooks With React

    • Apollo GraphQL w/ React Hooks

    • Apollo Client + Typescript Hook Patterns

    • React w/ Hooks + Amplify + GraphQL

    • How to Use React Hooks With the GraphQL API

    • Token authentication with React and Apollo Client— a custom hook example

    • GraphQL made simple with React Suspense and Hooks

• 3D

  • React-Three-Fiber: Build 3D for the Web With React and WebGL Easily

  • Make your React websites fun by adding interactive 3D objects : A simple tutorial on using React-Three-Fiber with React.

  • Enter the 3D Coding World: React + ThreeJS = R3F (React-three-fiber)

  • Create 3D Text Meshes in Three.js with React-Three-Fiber

• Anima

  • How to Convert Design to React Code

  • Anima — Design to code 2021 new features : Download React components; group layers; convert to image, and code quality improvements

• Device Detect

  • How to Easily Detect the User Browser in React : Introduction to React Device Detect

• Drag and Drop

  • Mastering Drag & Drop with ReactJS — part 01

  • react-beautiful-dnd

    • Rethinking drag and drop

    • Beautiful drag and drop with React — The beginner’s guide

    • How to add Drag and Drop features to your React app

    • Create a JIRA/Trello Clone with React

      • react-beautiful-dnd

      • styled-components

  • Build a Drag and Drop (DnD) layout builder with React and ImmutableJS

  • How to make and test your own React drag and drop list with 0 dependencies

  • How To Implement Drag and Drop for Files in React

  • Creating a drag and drop uploader with previews using React: And writing your first custom hook in the process

  • Let’s Build a Simple Bulletin Board React App with react-draggable

  • Build a Dashboard With Drag-and-Drop Dynamic Widgets in React : React-Grid-Layout

• Style / CSS

  • 4 Ways to add Styles to React Component

    • Add the Global Styles to “index.html” File

    • Create a Style for Each Individual Component

    • Adding Inline Style to React Component Elements

    • Attach style property to JavaScript Style Object

  • Styling React with CSS

    • Plain CSS Sytlesheet

    • Inline Styling

    • CSS-in-JS

    • CSS Modules

    • Styled Components

  • Four ways to style react components

    • CSS Stylesheet

    • Inline styling

    • CSS Modules

    • Styled-components

  • 4 Popular Ways To Style Your React Components

    • Inline-Styling

    • CSS Modules

    • CSS Stylesheets

    • Styled-Components

  • The Basics of Styling and Writing CSS in React

    • Styling and CSS

      • Inline Styling

      • Stylesheet

      • Module CSS

    • JavaScript Within JSX

      • Embed expressions within JSX

      • JSX is also an expression

      • Specify element properties with JSX

  • Tech Stack 2019: Frontend Media and Styling

  • Styling Best Practices Using React

  • Styling in React

  • Build a Stunning Breadcrumb Component in React with Plain CSS

  • Build a Modern, Customized File Uploading User Interface in React with Plain CSS

  • Theming React With CSS variables

  • Keeping your CSS in JS clean : A guide to using stylelint with emotion or styled-components

  • Use Spread Syntax to Overwrite or Add Styles in React

  • Solve your image sizing and positioning problems forever.

  • How to SCSS

  • Applying CSS Transitions with React Hooks

  • Encapsulated CSS: The Key to Composable Layouts

    • The Two Principles of Encapsulated CSS

      • Components do not lay themselves out

      • Components style themselves and layout only their immediate children

• Layout

  • How to build reusable layouts in React JS

  • How To Implement Different Layouts In React

  • CSS Grid Layouting made easy in React Apps

• Animation

  • 5 Ways to animate a ReactJs app in 2019.

    • CSS method

      • CSS and JavaScript Animation Tips with Examples

    • React-transition-group

      • It is an add-on component for a simple implementation of basic CSS animations and transitions.

    • react-animations

      • React-animations implements all animations from animate.css. Simple to use!

    • React Reveal

      • This is an animation framework for React.

    • TweenOne

      • library that ant.design uses for animation

  • react-spring

    • Why React needed yet another animation library. Introducing: react-spring

    • How to create a component slider with react-spring

    • Fade-in and fade-out animation with spring and transition React Hooks

  • Framer Motion / react-pose

    • Using Framer Motion to Create a Lazy Load Image Component in React

    • Smooth Animations With React and Framer Motion

      • Framer Motion

        • Framer Motion is the successor to the Pose animation library.

    • Animate React with Framer Motion

    • Introduction to Framer Motion for React : How to create animations with React

    • Amazing React animation with react-pose

    • Creating an unfolding animation with React Pose

  • React Animate Height

    • Animating height — the right way

  • Blazing Fast React Animations with (and without) Redux

    • GSAP (Greensock Animation Library)

  • React: SVG Stroke Animation with CSS Explained: And creating a CSS menu toggle transition with styled components

  • Hero animations in React with react-motion-layout

  • Introduction to Remotion — Create Videos and Animations with React

  • How to Use (and Manipulate) Airbnb’s Lottie Animations in React

• Calendar

  • Adding Calendar To Your React App

    • React-Calendar

• Chart

  • How to Add Graphs and Charts to a React App

  • Add Charts into Our React App with Nivo — Line Chart

• Date picker

  • Build a Date Picker in 15mins Using Javascript/React from Scratch

• Form

  • How to handle forms with just React (with fetch)

  • An Introduction to Using Form Elements in React (ES6)

  • Submitting Form Data With React (ES6)

  • Reusable form-inputs in React. Simple and flexible!

  • How to Build a Complex Dynamic Input Form with React

  • Creating Re-usable React Forms with Custom Hooks

  • Build Your Own Mini Forms Framework in React

  • How to Create Forms for Your React/React Native App

    • Controlled vs Uncontrolled Forms

      • Forms in React: Controlled or Uncontrolled Components

    • How to choose a form library?

    • Popular Form Libraries

      • Formik -React and React Native

      • Formsy React -React and React Native

      • React Hook Form -React and React Native

      • Redux Forms -React and React Native

  • Testing Async React Forms : Testing asynchronous forms with Formik and Testing Library

  • Validation

    • Validation Of Complex Forms In React.JS: Part 1

      • with react-validation-boo

    • How to use HTML5 form validations with React

    • Easiest User Validation on authentication with indicative on ReactJS

    • Back to the Browser: React Form Validation with the DOM API

    • Form Validation with React Hooks

    • How I tried to validate React forms (with hooks)

      • with Material UI

  • Formik

    • Forms with Formik + TypeScript

    • Build React forms and validation with Formik like a boss

    • React Form Validation with Formik and Yup

    • Formik For React: Introduction to Form Management Done Right

    • Integrating styled forms in React

    • React Forms with Formik HOCs and Functional Components

    • Managing forms in React with Formik: Introduction to the Formik library to manage forms in React

      • Comparison with Redux Form

      • Installation of Formik and building our first form

      • Validating Formik forms with Yup

      • The HOC withFormik

    • Make Form Handling Easy in React Apps with Formik — Error Messages and Binding to Arrays and Nested Properties

    • Schema For Reactjs

      • This is an attempt to rethink Yup as an object schema builder and not just for Formik’s validation.

  • React-Hook-Form ** 推薦 **

    • Build the Next Generation of Forms With React Hooks Forms

      • Basic Usage

        • register: To connect a field to rules or validation functions.

        • handleSubmit: To check and validate all fields before sending submit.

        • watch: This will watch specified inputs and return their value.

        • errors: Contains form errors or error messages that belong to each input.

      • Register Fields

      • Handle Fields Errors

      • Drag and Drop Builder

    • Is React Hook Form the future?

      • Easy to use

      • Super Light

      • Perfomance

    • React Hook Form vs. Formik: A technical and performance comparison

      • Formik outperformed Redux Form in terms of size, best practices, and performance, but in this article, we will see how Formik measures up against the new kid on the block, React Hook Form. We will compare the two libraries and determine who will emerge as the victor in the end.

      • It is clear that React Hook Form is the overall winner. Although it is still new, it is already an incredibly powerful library.

    • React Hook Form VS Formik

      • A big difference between the two is that React Hook Form is designed to make use of uncontrolled components to avoid unnecessary re-rendering caused by user inputs.

    • React Hook Form — An Elegant Solution to Forms in React : How to use react-hook-form to build clear and maintainable React forms.

    • The Easiest Way to Deal with Forms in React : Use React Hook Form to improve performance in your application

    • The #1 Best Design Pattern for Managing Forms in React : with react-hook-form

      • with Apollo Component, Logic Component, View Component

  • The Best React Form Library To Use In 2020

    • React Hook Form **

      • While other form libraries like final-form and Formik rerender on every change event, React Hook Form embraces uncontrolled form validation. This reduces your number of rerenders to the bare minimum.

    • Formik

      • Formik is one of the most popular form libraries in the React ecosystem. It allows you to easily build complex forms, and it works nicely with yup validation.

    • React Final Form

      • React-Final-Form is built by the same author as Redux Form. For years, Redux Form was the gold standard in React form libraries. However, the React community moved away from Redux Form in search of more lightweight and performant alternatives. Unlikely Redux Form, Final-Form is a zero-dependency solution.

  • Learn the simple way of building forms in React using Context API

    • react-standalone-form

  • MSON

    • How to autogenerate forms in React and Material-UI with MSON

• Event

  • All About Javascript Event Listeners, Propagation, and Bubbling (part 1)

  • Some About React Event Listeners (part 2)

  • This is why we need to bind event handlers in Class Components in React (ES6)

  • The best way to bind event handlers in React (ES6)

  • How to write event handlers in React

    • Declaring handler functions

    • Multiple event handlers

    • Importing generic handlers

  • An Intro to Events in React

  • How onChange Differs Between React and Vanilla JavaScript

    • How to Hang the Event Handler to the React JSX Element

    • Can Vanilla Work Like React?

      • Yes, absolutely. This is actually extremely easy. All you need to do is use onInput instead of onChange.

  • Preventing click events on double click with React, the performant way

  • What’s the Difference Between Synthetic React Events and JavaScript Events?: Understanding the key differences between JavaScript events

  • Creating one event handler for all input types in React

  • Pass parameters to React event handler without wrapping the function

  • Master Your React Skills With Event Listeners

  • 5 Tips for Composing Event Handler Functions in React

• Image

  • Simple Image Upload with React

  • Build An Image Slider With React & ES6

  • How to Blur Faces in Photos Using React

  • How Podac loads images 95x faster

    • Solution 1: Preloading the Unsplash Image

    • Solution 2: Saving to Chrome’s Image Cache

  • Progressively Loading Images In React: Making a Medium Style Image Loader With Intersection Observer and React Hooks

    • How Medium stories loads images

      • The image loading does not begin until the image enters the viewport

      • Then a “blurred up” thumbnail loads

      • Then the full-size image loads and replaces the thumbnail

    • We can categorize this image loading technique into two distinct features.

      • Lazy loading

      • “Blur Up”

  • How to Implement Lazy Loading in React with Intersection Observer : An explanation of how to load images lazily

  • Lazy Loading Images With Intersection Observer in React

  • How to Progressively Load Images in React using Hooks

  • How to Load Images Progressively in React

  • Solve your image sizing and positioning problems forever.

  • Creating a Simple Image Slider Using React

  • Importing images in React ** 連結失效

  • React Background Image Tutorial – How to Set backgroundImage with Inline CSS Style

• Loading

  • How to handle and design the startup of a React application

    • Why should I display a loading screen instead of a static screen on application start ?

    • How to display a loading animation and block the UI display as long mandatory processes haven’t loaded ?

    • The implementation of our app loading process

  • React Loading Screen Tactics — Improving User Experience

    • react-loading

    • react-fade-in

  • React UX: Mastering the Fade In

    • react-fade-in

  • React User Experience Tactics: Placeholder Loading Content

    • React-Content-Loader and Create-Content-Loader

  • Speed Up Your React UX with Skeleton Screens

    • React Content Loader

    • React PlaceHolder

    • React Loading Skeleton

      • The What, Why, and How of Using a Skeleton Loading Screen

  • Responsive and Progressive Video Loading in React: How to create responsive HTML5 videos with React

  • Build a Skeleton Component in React for Better UX: A loading component gives users something to look at while your page loads

  • Fade in-out text in React

• Modal

  • Pure React Modal

  • Building Custom Modals in your React.js App

  • Create A Medium-like Modal with React

    • Part 1: Creating a modal in React

    • Part 2: Make it look like Medium’s modal

  • How to render modals in React

    • React Portals

  • How to Quickly Create a Popup Box in React

    • Using a combination of ReactDOM.createPortal, e.stopPropogation and a functional children component we created a lightweight popup box that closes when the background or the Submit button is clicked.

  • Build a full-featured Modal dialog Form with React

    • React Portal to inject any component anywhere in DOM

  • Easiest way to work with modals in React

    • react-modal

  • Modal with React Hooks: Write less, do more

    • react-bootstrap/Modal + hook

• Video

  • Building a YouTube Clone With React — Part 1 : In this tutorial, we will start building our YouTube clone by using YouTube Data API v3 and React

  • Building a YouTube Clone Using React — Part 2 : In this tutorial, we will continue building out YouTube clone by building the home page showing the Recommended Videos

• Excel

  • Integrate Excel into Your React Application with Microsoft Graph

  • How To Handle Spreadsheet Uploads for Your Web App : with gluestick-elements

• PDF

  • Download HTML as a PDF in React : react-pdf/renderer

  • How to Display PDFs but Prevent Them From Downloading in React

    • Removing the Download Button

    • Preventing Right-Clicks

    • Introducing react-pdf

    • Preventing Print and “Save as PDF”

    • A More Robust PDF Viewer

React Router

State Management

With Hooks

• Redux vs. Context vs. State (很棒的文章)

  • State Management Philosophies

    • The Store-Owns-All Era

    • Features-Own-Data Era

    • Components-Own-Data Era

  • State Management Styles

    • Component state

    • Instance variables and mutatable refs

    • Context

    • React-Redux using Connect/Hooks

  • So Which Should I Use?

    • React state

      • This should still be used for your UI state. Unless your UI state is necessary to know globally, I highly encourage you to house that data here.

    • useRef and instance variables

      • But if you have some sort of data that needs storing and is used central to that component, but you don’t want a re-render from it, it can be a trick that comes in handy.

    • Context

      • I think context should be generally used for static data that is passed throughout the application, such as for theming, and it’s particularly good at that. It doesn’t pollute the store and is very simple to collect.

    • Redux

      • As I said above, my habit is to use a tool like Redux or Apollo for my data management, my React state handles local information, often UI state, and context handles static data, such as theming.

• Redux/Context API for State Management in React.

• React State Management in 2020

  • Local state -> Hooks

  • Global state -> Redux/MobX

  • What’s the Benefit of a State Management Framework?

    • Globally defined, which means only one instance of the data

    • Only fetching remote data once

    • Extensive dev tools

    • Provides a standardised way of working for software engineers

• State Management with React Hooks and Context API in 10 lines of code!

  • useState

  • useReducer

  • createContext, useContext

• State Management: React’s Context API vs Redux!

  • For simple or low-frequency updates like theme settings, user authentication data, React Context is the perfect choice. On the other hand for complex or high-frequency update Redux should be used.

• State management with React hooks

  • Custom state manager

  • Passing actions

  • Working with contexts

• State Management with React Hooks — No Redux or Context API with use-global-hook

  • The basics of Hooks

  • Sharing states

  • Separating actions from components

• Global Cached State in React using Hooks, Context, and Local Storage

  • Context Using Hooks

  • Adding in Local Storage

    • In addition to localStoarge there is also sessionStorage which is only persistent across the single session.

• Why we still need to use state management libraries in React?: Why using just React’s state mechanism is a bad idea

• How to Develop Global State For Your React App With Hooks, Without Context

  • Step 1: Global variable

  • Step 2: Re-render on Updates

  • Step 3: Container

  • Step 4: Scoped Access

  • Step 5: Functional Updates

  • Step 6: Reducer

  • Step 6: Concurrent Mode

• Lifting State Up

  • Lifting State Up (react doc)

  • Application State Management with React

  • What Is Lifting State Up in JavaScript?

Before Hooks

• Where to Hold React Component Data: state, store, static, and this

  • Local state

  • Redux store

  • this.<something> (ES2015)

  • Static (ES2015)

• How to approach React tasks, two mindsets

  • You should split the task in to at least these two pieces:

    • State Management

    • State Rendering

• Why State Management is All Wrong

  • Stated Libraries

• State of React State Management in 2019

  • setState()

    • 為何說setState方法是異步的

    • Understanding ReactJS — setState

      • Updating state

      • setState is asynchronous (*)

      • setState accepts a function as its parameter

      • setState is … synchronous?

      • setState accepts a callback

    • Why my setState doesn’t work?

      • setState calls are not guaranteed to be applied immediately.

      • There are two forms of setState: one takes an object, and the other takes a function.

      • If your setState relies on state or props values, you need to use the functional form.

      • Never refer to this.state or this.props inside your setState. Instead use state and props arguments of the setState`s update function.

    • When Should We Use setState() in React?

    • One does not simply “setState”

      • Introducing the setState with callbacks

      • Reusable setState

  • React Context API (v16.3.0+): promise of a better future

  • Hooks!

  • Redux: It just works. And there’s middleware!

    • Redux-thunk, Redux-saga and Redux-observable are useful for working with asynchronous stuff which are less optimal when handled by Redux alone.

  • Unstated: This is so elegant

  • Mobx: The road less traveled

  • Apollo Link State: One query to rule them all?

    • Move Over Redux: Apollo-Client as a State Management Solution

• The React State Museum / GantMan/ReactStateMuseum

  • setState

    • Here’s the most basic structure of state management, it depends only on the fundamental understanding of components and their encapsulation. In many ways, this is a great example for beginners in React.

  • React Context (React 16.x)

  • Redux — by Dan Abramov

  • MobX — by Michel Weststrate

    • MobX is one of the EASIEST state managers to get started with.

  • unstated — by Jamie Kyle

    • Unstated was as easy as MobX

  • MobX-State-Tree — by Michel Weststrate again

    • Todo App with Mobx-State-Tree and ES7 Decorators in React

  • Apollo GraphQL with Amazon AppSync

  • setState + react-automata — by Michele Bertoli

  • Freactal — by Dale while at Formidable

  • ReduxX — by Mikey Stecky-Efantis

  • pure-store — by Arthur Gunn

• Super Simple State Management with Reduxigen: Step by Step

• A different way to manage state in React

  • react-recollect

• No-boilerplate global state management in React (2018.10)

  • reactn

    • The package, named reactn, exports an exact copy of React, except the Component and PureComponent properties extend the originals by adding the global member variable and setGlobal method.

• 4 Different Approaches to Non-Redux Global State Libraries

  • Approach 1: Multiple Contexts

    • This approach is probably the most idiomatic. One could easily implement this approach with React context and useContext.

    • constate

    • unstated-next

      • Here’s A Simpler Alternative to Redux : Using a container metaphor to provide a minimal and modular microservice-esque solution to managing state.

  • Approach 2: Select by Property Names (Or Paths)

    • This approach is to put more values in a single store. A single store allows you to dispatch one action to change multiple values. You specify a property name to get a corresponding value. It’s simple to specify by a name, but somewhat limited in a complex case.

    • react-hooks-global-state

    • shareon

  • Approach 3: Select by Selector Functions

    • Only two lines are changed from the previous code. Selector functions are more flexible than property names. So flexible that they may be misused like doing expensive computations. Most importantly, performance optimization often requires you to keep object referential equality.

    • zustand

    • react-sweet-state

  • Approach 4: State Usage Tracking

    • Notice the state part is changed from the previous code. The dispatch part is not changed. This approach eliminates selector functions, and it’s hardly misused. One big concern is performance optimization. It’s out of the scope of this post, but according to some benchmarks, it’s actually fairly good. Please check out the other post if you are interested.

    • Effortless Render Optimization: Try react-tracked and reactive-react-redux for state usage tracking with React hooks

    • with react-tracked

      • How To Use React-Tracked: React hooks-oriented to-do list with immer

      • React Context and React-Tracked

    • Replacing Redux with React Hooks and Context: A small concrete example with reactive-react-redux

      • Types and reducers

      • Action creators

      • Components

• Avoid React state update warnings on unmounted components

  • setTimeout()

• Leaky Components: Avoiding warnings on unmounted react component

• Effector: powerful and fast 5kb state manager

• React state with a fragmented store

• 
  

Redux

• Redux 入門

• 猴子也能看懂的 React 教學 - 4 - 從 React 走向框架，把後端移到前端

  • React router & Redux

• React 與他的快樂小夥伴 Redux -基礎教學

• React 與他的快樂小夥伴 Redux -事件處理（Handling events）

• How to connect React to Redux — a diagrammatic guide

• Getting Started with React-Redux

• A beginner’s guide to Redux

• How Does Redux Work?

• What Redux looks like under the hood

• Redux Basics

• A beginner’s guide to Redux with React

• The only introduction to Redux (and React-Redux) you’ll ever need

• Intro to Redux (React-Redux).

• Redux For Beginner

  • Redux for Javascript Applications.

  • Redux is a state container

  • Redux is Predictable

  • React-Redux

• Redux Core Concepts You Need to Know: Redux is simple and very powerful

  • Redux makes your life easier by giving you one place to:

    • store your application state.

    • manage your application state.

    • notify interested parties when the application state changes.

  • Redux is based on 3 primary principles.

    • All app data is stored in a single state object called the state or state tree.

    • The state is read-only. It can only be changed by dispatching an action to the store.

    • To describe state changes you must write a function that takes the current state and the action to perform. The function must return a new updated state, not a modified version of the existing state. These functions are called Reducers.

  • Parts of Redux

    • The Store

    • Actions

    • Reducers

• Explaining Redux Through A Side Project

• I created the exact same app with Redux and React. Here are the differences.

  • React ToDo: https://github.com/sunil-sandhu/react-todo-2019

  • Redux ToDo: https://github.com/sunil-sandhu/redux-todo-2019

• Building a Simple CRUD App with React + Redux

  • Part I: Application Architecture and Dependencies

  • Part II: React Router and Container Components

  • Part III: Async Redux

  • Part IV: The Index Feature

  • Part V: The Show Feature

  • Part VI: The Edit Feature

  • Part VII: The Create Feature

  • Part VIII: The Delete Feature

• Full-Stack Redux Tutorial

• My Awesome React/Redux Structure

• Improving Redux Reducers in 3 Ways: With objects, classes, and functional programming

• react-redux-links

  • Getting Started

  • Basic Tutorials

  • Intermediate Concepts

  • Advanced Topics

• 12 Things Not to Do When Building React Apps With Redux

  • Placing Actions and Constants Into One Place

  • Placing Reducers Into One Place

  • Naming Your Variables Poorly

  • Changing the Data/Type Structure Mid-Way

  • Developing Without Using Snippets

  • Ignoring Unit/E2E/Integration Tests

  • Skipping the Brainstorming Phase

  • Not Determining the UI Components Beforehand

  • Not Planning the Data Flow

  • Not Utilizing Accessor Functions

  • Not Controlling the Flow in Props With Destructuring and Spread Attributes

• Long-term React & Redux SPA — Lessons learned

  • Lesson #1: Reducing the Redux boilerplate

  • Lesson #2: Containers on steroids

  • Lesson #3: Handling controlled and uncontrolled inputs

  • Lesson #4: Managing relational data

  • Lesson #5: Error reporting

• How to Setup Redux - Minimize Boilerplate, Speed Up Development

• Redux in React

• Try These Instead of Using Immutable.js With Redux: Try Immer, the Redux Toolkit, Seamless, or no library at all

• One Cool Trick to Simplify Reducer Functions: immer

• Make services a natural part of redux architecture

• Why you should stop using the “container/presentational” pattern in Redux

• 5 Really Good Reasons to Use Redux Over Context

  • It’s Very Hard to Debug

  • It Cannot Be Extended

  • It Does Not Separate Logic From Presentation

  • It is Slow

  • It’s Not Shorter or Easier

• with CRA

  • Setting Up a Redux Project With Create-React-App

  • Use Redux in your React app in just 10 minutes

  • Understanding Redux: The World’s Easiest Guide to Beginning Redux

• Reducing boilerplate in Redux with Redux-Starter-Kit

• React — redux for lazy developers

  • React — redux for lazy developers. Part 1

  • React — redux for lazy developers. Part 2

  • React — redux for lazy developers. Part 3

• Adding Redux to a React Blog

• Why I’m Giving Away a 650 Page Technology Book (Redux)

• Optimistic Updates in React : How to do optimistic updates in React using Redux

  • Install redux-offline and redux-thunk as dependencies

• Progress bar

  • Implementing a React Progress Bar Managed Through Redux

    • react-topbar-progress-indicator

  • Creating a Progress Bar in React

    • Step 1: Create a new component file and set up the appropriate imports.

    • Step 2: Create the progress bar HTML components.

    • Step 3: Calculating the progression.

    • Step 4: Controlling the progress.

    • Step 5: Error handling.

  • Creating a reading progress bar in React

  • React: Loaders, Spinners, and Progress Bars

  • How to Make a Download Progress Indicator in React with Axios

• React-Redux connect(): when and how to use it

• Implementing redux and react-router v4 in your react app (part 2)

  • Setting up a React project from scratch (part 1)

• Demystifying mapStateToProps for beginners to React and Redux

• React: Use Redux To Control Modal Visibility States

• Exploring Alternatives to the Switch Statement in the Redux Reducer

• Reselect

  • Understanding Javascript Selectors With and Without Reselect

  • Increase your React + Redux Application Performance With the Reselect Library: Squeeze more performance out of your React and Redux applications with selectors

    • What Do Selectors Look Like?

    • Adding Reselect library

    • Installing Reselect Library

    • Creating Your First Selector

• Patterns

  • Advanced Redux Patterns: Selectors

  • Advanced Redux Patterns: Normalisation

• State

  • An intro to Redux and how state is updated in a Redux application

  • A better way to organize redux state

• TypeScript

  • Using React with Redux and TypeScript

  • How to Use Typescript with React and Redux

  • Using Redux with TypeScript

  • React-Redux with TypeScript

  • How To Structure Your TypeScript + React + Redux App

  • Typing React (1) — Basic

  • Set Up a Typescript React Redux Project

  • Create a Weather App in React.JS : Learn how to create a weather app using React, Redux, TypeScript and Tailwind.

    • How to create an auto coder pad with React and Tailwind CSS

  • Using React with Redux and TypeScript

  • How to Use Typescript with React and Redux

  • React and Redux with Typescript

  • Functional Reactive Programming with React / Redux / Redux-Observable / TypeScript Strict Mode

  • Getting Started With TypeScript and React Function Components

• Why you should use an object, and not an array, for lists in Redux

• Improve your Redux skills by writing custom middleware

• Using Redux middleware for polling.

• Redux Store

  • Connecting React component to Redux store with render callback

  • Make Redux Store Magic With Some OOP Approach

  • Redux Store Setup for Your React Application

    • The store skeleton

    • Add the first reducer

    • Combine your reducers

    • Middlewares or not middlewares?

    • Finally, the store configuration

• Performance

  • 3 small tips for better Redux performance in a React app

  • Performance Profiling a Redux App

  • Optimize Redux before it kills your Application

• Authetication

  • Using JWT in Your React+Redux App for Authorization

  • React Authentication: How to Store JWT in a Cookie

• Simplifying Redux

  • here’s our implementation of createStore and combineReducers, which cover the most common APIs of Redux

• Asynchronous Redux

  • Asynchronous Redux Without Middlewares — Using ES2017

  • Don’t use async Redux middleware

    • don’t use async Redux middleware: write your own async Redux middleware instead.

  • How I developed a Concurrent Mode friendly library for React Redux

  • Thunk

    • How to implement data polling with React, Redux, and Thunk

    • How to load data in React with redux-thunk, redux-saga, suspense & hooks

    • Redux-Thunk vs Redux-Saga

      • The benefit of Redux-Saga in comparison to Redux-Thunk is that you can avoid callback hell. Also, you can more easily test your asynchronous data flow.

      • Redux-Thunk, however, is great for small projects and for developers who just entered into the React ecosystem.

    • The Fetch API and Asynchronous Redux State

      • redux-thunk

      • fetch-action-creator

    • Organizing Large React Apps: An opinionated tech stack and structure

      • Redux

      • Thunk

      • Reduxsauce

  • CSP vs RxJS: what you don’t know.

    • Redux-Saga

      • Redux Saga | Redux 界的非同步救星 - 基本用法

      • How to Build a Chat Application using React, Redux, Redux-Saga, and Web Sockets

      • Keep calm and race on: a redux-saga case study

      • How to perfectly handle user-interactions with redux-saga

      • The power of Redux-Saga

        • Redux is synchronous

        • Redux Side-effect Middleware (asynchronous)

          • redux-saga

          • redux-thunk

          • redux-observable

          • redux-promise

    • Redux-Observable

      • How to get a new access token using Redux observables and the refresh token API

• Redux替代方案

  • How to Understand Reducers: You Can Use Them Without Redux

  • Simplify Redux Reducers with Lenses

    • Redux 101

    • The Problem

    • Lenses

      • lensPath & lensProp

  • Suspense

    • The Suspense is Killing Redux

  • ReactN

    • Replacing Redux with ReactN to reduce complexity and bundle size

  • I’ve never understood Redux, so I rewrote it.

  • Redux vs. Storeon: An App to App Comparison

  • 5 Alternatives to React Redux in 2020

    • MobX

    • Apollo GraphQL

      • Life Without Redux: Using Apollo for Local State

    • Context API and React Hooks

      • Should You Use React Context over Redux in React Application?

        • When to Use Redux

          • Same piece of data in multiple places

          • Multiple views that need to work with same data in sync

          • Data can be changed by multiple actions/multiple users

        • Using Context in React Application

          • Create Actions

          • Create State

          • Create Reducer

          • Create Context

          • Create Header component

    • Pullstate

    • RxJs

Redux & Hooks

• Hooks (React Redux doc)

• React | 在 Hooks 中以 useContext 與 useReducer 實現 Redux

• React Redux | 小孩子才做選擇！ Hooks 和 Redux 我全都要！

  • React Redux

    • 安裝或更新至 v7.1.0

    • Reducer & Store

  • useSelector

    • Component 不需要再經過 Connect 了！

  • useDispatch

  • useStore

• React Hooks(三)：Redux-React-Hook

  • 所以一直有意見認為React Hooks可以取代Redux，其實是捉錯用神，React Hooks最能夠取代的，其實是react-redux，也就是React與Redux相連的部份。而Redux本身，只是為前端代碼提供結構。情況與React Context很相似，當React Context一推出時，亦有聲音認為Context API將可取代Redux，其實最新版本的Redux，正正是基於Context API所開發，只有將Redux的核心概念，包括action、reducer、state等概念引入React，才可以真正取代Redux。

• Stop Asking if React Hooks Replace Redux

  • Redux is and has always been optional!

  • React hooks and Redux aren’t trying to solve the same problems!

    • Redux is a state management library. Hooks are part of a recent update to React and let you write functional components that do everything you used to need a class component to do.

    • React hooks were developed for three main reasons:

      • It’s difficult to reuse logic between class components.

      • Lifecycle methods often contain a confusing mix of unrelated logic.

      • Classes can be difficult for both machines (and humans) to understand.

    • That being said, React hooks do give you a few new options for managing application state. Notably, the methods useState, useReducer, and useContext give you new ways to maintain your state that are arguably better and more organized than the options React gave us before hooks.

  • React hooks don’t let your React app do anything it couldn’t do before!

  • React-Redux has its own hooks, too!

    • Clean Up Redux Code with React-Redux Hooks

      • useSelector

      • useDispatch

    • Redux Hooks in React: An Introduction

      • Understanding the useSelector Hook

      • Dispatching actions with useDispatch hook

      • Other Redux Hooks

  • There’s no need to frame React hooks and Redux as technologies in competition.

• How I Eliminated Redux Boilerplate with Hooks-for-Redux

• Refactoring Redux into React Hooks: Redux is awesome and you could still use it. But do you need it for all your features?

  • use Hooks

    • useSelector

  • Use context to deliver one change to multiple consumers

• Add Redux to Your React App with React Hooks

Suspense (React v16.6)

• Suspense is all you need

• How to Use React.lazy (16.6.0 released on 2018/10/23)

• React lazy, Suspense and Concurrent React Breakdown with Examples

• How to use React.lazy and Suspense for components lazy loading

• Lazy Loading React Components (with react.lazy and suspense)

• Infinite component scrolling with React.lazy and IntersectionObserver

• Lazy Loading In React

• How to optimize React applications with Lazy Loading

• Things you must know about React JS | Custom hooks/Lazy Loading /HOCs

• Creating a Lazy React Components Provider

  • In this story we’ve seen how to use a couple of React’s tools (useMemo and lazy/Suspense) to enhance our components provider and make it more suitable for production use.

• Lazy-Loading React Components : Optimize production builds with code splitting

  • The React.lazy function lets you render a dynamic import as a regular component.

  • By wrapping the lazy-loaded components in Suspense, we can show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

• React Suspense with the Fetch API

• React Experiments With Suspense for Data Fetching in Concurrent Mode

• Everything You Need to Know About React Concurrent Mode in 2020

• A Quick Walkthrough of SuspenseList in React

• Understanding the Execution Models of async JavaScript and React

  • Async/Await

    • Function Calls

    • Callbacks

    • Promises

      • Mastering Promise.allSettled in React

    • Async/Await

    • Generators

  • React

    • Fibers

    • Work Loop

    • Reconciliation

    • Suspense

  • Fibers vs Generators

• Diving Into React Suspense Render-as-You-Fetch for REST APIs: A replacement for useEffect-based data fetching

• React Suspense: Bringing a Bit of Hitchcock to UI Performance

• Fetching Asynchronous Data with React Suspense

• useSWR — My New Favorite React Library: Make the hard things easy with React’s best data fetching library

• React Suspense & Concurrent Mode

• A Fundamental Guide To React Suspense : The suspense is finally over with React 18

• Code splitting

  • Code Splitting For React Developers

  • A Gentle Introduction to Code Splitting with React

    • Route level splitting

    • Component level splitting

  • You definitely should be using Suspense in React — code splitting and preloading

  • Code-Split Your React App With Lazy and Suspense : Optimize app performance by splitting components, routes, and libraries

  • React.js —Code Splitting with React.lazy and Suspense

  • Code Splitting in React apps with Suspense

  • How to Reduce React App Loading Time By 70%

    • The best place to introduce code splitting is in routes. Route-based code-splitting solve half of the issues. But most of the apps are utilizing only 50% of the advantages of code splitting.

React Context (16.3)

React Hooks (16.8)

React + REST

Server-side rendering

• Server-side vs client-side rendering in React apps

• Progressive Rendering for Better Web App Performance

  • Progressive Server-Side Rendering

• 一看就懂的 React Server Rendering（Isomorphic JavaScript）入門教學

  • 本章闡述了Web 頁面瀏覽的進程和 Isomorphic JavaScript 的優勢，並介紹了如何使用 React Redux 進行 Server Side Rendering 的應用程式設計。

• Say goodby to Server Side Rendering. Prerender.io — SPAs with SEO in mind.

  • Prerender.io

• Why you should render React on the server side

  • Next.js

    • Next.js (SSR) vs. Create React App (CSR)

    • Next.js for Server-Side Rendering

      • Server-rendered by default

      • Automatic code splitting for faster page loads

      • Simple client-side routing (page based)

      • Webpack-based dev environment which supports Hot Module Replacement(HMR)

      • Able to implement with Express or any other Node.js HTTP server

      • Customizable with your own Babel and Webpack configurations

    • Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation

      • NextJS offers the best of both worlds, by allowing us to build hybrid applications that leverage both server-side rendering and static site generation.

    • Next.js for React: Why You Should Give It a Try Right Now

    • Which To Choose in 2020: NextJS or Gatsby?

      • And with the release of NextJS 9.3, you can add static site generation to its list of features.

    • Will Next.js Take Over Gatsby?

      • Also, you can easily combine static site generation and server-side rendering in Next.js to get the best outcome. For example, for an ecommerce site, you can statically render pages that don’t change very often, like your contact page, shipping information, or post blogs. You can server-render pages that change, like your product pages.

    • How To Disable SSR for a NextJS Page : How to render your components only on the client-side

    • Next.js Firebase authentication— Including SSR

    • How to Set Up Next.js With Tailwind CSS

    • How To Import SVGs into NextJS

    • How to Implement Netlify CMS With Next.js

    • Using NextJS with Google Analytics and TypeScript

    • Letters From the Dark World of React Boilerplate : Introducing ReacType, a prototyping tool that allows you to create the entire skeleton of a Next.js or classic React application in minutes **

    • Let’s Create: Blog App With Next.js, React Hooks, and Firebase Backend Tutorial

    • Next X React

    • What’s New in Next.js V10?

    • What’s New In NextJS 10 : Internationalization, image optimization and so much more

    • 8 Simple Steps: Set Up a Project With Tailwind CSS, Next.js 10, and PurgeCSS

  • Razzle

  • Gatsby

• Create a killer Frontend for 2020 | How to setup Next.js, Apollo GraphQL, TypeScript, Styled Components and Server side rendering in 4 simple Steps

  • Step One: Setup Next.js

  • Step Two: Add TypeScript

  • Step Three: Setup Styled Components

  • Step Four: Setup Apollo GraphQL

Static Site Generators

• 8 React Static Site Generators for 2019

  • Gatsby

  • React static

  • Next.js

  • Cuttlebelle

  • Jekyll with React

  • Hugo inside a React app

  • Phenomic

  • Antwar

• Gatsby

  • 使用 Gatsby 快速打造靜態 MD Blog (by 簡立學長)

  • Gatsby — Static Site Generator For React — Introduction

  • Why you should use GatsbyJS to build static sites

  • How to leverage your React skills with static site generator Gatsby.js

  • How to get started with Gatsby 2 and Redux

  • How to create a searchable log with Gatsby

  • Give Your Existing Website A New Lease of Life with Gatsby

  • Styling Gatsby. What should I use? : Deciding between PostCSS, styled-components and emotion

    • Gatsby is easy to use with styled-components, emotion and PostCSS

  • Optimize GatsbyJS Site Performance With Netlify

  • Build a Kick-Ass, Blazingly Fast Data Science Portfolio With GatsbyJS and Netlify

  • Why you should use Gatsby to empower your website

  • Building an eCommerce site with Gatsby, Contentful and Snipcart

  • The difference between create-react-app, server-side rendering, and Gatsby

    • create-react-app

      • react-scripts is a collection of tooling for your React application. It comes with its own development server and build configuration. This build will generate static assets for client-side rendering; but it does not support server-side rendering, and it is not the same as the way Gatsby renders.

    • Server-side rendering

      • Server-side rendering (often abbreviated SSR) takes the requested URL sent to the server, builds the HTML on the server, then sends you the finalized HTML and the JS bundle. The JS bundle will allow you to build the other pages without re-requesting from the server.

    • Gatsby

      • Gatsby is a React build tool that uses “server-side” rendering to build every page up front. When your customers request a page, your server does not need to build it — it has already been built. The customer just receives the static file that was generated whenever you built your Gatsby project.

  • Which To Choose in 2020: NextJS or Gatsby

    • Now that NextJS supports next-generation static site rendering, I recommend using it instead of Gatsby.

  • Learn Gatsby by Building Your Own Blog Website

  • Why Frontend Developers Choose Gatsby Over Traditional CMS

  • From Jekyll to Gatsby: 7 Simple Steps

  • Build A Portfolio Website With React and Gatsby.js

Infrastructure-components

• Infrastrucure-components

• Infrastructure-Components

• How to Create and Deploy a Serverless React App

• How to Create a Navigation Bar With React-Router, Styled-Components, And Infrastructure-Components

  • infrastructure-components

    • Environment, Route, SinglePageApp

    • IRoute, withRoute

• Do You Like React? Then Why Don’t You Configure Your Infrastructure With It?

  • Have you ever thought about the reasons why you like React?

    • React is declarative

    • Imperative programming and side-effects

    • React components reduce side-effects

  • Now, let’s look at how you configure your Serverless web-app

  • Architecture-as-a-Function to the Rescue

    • Infrastructure-Components

• How to “useState” in an Isomorphic React App

  • The “useIsomorphicState“-hook lets you easily share the state between the server and the client in an isomorphic React app

• Why Don’t You Use Server-Side-Rendering in Your React App?

  • Infrastructure-Components let you create, start, and deploy a Serverless Isomorphic React App easily

• Why Would You Implement A Backend For Your React App?

• Your React App Is a Mess Before You Even Know It: This is how you separate infrastructure, content, style, layout, and state from each other.

  • Infrastructure-Components

  • Styled-Components

  • React-redux

API

• Proxying APIs with Netlify Functions: How to use private APIs without exposing your private keys

• How to Hide Your API Keys

  • HTML: Setting Restrictions on the API Key

  • Front End: Hide Your Keys (React)

  • Back End: Protecting API Keys on Rails

  • Deployment: Hiding API Keys on Heroku

  • Deployment: Hiding API Keys on Netlify

• Centralizing API error handling in React apps

• Feedback

  • Start Collecting Feedback from Users across Your React Apps with Feeder.sh : Using the feeder-react-feedback library to start collecting user feedback across React apps in under 5 minutes

• Notification

  • Adding Notifications to your React Website

    • Push API

    • Voluntary Application Server Identification (VAPID)

  • React Notifications Without Dependencies

• Voice

  • How to Control Your React App With Your Voice : Build voice-activated interfaces using the Chrome Speech Recognition API / react-speech-recognition

Airtable

fetch

• Airtable and React: Create a Simple Web App

• Airtable As A Minimum Viable Database For Your ReactJs Project

Airtable package

• Getting to Grips with the Airtable API

• Lessons from CodeSandbox: Send User Feedback to Airtable using React

Django

• Creating websites using React and Django REST Framework

Firebase

• React and Firebase are all you need to host your web apps

• How to Integrate React Redux and Firebase in 3 Simple Steps

• The easiest way (by far!) to build a real React + Firebase web app (with react studio + firestore)

• Firebase + React : Optimizing For The Real World

  • Switching to Preact

  • Using Bundle Analyser

  • WebPack Configuration

  • Cloud Functions

  • PureComponent

  • Network Logs

    • Cloud functions on Firebase is not production ready at this moment.

    • Finally, I ended up using the Firebase REST API directly.

• Deploy React.js app on Firebase

• Testing React + Firebase Apps With Cypress

• How I built a real-time chat app using React and Firebase

• How to build a real-time chatroom with Firebase and React (Hooks)

• Understanding “Chat” Functionality with Firebase

• Building a Serverless React App on Firebase Functions

• How to Deploy a React App with Firebase Hosting

  • Install Firebase Tools

  • Login to Firebase

  • Initialize Firebase in Your React App

  • Auto-Generated Configuration Files

  • Deploying Your App

• How to Use Google Firebase Hosting Service Create a React Progressing Web App (by 簡立學長)

• Hosting your React.js and Node.js Apps for Free with Firebase

• Create Feature Flags For Your React App with Firebase Remote Config

Authetication

• Simple Email and Google Auth with React and Firebase (with Hooks)

• Simple Email and Google Auth with React and Firebase — Part II (with Hooks)

• Authentication is hard. Let Google handle it for you.

  • Firebase Authentication

• Adding a user authentication flow into a react frontend with firebase

• Adding Authentication To React Redux Firebase App

• Authentication in SPA (ReactJS and VueJS) the right way

  • Security prerequisites

    • Encrypted communication (httpS)

    • Do not use URL query parameters to exchange sensitive data

    • Prevent brute-force attacks

    • Update your dependencies on a regular basis

    • Add monitoring

  • Authentication

    • Bearer Token

    • Authentication cookie

      • Session cookies

      • Permanent cookies

• Authentication in React with Firebase

Google

Google Analytics

• Using Google Analytics with React

Google Map

• Using the Google Maps JavaScript API in a React Project

• Integrating Google Maps to your React Application!

Google Sign-In

• Passwordless Sign-In With Google’s One Tap for Web with Google Sign-In library

Google Spreadsheet

• How To Fetch Data From Google Sheets with React and Tabletop.js

Hot reload

• What is React Fast Refresh?

SEO

• How To Boost the SEO of Your React App

  • The Problems With React

    • Problem 1: Single URL for all pages

    • Problem 2: Single meta tag

    • Problem 3: All is JavaScript

  • If you really care about SEO, then you should consider building an isomorphic application.

    • Next.js and Gatsby are two great options to consider for this purpose.

  • But I Don’t Want To Use Anything Else

    • Step 1: Solving the single-URL problem

      • There is an awesome library named react-router that helps us to render content based on a URL.

    • Step 2: Solving the meta tag problem

      • Now we will use another great library named react-helmet.

    • Step 3: Solving the JavaScript problem

      • For this, we can use a service named Prerender.io.

• ReactHelmet | Enhance the SEO of your React App

• Easily Generate Meta Tags for Your React App (with react-helmet)

Table

• Introducing react-use-database: client-side relational data just got easier

• How to Build a Table With Filter/Pagination Without 3rd Party Libraries

• How To Create Responsive Tables With Flexbox and React

• React Table

  • An Introduction to React-Table : A utility belt for lightweight, fast, and extendable data grids

  • How to Build Awesome Tables With React Table

  • React Table: The Headless Table Library for React

    • 
      

Security

• 3 Security Pitfalls Every React Developer Should Know

  • Pitfall #1: Server-Side Rendering Attacker-Controlled Initial State

  • Pitfall #2: Sneaky Links

  • Pitfall #3: Misunderstanding What it Means to Dangerously Set

• Protecting Against XSS Attacks in React

Tips & Experiences

• How To Write Better Code In React

• Write Better Code in React

• Mistakes

  • The Most Common Mistakes When Using React

  • Top 10 Mistakes to Avoid When Using React

  • React Antipatterns to Avoid

    • bind() and Functions in Components

    • Missing key Prop or Using indexes in key Prop

    • Components Name

      • Component names have to begin with a capital letter

    • Close Every Element

  • React antipatterns to avoid

    • Putting everything in Redux

    • Storing everything as a state

    • Passing props using spread operator everywhere

    • Declaring components inside of components

    • Passing too much information to components

    • Overoptimizing performance

    • Huge component trees

  • Mistakes I made while using React for the first few years

    • "history of undefined” ERROR

    • "Expected an assignment or function call and instead saw an expression” ERROR

    • "Error: Invariant failed: You should not use <Switch> outside a <Router>” ERROR

    • "Parsing error: Lexical declaration cannot appear in a single-statement context"

    • Higher-order component (HOC) ERROR

  • Mistakes Junior React Developers Make

    • Direct DOM manipulation

    • Forgetting to clean up after yourself

    • Not testing (or not testing enough)

    • Not understanding Webpack

  • Top 5 React Mistakes Web Developers Make

• 5 common practices that you can stop doing in React

• 8 Miraculous Ways to Bolster Your React Apps

  • Love Your Identities

    • It’s important to remember that you can wrap variables and functions with React.useMemo as you can grant them the ability to memoize themselves so that React knows they remain identical for future renders.

  • Merge Props to Children

  • Combine Reducers for a Gargantuan Reducer

  • Sentry for Error Reports

  • Use axios Over window.fetch

  • Use Callback Refs Over Object Refs When Watching DOM Nodes

  • useWhyDidYouUpdate

  • Make Your Functions Find You

• 4 things you might not know you can do in React

  • Forcing a component remount using key property

  • Passing components as props

  • Functional updates using useState

  • Lazy state initialization

• 8 Useful Tricks for React Apps You Should Know

  • Create React Elements With Strings

  • Use Error Boundaries

  • Retain Previous Values

  • Use React.useRef for Flexible Non-Stale Value Checks

  • Use React.useRef for Customizing Elements That Depend on Other Elements

  • Higher-Order Components

  • Render Props

  • Memoize

• 8 React Tips & Tricks

  • React can assign keys to your children, no need to think of creative ways to come up with them

  • Fragment shorthand

  • Keep components small

  • Omitting a prop value defaults to true

  • Keep your prop names simple

  • You don’t need super() in your constructor

  • Keep your logic out of your JSX

  • Functional components can be called as functions

• React — 5 Things That Might Surprise You

  • Setting the state by using the previous state is unpredictable.

  • You can use useRef to store a static variable

  • React can be forced to re-mount a component

  • Context doesn’t work the way you would expect it to

    • When used for recurring or complex updates, it’s not that efficient

  • React has a whole API to deal with the children prop

• The Three Best React Icon Libraries

  • React Icons

  • Styled Icons

  • React Feather

• Lessons learned

  • What I learned from 2 years with JavaScript and React

  • The most important lessons I’ve learned after a year of working with React

  • What I wish I knew when I started to work with React.js

  • How I started with React — challenges and lessons

  • 10 Things Not to Do When Building React Applications

    • Spending Too Much Time in Your Own Private World

    • Using .bind (Not Class Component Constructors)

    • Passing Dynamic Values as Keys to Children

    • Declaring Default Parameters Over Null

    • Leaving Repetitive Code Untouched

    • Initializing Props in the Constructor

    • Conditional Rendering With &&

    • Not Spreading Previous States

    • Not Explicitly Passing Down Props to Child Components

    • Prop Drilling

  • Eight Practices in React That Will Crash Your App in the Future

    • Declaring default parameters over null

    • Grabbing properties with square brackets

    • Carelessly checking empty objects when rendering

    • Carelessly checking if arrays exist before rendering

    • Not using a linter

    • Destructuring when rendering lists

    • Not researching enough about what you’re going to implement

    • Not restricting the sizes of file inputs

• Advantages of Developing Modern Web apps with React.js

• 5 Examples of React Applications Build on Open-Source Media APIs

• Visualization

  • Advanced Visualization with react-vis

  • How to get started with D3 and React

  • How to create velocity based animations in React

• 5 DRY Principles To Follow In React

• 8 Best Practices Every React Developer Should Follow

• React Best Practices (and Checklist)

  • Maintain an Organized Folder Structure

  • Components — Chunks & Trees. Hey, you’re a Javascript Lumberjack!

  • Components — Functional and Class-Based

  • Props! Props to you! Props to me! But no, we’re talking React Props!

• 5 best practices for writing better React code

  • Use functional components

  • Use small components and separate your functionalities

  • Use JavaScript destructuring to remove redundancy

  • Use prop-types library (if you’re not using TypeScript/Flow)

  • Use React developer tools

• 8 React Best Practices Every Web Developer Should Follow

• 10 Best Practices for React Developers

• How I Code When I Work With React

  • Think Always in Functions

  • Naming Functions

  • Don’t Mount and Unmount Repeatedly

  • No More than 10 Functions Within a Component

  • If It Doesn’t Change, Just Created It Once and Reuse It

  • Divide and Conquer

  • Check Your Prop Types

  • My Very Personal One, My TOC: Cascading Descending

• How to Build an E-commerce Search UI with React and Elasticsearch

• Clean Code

  • JavaScript code cleanup: how you can refactor to use Classes (in react)

  • 14 Beneficial Tips to Write Cleaner Code in React Apps

    • Destructure Your Props

    • Folderize Your Components

    • Use Standard Naming Conventions

    • Avoid the Boolean Trap

    • Use Fat-Arrow Functions

    • Put Independent Functions Outside of Your Custom Hooks

    • Stay Consistent

      • Imports and exports.

      • Naming components, hooks, HOC’s, classNames.

    • Componentize Duplicate Elements

    • Keep Your Components Simple

    • Use useReducer If useState Becomes Complex

    • Use Function Declaration in Dull Areas

    • Use Prettier

    • Use Small Fragment Over Large Fragment

    • Put Things in Order

  • Writing Clean React Code

    • Make React Components as Short as Possible

    • Components Which are at the Same Level of Abstraction Should be Together

    • Reduce the Number of Props to a Minimum

  • React Clean Code

  • 7 Ways to Write Cleaner React Code Today

  • 21 Best Practices for a Clean React Project

• SOLID

  • How To Apply SOLID Principles To Clean Your Code in React : A look at the single-responsibility principle (SRP) in action

  • Applying the Open-Closed Principle To Write Clean React Components

  • Applying the Liskov Substitution Principle in React

  • Apply the Dependency Inversion Principle in React

  • How to Apply Interface Segregation Principle in ReactJS

• How to build a React.js chat app in 10 minutes

• How to Make a Fake Chat Bot With React

• Electron

  • Learn to build your own desktop chat app with React and Electron, one step at a time

  • Create Your First React Desktop Application in Electron With Hot-Reload

  • Extend Your React Electron Desktop App With TypeScript

  • Bye Bye Promises, Hola Observables and RxJS

    • Electron, Material-UI

  • How to Build Desktop Applications the Right Way Using Electron

• Authentication

  • React Authentication with Twitter, Google, Facebook and Github

  • Securing React Applications with Auth0

• React.js Commonly Faced Problems

• Pointer events with React — The why, how, and what?

• Building a developer portfolio with React, Cosmic JS, and Semantic-UI

• Implementing your Custom CSS Loader Component with React Player

• Validation

  • An Introduction to Validation in React with Yup

• Internationalization

  • Internationalization in Angular and React Applications — A Comparison

    • Setting a Goal

    • Understanding terminology

    • Implementing Internationalization in Angular applications

    • Implementing Internationalization in React applications

    • Caveats and Comparison

  • Learn I18N and How to Use it in React Project : Internationalization and Localization

    • The basic concept of i18next

      • Step1: Create JSON files

      • Step2: Inject i18n into the project

      • Step3: Use useTranslation hook (For FC component)

  • How to Add react-i18next to Your React app

• Why you should learn React instead of Angular

  • React Gives You Freedom

  • React Uses the Virtual DOM

  • React is in Demand

• Todo App with Mobx-State-Tree and ES7 Decorators in React

• How to create a three layer application with React

• Integrate React with other applications and frameworks

• Setting up a large scale React application

• 6 Tips and Best Practices for a Scalable React Project

  • Learn how to organize state between local and global state

  • Learn the benefits of testing and do it from the start

  • Adopt tools to help you scale

  • Organize your project files well

  • Build your UI/logic component library

  • Decouple your logic from your component with hooks

• CI

  • How To Setup Continuous Integration (CI) With React, CircleCI, and GitHub

• Github pages

  • How to write a simple React search plugin, publish it to npm, and deploy it to Github pages

  • Seeking a Simple Path in a Complex Forest: Deploying a React App to GitHub Pages

  • Hosting a React App for Free using Github Pages

  • How to: Deploy a Vue, React SPA with Travis CI and GitHub Pages

• Email

  • Email Confirmation with React

  • How to create email chips in pure React

  • How to Run an Email Server on React.js with EmailJS

• Uploading Files in React While Keeping The UI Completely In Sync

• Building a React Autocomplete Component from scratch

• Creating Real-Time Autocompletion With React: The Complete Guide

• A detailed tutorial: how to use Shopify’s Storefront API with React and Redux

• Rethinking Separation of Concerns with React

• Countdown

  • Building Timers in React: Stopwatch and Countdown

  • How to create a Countdown component using React & MomentJS

• How We Moved From Wordpress to React and Raised $80 Million

  • Culture Trip’s website used to be a WordPress site. Now it’s a flexible, universal (isomorphic) JavaScript App powered by Next.js, React, MobX and Styled-Components on the front-end that uses WordPress as a semi-headless CMS.

• Simple Beds: Building an Airbnb like search app with ReactiveSearch

  • Component#1: ReactiveBase

  • Component#2: NumberBox

  • Component#3: DateRange

  • Component#4: RangeSlider

  • Component#5: ResultCard

• Folder structure

  • Structuring projects and naming components in React

  • Folder Structure in React Apps

  • Choosing the best folder structure for your React application

  • How I structure my React apps (with Redux)

  • How to structure your react app

  • Creating an Organized React App

  • Use Absolute Paths with React

    • It can be done using a Revolver — a library that helps in locating a module by its absolute path.

  • Structuring React Components for Easy Imports

    • this technique is called barreling

  • Organising Your React Application

    • Best practices for components usage

      • Component files naming

      • Components naming

      • Container component naming

      • AVOID creating components with dependent state on props — except initial values

        • React component — setState()

      • AVOID Creating new references in render() — use handler functions

        • How to write event handler functions to avoid new references

      • Use React.PureComponent and React.memo

      • Avoid default export

      • Use an index file to re-export your components

    • The awaited structure

      • Core

      • SharedComponents

      • Main index.tsx

      • Pages

  • A Simple Approach to File Structures in React Apps

  • An Opinionated Guide to React Folder Structure and File Naming

  • 2 Simple and Effective React File Naming Convention Tips

    • Match your component-related files with the component name

    • Name non-component files based on what they are or do

  • How You Should Structure Your React Applications

  • A directory structure for React projects

  • How I structure React apps

  • 2 Best Practices For React File Structures

    • Tip 1: Use This Versatile Folder Structure

      • Under the src folder, we have child folders for assets, components, and utility functions.

    • Tip 2: Take Advantage Of Webpack For Indexing Files

  • Finally a better react.js folder structure

• Structure

  • Taking decisions to structure big projects with Hooks, Stores, Services and more…

    • Choosing a files naming convention

    • Structuring Files and Folders

    • The layers that we have to work with components in our projects

    • How to connect all these layers?

• Performance

  • 3 Ways to Analyze React Performance with Reactime

    • State Snapshots & Time-Traveling Feature

    • A/B Testing your App’s Performance Using “Save Series” Feature

    • Proven Metrics to Further Analyze Your App

  • What time is it? Reactime!

    • Reactime is a performance tool that serves as a one-stop shop for state management debugging and optimization.

  • Cache your React event listeners to improve performance.

  • React is Slow, React is Fast: Optimizing React Apps in Practice

    • Cutting Components To Optimize Them

    • Recompose

    • Redux

    • Reselect

    • Beware of Object Literals in JSX

  • 7 Hacks to Optimize Your React app

  • What to do when your React app feels slow

  • Simple Ways To Speed Up Your React App

    • Use keys!

      • If you miss keys, or, even worse, make them not unique, not only your app will perform slow, but it may lead to some frustrating bugs.

    • Use virtualized lists!

    • Use React profiler!

    • Use useMemo!

    • Use React Concurrent Mode?

  • Optimizing React Performance

    • Mitigate Common Performance Issues

      • Avoiding Reconciliation

      • Evaluate Prop Passing

      • shouldComponentUpdate (class component)

      • React.PureComponent (class component)

      • React.memo (functional component)

      • Virtualizing Long Lists

  • Optimizing React App Performance

    • Virtual DOM and Reconciliation

    • Profiling

    • Optimizing the Components

  • How to identify and resolve wasted renders in React

    • Using shouldComponentUpdate method

    • Using pure components & React.memo

    • Making Data Immutable

    • Avoid passing a new reference for the same old data

  • Making stupid React smart in re-rendering

    • Takeaway 1: Parent component pretty much does not care about its children

    • Takeaway 2: use the children prop

    • Takeaway 3: use React.memo (functional component)

    • Takeaway 4: Use PureComponent/shouldComponentUpdate (class component)

    • Takeaway 5: Deal with functions from props when comparing

      • Then how can we deal with functions in props? Well, there are two ways:

        • Exclude them

        • Stringify them

  • These Tips Will Boost Your React Code Performance

    • React.memo

    • React.PureComponent

    • ComponentDidCatch(error, info) {} Lifecycle Method

    • React.lazy: Code-Splitting with Suspense

    • React.Fragments to Avoid Additional HTML Element Wrappers

  • React Performance Improvement

    • Tips to Speed Up React Apps

      • Use React.PureComponents

      • Implement Immutable Data Structures

      • Take Out Unnecessary Source Code

      • Use Constant and Inline Elements

      • Get Chunky

      • Use Gzip or Brotli Compression

      • Use Eslint-plugin-react

      • Invoke High Order Components

      • Use Connect()

    • How to Optimize React: Tools to Speed Up React

      • why-did-you-update

      • React Developer Tools

      • The Chrome DevTools Performance Timeline

  • Improve React Performance: By eliminating unnecessary renders

    • Pre-Optimization — Don’t Abuse Keys!

    • Optimization — Use PureComponent

    • Optimization— ShouldComponentUpdate

  • Easily Improve the Performance of your React App: Understand what PureComponents are and how to use them to improve your React apps

    • React.PureComponent is similar to React.Component. The difference between them is that, React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

    • If your component is a functional component, you can use React.memo method by passing the component to it which will give the same result as PureComponent

  • React. 5 tricks to improve the performance of your applications

    • Lazy Loading

    • React.memo and useMemo()

    • useCallback

    • Reselect

    • Virtualized lists

      • How To Improve Rendering Performance in a 1,000-Item React List : with react-virtualized

      • Virtualized Rendering From Scratch in React : without react-virtualized

  • Advanced React Optimization Techniques

    • React.memo

    • useCallback

  • Exploring Caching Techniques in React : How to use memoization, contexts, useMemo, useState, and useEffect

  • Performance Optimization Techniques In React

    • Use the Production Build

    • Bundling and Minification

    • Don’t use an array index as the key when using .map()

    • Spreading props on DOM elements

    • Update Components Only When Necessary and Required

    • Immutable Data Structures

  • Performance Optimization Techniques In React

    • Using Chrome Performance Tab to track events

    • Avoiding Props in Initial States

    • Function Binding

    • Remove Unnecessary Source Code and Keeping it Simple

    • Eslint-plugin-react

    • Gzip compression

    • Use connect()

    • Dependencies Optimization

    • Windowing Technique

  • 10 Ways to Optimize Your React App’s Performance

    • useMemo()

    • Virtualize long lists

    • React.PureComponent

    • Caching functions

    • Using reselect selectors

    • Web worker

    • Lazy loading

    • React.memo()

    • useCallback()

    • shouldComponentUpdate()

  • 5 Recommended Tools for Optimizing Performance in ReactJS

    • <Profiler />

    • React Developer tools

    • Bit.dev

    • why-did-you-render

    • Performance timeline (Browser profiling)

  • React Performance Optimisations

    • What is Re-rendering?

    • Using React Profiler to Identify Slow Commits

    • Resolving Unnecessary Re-Rendering with useMemo

  • 10 Tips and Tricks to Boost Your React App’s Performance in 2020

  • 5 Simple Ways to Boost Your React Web App Performance

    • Avoid Using Anonymous Functions

    • Avoid Using Inline Styling

    • Use React Virtualized for Displaying Large Data

    • Use PureComponent

    • Use React.Fragments

  • Tips to Improve your React App’s Performance

  • 6 Optimization Techniques For React Applications

  • Journey of Improving React App Performance by 10x

    • Remove all Inline Functions

    • Avoid modifying the state if there is no change in state from your Redux store

    • Conditional rendering of the components

    • Remove unnecessary awaits and use Promise.all() wherever applicable

  • Memoization

    • Improve Performance in React.js Using Hooks: Understanding the power of useCallback and useMemo

    • Boost Performance of Your React App With Memoization

      • React.memo()

      • useMemo Hook

  • Records and Tuples will change how React developers write code

    • A great tool for React developers

      • Immutability

      • Example with useMemo

      • Example with useEffect

  • 【React】React Performance

  • React App Performance Optimization: The Definitive Guide

  • Improving slow mounts in React apps

• Git

  • Using Pre-Commit and Pre-Push Git Hooks in a React Project

• Deployment

  • Tutorial: how to deploy a production React app to Heroku

  • How to deploy a React application to Netlify

  • Follow these steps to build production-grade workflow with Docker and React

  • An example CI/CD Process for React Apps with Docker :Using GitHub and CircleCI to build React/NGINX Docker images ready for shipping to production

  • Here’s How You Can Use Docker With React

  • Production-Ready React With Docker and Travis CI

  • A Guide to Deploying your React App with AWS S3

  • Deploying and Hosting a React App on an Apache Server

• Accessibility

  • Achieving Accessibility in React Applications

  • Creating Accessible React Apps — Mouse Events and Other Things

    • eslint-plugin-jsx-a11y

• How to plan and organize a React project — by building a weather app

  • Planning our application

    • Create a mockup

    • Break the UI into components

    • Arrange all components in a hierarchy

    • Define where state should live

  • Organizing our project

    • Folder structure

    • Class-based vs. functional components

      • If your class-based component only has a render method, make it a functional component.

    • CSS modules

  • Building the application

    • Build a static version of your application

    • Identify and implement the minimal state your app needs

    • Add functions to mutate state and thus make the UI interactive

Styled Components

• Getting the Most Out of Styled Components (7 Must Know Features)

  • Passing Props

    • How to use React.js props with styled-components

  • Auto Vendor Prefixing

  • Extend styles

  • Dynamically changing elements

  • Themes

  • Global styles

  • Referencing components inside CSS

• Styled-Components — Mastering the Fundamentals Through Practice

• Styled Components: Hip, Cool, Stylish

• JavaScript Template Literals and styled-components (ES6)

  • Tagged Templates

  • Using Tagged Templates

  • Styled HTML elements

  • Styled React components

• Building a Reusable Component System with React.js and styled-components

• Building a React component library with styled-components: Input Field

• Theming in React with Styled Components

• Advanced ways to write styled-components

• Saas

  • Theming with React and Sass

  • How to Use Sass and Styled Components in a React JS Application

  • How I Theme My React App With Sass And with the power of mixins

• Using Styled Components and Flow with Create React App

• 9 React Styled-Components UI Libraries for 2018

  • Rebass

  • Zendesk’s Garden React components

  • Atlaskit

  • Grommet V2

  • Smooth-UI

  • Reactackle

  • Reakit

  • React CSS loaders and Styled loaders

  • Styled icons

• Build a Reusable Responsive Card Component with Styled-Components

• Better Reusable React Components with the Overrides Pattern

• Your React App Is a Mess Before You Even Know It: This is how you separate infrastructure, content, style, layout, and state from each other.

  • Infrastructure-Components

  • Styled-Components

  • React-redux

• Create a Responsive Grid With React, Flexbox & Styled-Components

• Make a Flexbox React Component

• 7 tricks to work with Styled Components

  • Use of the Context API

  • Change a styled component type

  • Reference elements within the styled component

  • Reference other styled components

  • Extend styled components

  • Define dynamic properties

  • Pass attributes

• Styled Components, Styled Systems and How They Work

• React Styled Components — Hooks, Refs, and Security

• How to Create Custom Tabbed Card with React, Styled-Component

• React styling made easy with Styled Components

• Styled Components vs CSS / SASS / CSS-In-JSX