The final result

Video demo

Technology stack

react + react-router-dom + typescript + react-redux + redux-saga + antd + react-router-cache-route + electron

Application scenarios

  • If you open multiple Windows using electron, a subwindow will pop up instead of a new TAB. So we need to write the TAB by hand. In order to implement TAB switching and cache the previous state, we need to use the route cache. In this case, we use react-router-cache-route
  • Overwrite electron menu bar Electron has a default menu bar, which will be a white edge, we need to add basic information to the menu bar, so we need to overwrite electron menu bar. The React component communicates with electron using ipcMain and ipcRenderer
  • Change the theme color

You can change theme colors in real time

The project structure

.├ ─ Config ├─ docs ├─ light ├─ SRC ├─ exercises │ ├─ styles │ ├─ SVG ├─ │ ├─ ├─ ├─ Menu ├─ ├─ electronic Menu │ ├─ User │ ├─ Pages │ ├─ ├─ ├─ Error │ ├─ Home │ ├─ ├─ │ ├─ Login │ ├── ├─ ├── bass │ ├── bass │ ├── bass │ ├── bass │ ├── all right, all right, all right, all right ├─ home exercises ─ Store │ ├─ actionTypes │ ├─ lessers │ ├─ state Exercises ─ typings ├─Copy the code

Directions for use

  • Interface configuration provides four configurations, dev,BUG, test, and production respectively in the file. Env
REACT_APP_DEV = http://xxxxxxxxx/
REACT_APP_BUG = http://xxxxxxxxx/
REACT_APP_TEST = http://xxxxxxxxx/
REACT_APP_PROD = http://xxxxxxxxx/
REACT_APP_VERSION=$npm_package_version
Copy the code
  • Start the show
Yarn // The installation depends on yarn start // To start dev. In the browser, debug yarn startE // Start the electron YARN build // pack the react project yarn dist-win // window pack Yarn dist- MAC // MAC packageCopy the code

  • Electron configuration The electron configuration file is in electron/main.js

  • Less variables are configured in config/ lessglobal.js

  • The routing configuration

Route configurations are set in the Routers, and menuRouter is the configuration of the menu

{name: 'home', // route name path: '/home', // route path: '/home', // route path: '/home', // route path: '/home', // route path: '/home' Children: [{name: 'child ', path: '/children', basePath: '/children', Component: // Whether to open the TAB window. If the TAB window is not opened (true and not defined), the breadcrumbs will be found under the secondary TAB. Children: [],},],},Copy the code

More usage methods will be updated later, and you are also welcome to mention issue

Guthub address