# react-electron

**Repository Path**: proEagle/react-electron

## Basic Information

- **Project Name**: react-electron
- **Description**: electron项目，前端react
- **Primary Language**: JavaScript
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-23
- **Last Updated**: 2021-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-electron

#### 介绍
electron项目，前端react

开发环境：`Node 14.17.6`

#### 软件架构

```txt
│  .gitignore
│  .yarnrc            yarn安装相关依赖镜像源（避免某些库使用git下载缓慢或无法下载）
│  LICENSE
│  main.js            程序入口js，electron入口
│  package.json       相关依赖，以及electron打包配置
│  README.en.md
│  README.md
│  tsconfig.json      typescript配置
│  yarn-error.log
│  yarn.lock
├─config              配置相关
│    │  env.js
│    │  
│    └─ui              前端React的打包配置
│        │  env.js
│        │  getHttpsConfig.js
│        │  modules.js
│        │  paths.js
│        │  pnpTs.js
│        │  webpack.config.js
│        │  webpackDevServer.config.js
│        │  
│        └─jest
│                babelTransform.js
│                cssTransform.js
│                fileTransform.js
├─scripts             库启动脚本
│    build.js         React打包脚本
│    start.js         React开发环境脚本
│    test.js
└─src
    ├─back-stage      后台处理库
    │      back.d.ts
    │      backApi.js
    │      backEventUtil.js
    │      
    ├─public          视图层静态资源
    │      favicon.ico
    │      index.html
    │      logo.ico
    │      logo192.png
    │      logo512.png
    │      manifest.json
    │      render.js
    │      robots.txt
    │      
    └─ui              React项目
        │  App.css
        │  App.test.tsx
        │  App.tsx
        │  index.css
        │  index.tsx
        │  logo.svg
        │  react-app-env.d.ts
        │  reportWebVitals.ts
        │  setupTests.ts
        │  
        ├─assets
        │  └─colorGenerate
        │          sv_slider_alpha.png
        │          wheel1.png
        │          wheel2.png
        │          wheel3.png
        │          wheel4.png
        │          
        ├─Layout
        │      api.ts
        │      AppContent.tsx
        │      AppHeader.scss
        │      AppHeader.tsx
        │      Layout.scss
        │      SideMenu.tsx
        │      SideMenuList.tsx
        │      WorkBreadcrumb.tsx
        │      WorkContainer.tsx
        │      WorkPage.tsx
        │      
        ├─native      与原生后台交互的库
        │      eventUtil.ts
        │      nativeApi.ts
        │      
        ├─pages
        │  ├─chart
        │  │  │  AntV.tsx
        │  │  │  BarChart.tsx
        │  │  │  echarts.scss
        │  │  │  Echarts.tsx
        │  │  │  
        │  │  └─components
        │  │          ReactAntv.tsx
        │  │          REchart.tsx
        │  │          
        │  ├─hook
        │  │  │  color.data.js
        │  │  │  colorPane.scss
        │  │  │  colorPane.tsx
        │  │  │  ColorPaneLib.js
        │  │  │  CrntButton.tsx
        │  │  │  hook.scss
        │  │  │  index.tsx
        │  │  │  
        │  │  └─components
        │  │          ColorSelect.scss
        │  │          ColorSelect.tsx
        │  │          ColorUtil.ts
        │  │          
        │  ├─playground
        │  │      playground.tsx
        │  │      
        │  ├─table
        │  │      table.scss
        │  │      Table.tsx
        │  │      
        │  ├─testDebug
        │  │      Question.tsx
        │  │      
        │  └─user
        │          Login.scss
        │          Login.tsx
        │          loginInfo.ts
        │          
        ├─routes
        │      AsyncComponent.tsx
        │      config.ts
        │      index.tsx
        │      
        ├─store
        │  │  index.ts
        │  │  
        │  └─reducer
        │          AppWindow.ts
        │          index.ts
        │          user.ts
        │          
        └─util
                navigateUtil.js

```


#### 安装教程

1. 下载最新的代码: `git clone https://gitee.com/proEagle/react-electron.git`
2. 安装所有依赖：`yarn`


#### 使用说明

1. 启动开发环境: `yarn react:start`
2. 启动electron开发环境: `yarn electron:start`
3. 打包前端项目: `yarn react:build`
4. 打包生成安装包: `yarn electron:build`

#### 配置项

1. logo图片

#### 备注

1. `.yarnrc`文件配置镜像源，用于解决国内下载相关依赖包网络问题。使用`yarn`安装依赖、启动项目。
2. [图片转ico图标工具](http://www.pc6.com/softview/SoftView_16330.html)，进入以后，使用`本地下载`就可以了。解压安装打开后，导入图片，最终生成ico（包含256、128、64、32、16尺寸大小）