/
📝

React-A JS library for building user interfaces.

https://reactjs.org/
reactjavascriptuieslintnodejs
On this page
Latest Version

Guidelines

Cheat Sheet

Migrate an entire project to TypeScript

zsh
npx -p ts-migrate -c "ts-migrate-full ."

Resources

Performance

General

  • Lazy load images
html
<img src="/earth.jpeg" loading="lazy" />
  • Lazy load all your routes
jsx
const Home = React.lazy(() => import("../component/Home"));
  • React Bits: A compilation of React Patterns, techniques, tips and tricks.
  • Classnames: a simple JavaScript utility for conditionally joining classNames together.
  • immutable: provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.
  • normalizr: a small, but powerful utility for taking JSON with a schema definition and returning nested entities with their IDs, gathered in dictionaries.

Framework

  • Create React App: a tool to bootstrap a new React frontend project with no build configuration
  • next.js: an open-source React front-end development web framework for production.
  • react-boilerplate: a highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
  • Blitz: the Fullstack React Framework — built on Next.js. Blitz adds all the missing features and functionality that turns Next into a true fullstack framework. These key features include direct database access, middleware, and authentication.
  • React Starter Kit: an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync.
  • Relay Fullstack: a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools.
  • React Enterprise Starter Kit: a Highly Scalable, performant and amazing react boilerplate for react developers to get started and improve web building capabilities.

UI

  • LIGHT CHASER: a data visualization designer for large screens
  • Bit: A tool for component-driven application development.
  • react-beautiful-dnd: a beautiful and accessible drag and drop for lists with React.
  • React-Grid-Layout: a draggable and resizable grid layout with responsive breakpoints, for React.
  • react-jsonschema-form: a simple React component capable of using JSON Schema to declaratively build and customize web forms.
  • react-virtualized: React components for efficiently rendering large lists and tabular data
  • react-window: a complete rewrite of react-virtualized, which focus on making the package smaller1 and faster
  • react-diagram: a super simple, no-nonsense diagramming library written in react that just works
  • react-flow: a highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams
  • Brick Design: visual drag and drop, free nesting, real-time preview of components, real-time tracking, WYSIWYG, perfect UI design restoration, source code Generated
  • react-spring: a spring-physics based animation library that should cover most of your UI related animation needs.
  • React Styleguidist: a isolated React component development environment with a living style guide.
  • React PDF viewer: A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely.
  • React Arborist:A sortable, virtual, customizable tree component for React.
  • TanStack Table

Hook

  • react-use: a collection of essential React Hooks.
  • ahooks: a large set of essential react hooks, with demos and examples for each one of them.

Tools

  • Ink: React for CLIs. Build and test your CLI output using components.
  • Docz: easily write and publish beautiful interactive documentation for your code.
  • Gitlanding: Gitlanding helps you create a beautiful landing page for your GitHub projects.

Database

  • RxDB: A realtime Database for JavaScript Applications
  • Watermelon DB: a reactive database framework. Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast ⚡️.

State Management

  • Recoil: A new State Management Library for React
  • zustand: A small, fast and scalable bearbones state-management solution using simplified flux principles.
  • Constate: write local state using React Hooks and lift it up to React Context only when needed with minimum effort.
  • Redux: a predictable state container for JavaScript apps; single store with objects
  • MobX: a simple scalable state management. multiple stores (one for the UI state and one or more for the domain state ) with observable/noticeable data to automatically track changes through subscriptions mobx
  • hookstate: a simple but compelling and swift state management for React that is based on hooks

Test

Tutorial

The author shares several react performance optimization tips from three directions:

  • reduce the amount of calculation
  • using cache
  • precise recalculation range

Original

A look at the micro frontend architecture trend. Understand the core problems they aim to solve.

A collection of 30+ React and TypeScript codebases that are organized into different categories.

ESLint Configuration

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code

js
module.exports = {
  extends: [
    "react-app",
    "react-app/jest",
    "airbnb",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended",
    "plugin:jsx-a11y/recommended",
  ],
  parser: "babel-eslint",
  rules: {
    "no-unused-vars": [1, { ignoreRestSiblings: true }],
    "prefer-const": 2,
    "no-var": 2,
    "no-await-in-loop": 0,
    "no-nested-ternary": 0,
    "no-underscore-dangle": 0,
    "no-param-reassign": 0,
    "no-plusplus": [1, { allowForLoopAfterthoughts: true }],
    "import/prefer-default-export": 0,
    "import/no-named-as-default": 0,
    "click-events-have-key-events": 0,
    "class-methods-use-this": 0,
    "react/prop-types": 0,
    "react/jsx-props-no-spreading": 0,
    "max-classes-per-file": 0,
    "no-console": 1,
    "arrow-body-style": 0,
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        additionalHooks:
          "^use(Async|AsyncFn|AsyncRetry|Debounce|UpdateEffect|IsomorphicLayoutEffect|DeepCompareEffect|ShallowCompareEffect)$",
      },
    ],
  },
  plugins: ["html", "@emotion"],
  settings: {
    "import/resolver": {
      node: {
        paths: ["src"],
      },
    },
    "import/core-modules": ["@deck.gl/extensions"],
  },
};

Prettier Configuration

An opinionated code formatter.

Options

js
module.exports = {
  singleQuote: true,
  arrowParens: "avoid",
  htmlWhitespaceSensitivity: "strict",
  jsxSingleQuote: true,
  semi: false,
};
Edit this page
logo
Code-related notes and snippets