martinadamsdev martinadamsdev

React - Functional error boundaries

Thanks to React hooks you have now happily turned all your classes into functional components.

Wait, all your components? Not quite. There is one thing that can still only be implemented using classes: Error boundaries.

There is just no functional equivalent for componentDidCatch and deriveStateFromError yet.

Proposed solution

Links

Workflow:

Node version manager on Windows: https://github.com/coreybutler/nvm-windows
Node version manager on Linux/macOS: https://github.com/nvm-sh/nvm
Docker and nodejs: https://hackernoon.com/a-better-way-to-develop-node-js-with-docker-cd29d3a0093

React and TypeScript:

Create a TypeScript based React app: https://create-react-app.dev/docs/adding-typescript
React + TypeScript cheatsheet: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet

ESLint rules

The ESM standard is considered stable in NodeJS and well supported by a lot of modern JavaScript tools.

ESLint does a good job validating and fixing ESM code (as long as you don't use top-level await, coming in ESLint v8). Make sure to enable the latest ECMA features in the ESLint config.

.eslint.json

	<template>
	<div class="text-ellipsis" :style="{height: textHeight,lineHeight: lineHeight}">
	<div class="ellipsis-before" :style="{height: textHeight}"></div>
	<div class="ellipsis-content">
	<template v-if="$slots.default">
	<slot></slot>
	</template>
	<template v-else>{{text}}</template>
	</div>
	<div class="ellipsis-after" :style="{top: '-'+lineHeight, height: lineHeight}">...</div>

	'''
	京东联盟开放平台API的一个通用的Client封装。
	京东联盟开放平台的文档详见 https://union.jd.com/openplatform
	涉及到签名方法的文档见 https://union.jd.com/helpcenter/13246-13247-46301

	Example:
	client = JdApiClient("<YOUR_APP_KEY>", "<YOUR_SECRET_KEY>")
	resp = client.call("jd.union.open.goods.promotiongoodsinfo.query",
	{'skuIds':'12072066'})
	print(resp.json())