2019, My React Technology Road

• React hooks in business
• React hooks are used differently from react classes
• Write your own components using TSX
• Compile components into ES5 using WebPack + Node
• Retrofit the project to Monorepo using LerNA
• Publish components to NPM
• Build gh-Pages automatically using Github Actions

React hooks in business

• Immutablejs This is essential for writing high performance React code with hooks, which are used by the react+immutable mutable language.
• Umi is a “framework” for scaffolding like NextJS, but that doesn’t stop Ali’s React Developer from building on it. I prefer umi/hooks to Ant Design as an open source project because it starts from hooks’ perspective, With antD, it can quickly build applications and save a lot of time to write relevant logic. The official website of this open source project uses PWA instead of SSR, so it cannot be searched on Baidu at present. Click the link to access or Google.

React hooks are used differently from react classes

Write your own components using TSX

npx create-react-app my-app --typescriptCopy the code

Defensive programming is a careful, cautious approach to programming. To develop reliable software, we design each component of the system so that it “protects” itself as much as possible. We crushed the unrecorded assumptions by explicitly checking them in the code. This is an effort to prevent (or at least observe) our code from being called in a way that would exhibit erroneous behavior.

import React, { useState, useEffect, useRef } from 'react'
import styles from './Image.less'interface IProps { width? : string, height? : string, borderRadius? : string,src: string, alt? : string, mode? :"scaleToFill" | "aspectFit" | "aspectFill" | "aspectFillWidth" | "aspectFillHeight" | "widthFix" | "top" | "bottom" | "center" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", lazy? : boolean, }const Index: React.FC<IProps> = (props) = > {
      const {
            width = '300px',
            height = '225px',
            borderRadius = '0px',
            src = ' ',
            alt = 'image',
            mode = 'aspectFill',
            lazy = false
      } = props

      const [state_img_style, setStateImgStyle] = useState({})
      const [state_img_src, setStateImgSrc] = useState(' ')

      const container_ref = useRef<HTMLDivElement>(null)
      const img_ref = useRef<HTMLImageElement>(null)

      useEffect((a)= > {
            let _width: number
            let _height: number

            const { current } = img_ref

            if (width && height && container_ref.current) {
                  if (width === '100%') {
                        _width = container_ref.current.offsetWidth
                  } else {
                        _width = Number(width.split(' ').filter(item= > Number.isSafeInteger(Number(item))).join(' '))}if (height === '100%') {
                        throw Error('height can`t be 100%! ')}else {
                        _height = Number(height.split(' ').filter(item= > Number.isSafeInteger(Number(item))).join(' '))}if (current) {
                        if (lazy) {
                              let io = new IntersectionObserver((e) = > {
                                    const _e = e[e.length - 1]

                                    if (_e.isIntersecting) {
                                          setStateImgSrc(src)

                                          io.unobserve(current)
                                    }
                              })

                              io.observe(current)
                        } else {
                              setStateImgSrc(src)
                        }

                        if (mode === 'aspectFill') {
                              current.onload = (a)= > {
                                    const { naturalWidth, naturalHeight } = current
                                    const ratio_natural = naturalWidth / naturalHeight
                                    const ratio_preset = _width / _height

                                    if (ratio_natural > ratio_preset) {
                                          setStateImgStyle({
                                                maxHeight: '100%'})}else {
                                          setStateImgStyle({
                                                maxWidth: '100%'
                                          })
                                    }
                              }
                        }
                  }
            }
      }, [height, lazy, mode, src, width])

      const style: object = {
            width: width,
            height: mode === 'widthFix' ? 'auto' : height,
            borderRadius: borderRadius,
            overflow: 'hidden'
      }

      return (
            <div
                  ref={container_ref}
                  className={` ${styles._local} `}style={{
                        width: '100'}} % >
                  <div
                        className={` ${mode} `}style={style}
                  >
                        <img
                              ref={img_ref}
                              className='img'
                              src={state_img_src}
                              alt={alt}
                              style={state_img_style}
                        />
                  </div>
            </div>
      )
}

export default React.memo(Index) Copy the code

import React from "react"; interface IProps { width? : string, height? : string, borderRadius? : string, src: string, alt? : string, mode? :"scaleToFill" | "aspectFit" | "aspectFill" | "aspectFillWidth" | "aspectFillHeight" | "widthFix" | "top" | "bottom" | "center" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", lazy? : boolean }declare const Image: React.FC<IProps>;

export default Image;Copy the code

{
      "name": "rokit-image"."version": "1.2.0"."description": "image component of rokit,inspire by miniapp image component."."main": "index.js"."types": "index.d.ts"."scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
            "type": "git"."url": "git+https://github.com/MatrixAge/rokit.git"
      },
      "keywords": [
            "react"."component"."js"."rokit"."miniapp"."wxapp"]."author": "matrixage"."license": "MIT"."bugs": {
            "url": "https://github.com/MatrixAge/rokit/issues"
      },
      "homepage": "https://github.com/MatrixAge/rokit#readme"
}Copy the code

