Remember a TS full stack development (front-end)

In this article, we will learn the scattered points recently on a comb, describe a simple shopping page, would need to be aware of this article is mainly about the front point and harvest, see github:https://github.com/niceMatthew/simple-mall-web detailed code, The main technology stacks used are Webpack, React, TS, and React - Redux

Site structure

The main page

• Shopping cart page
• Login registration page
• Personal Center Page
• Home page

Website screenshot

Environment configuration

cnpm i react react-dom @types/react @types/react-dom react-router-dom @types/react-router-dom react-transition-group @types/react-transition-group react-swipe @types/react-swipe antd qs @types/qs  -S
cnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
cnpm i typescript babel-loader source-map-loader style-loader css-loader less-loader less url-loader file-loader autoprefixer px2rem-loader postcss-loader lib-flexible -D
cnpm i redux react-redux @types/react-redux redux-thunk  redux-logger @types/redux-logger redux-promise @types/redux-promise immer redux-immer -S
cnpm i connected-react-router -S
cnpm i express express-session body-parser cors axios -S
Copy the code

The project uses babel-loader instead of TS-Loader to parse TS files

Ts: TSC –init generates the tscofs. json configuration file

{
  "compilerOptions": {
    "moduleResolution": "node"."outDir": "./dist"// Output directory TSC"sourceMap": true// Whether to generatesourceThe Map file"noImplicitAny": true, // Whether the implied any type is not allowed"module": "es6"// Module specification"target": "ESNext"// Compile for ES5"jsx": "react"// How do I compile JSX syntax"esModuleInterop":true, // allow conversions between common.js modules and es modules"baseUrl": "."// Find the actual path of the URL that is not a relative path"paths": {// Configure the @ path"@ / *": [
        "src/*"]}},"include": [
    "./src/**/*"// only ts files in SRC directory]}Copy the code

Ts image citation · image.d.ts

declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';
Copy the code

Px to REM in Webpack

{
    loader: 'px2rem-loader',
    options: {
        remUnit: 75,
        remPrecesion: 8
    }
}
-------------------------------------
let docEle = document.documentElement;
        function setRemUnit() {
            docEle.style.fontSize = docEle.clientWidth / 10 + 'px';
}
setRemUnit();
window.addEventListener('resize'.setRemUnit);
Copy the code

The router configuration

The history into

import { createHashHistory }  from 'history';
let history = createHashHistory();
export default history;

// --------
import { ConnectedRouter } from 'connected-react-router';
import history from '@/history'; . <ConnectedRouterhistory= {history}>
    <ConfigProvider locale={zh_CN}>
        <main className="main-container">
            <Switch>
            </Switch>
        </main>
        <Tabs />
    </ConfigProvider>
</ConnectedRouter>
Copy the code

The react – redux configuration

Use the redux-Promise, redux-Thunk, and redux-Logger intermediate keys

let store = applyMiddleware(routerMiddleware(history), promise, thunk, logger)(createStore)(rootReducer);
Copy the code

Infinite drop-down loading (in practice, scroll loading with relative performance is adopted, but in fact, IntersectionObserver can be used for optimization)

Always use three divs to display the content and two divs to simulate the scroll bar when displaying the product page

props.container.current.addEventListener('scroll', () = > {if(props.container.current) {// the div is already homeContainerletscrollTop = props.container.current.scrollTop; // Wheel out wheel out chart heightif(scrollTop > (4.266667 + 1.3333) * rootFontSize)) {letStart = math.floor ((scrollTop - (4.266667 + 1.3333) * rootFontSize)/(8.66667 * rootFontSize))if(lessonListRef.current.length - 2 >= start){
                            setStart(start); }}}});Copy the code

Debounce Anti-shake optimized Scroll

export function debounce(fn: Function, wait: number) {
    let timeout: number = null;
    return function () {
        if (timeout)
            clearTimeout(timeout);
        timeout = setTimeout(fn, wait); }}export function loadMore(element: HTMLDivElement, callback: Function) {
    function _loadMore() {
        letcontainerHeight = element.clientHeight; // Height of the containerletscrollTop = element.scrollTop; // The height to roll upletscrollHeight = element.scrollHeight; // Height of contentif (containerHeight + scrollTop + 20  >= scrollHeight) {
            callback();
        }
    }
    element.addEventListener('scroll', debounce(_loadMore, 300));
}
Copy the code