Compile components into ES5 using WebPack + Node

const path = require('path')
const glob = require('glob')
const fs = require('fs-extra')
const webpack = require('webpack')
const config = require('.. /config/lib_webpack.config')
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages')
const { appComponents, appComponentsSource } = require('.. /config/paths')

const build = () => {
	fs.emptyDirSync(appComponents)

	console.log('building components... ')

	const compiler = webpack(config)

	return new Promise((resolve, reject) => {
		compiler.run((err, stats) => {
			let messages

			if (err) {
				if(! err.message) {return reject(err)
				}

				messages = formatWebpackMessages({
					errors: [ err.message ],
					warnings: []
				})
			}
			else {
				messages = formatWebpackMessages(stats.toJson({ all: false, warnings: true, errors: true}}))if (messages.errors.length) {
				if (messages.errors.length > 1) {
					messages.errors.length = 1
				}
				return reject(new Error(messages.errors.join('\n\n')))}return resolve({
				stats,
				warnings: messages.warnings
			})
		})
	})
}

const copy = () => {
	const copyFiles = (name, target_name) => {
		const files = glob.sync(path.join(appComponentsSource, `/**/${name}`))

		files.map((item) => {
			const array_package_path = item.split('/')
			const package_name = array_package_path[array_package_path.length - 2]

			fs.copyFileSync(item, `${appComponents}/${package_name}/${target_name}`)
		})
	}

	copyFiles('index.d.ts'.'index.d.ts')
	copyFiles('_package.json'.'package.json')
	copyFiles('readme.md'.'readme.md')
}

build()
	.then((res) => {
		if (res) {
			copy()

			console.log('components building success! ')
		}
	})
	.catch((err) => {
		console.log(err)
	})

Copy the code

const path = require('path')
const glob = require('glob')
const isWsl = require('is-wsl')
const TerserPlugin = require('terser-webpack-plugin')
const safePostCssParser = require('postcss-safe-parser')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const { appComponents } = require('./paths')

process.env.BABEL_ENV = 'production'
process.env.NODE_ENV = 'production'

const getComponents = (path) => {
	const files = glob.sync(path)

	let entry = {}

	files.map((item) => {
		const array_package_path = item.split('/')
		const package_name = array_package_path[array_package_path.length - 2]

		entry[package_name] = item
	})

	return entry
}

module.exports = [
	{
		mode: 'production',
		entry: getComponents(path.resolve(__dirname, '.. /src/components/**/index.tsx')),
		target: 'web',
		module: {
			rules: [
				{
					test: /\.(ts|tsx)$/,
					use: [
						{
							loader: 'babel-loader'
						}
					],
					exclude: /node_modules/
				},
				{
					test: /\.(css|less)$/,
					use: [
						{ loader: 'style-loader' },
						{
							loader: 'css-loader',
							options: {
								modules: true
							}
						},
						{
							loader: 'less-loader',
							options: {
								modules: true
							}
						}
					]
				}
			]
		},
		resolve: {
			extensions: [ '.tsx'.'.ts'.'.js' ]
		},
		externals: {
			react: 'react'
		},
		output: {
			filename: '[name]/index.js',
			path: appComponents,
			libraryTarget: 'commonjs2'
		},
		optimization: {
			minimize: true,
			minimizer: [
				new TerserPlugin({
					terserOptions: {
						parse: {
							ecma: 8
						},
						compress: {
							ecma: 5,
							warnings: false,
							comparisons: false,
							inline: 2
						},
						mangle: {
							safari10: true
						},
						keep_classnames: false,
						keep_fnames: false,
						output: {
							ecma: 5,
							comments: false,
							ascii_only: true} }, parallel: ! isWsl, cache:true.sourceMap: false
				}),
				new OptimizeCSSAssetsPlugin({
					cssProcessorOptions: {
						parser: safePostCssParser,
						map: false}})]}}Copy the code

Retrofit the project to Monorepo using LerNA

{
      "packages": [
            "packages/*"]."version": "independent"."npmClient": "yarn"."useWorkspaces": true."command": {
            "publish": {
                  "ignoreChanges": [
                        "ignored-file"."*.md"]},"bootstrap": {
                  "npmClientArgs": [
                        "--no-package-lock"]}}}Copy the code

Publish components to NPM

Build gh-Pages automatically using Github Actions

name: Deploy gh-pages
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Build
      run: npm install && npm run build:site

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v2
      env:
        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        PUBLISH_BRANCH: gh-pages
        PUBLISH_DIR: ./buildCopy the code