# study_electron

**Repository Path**: worldzb/study_electron

## Basic Information

- **Project Name**: study_electron
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## React环境搭建

### 1、安装creat-react-app [进入](https://create-react-app.dev/docs/adding-typescript/) 
`npm install -g create-react-app`  
### 2、创建新工程， 采用 typescript 模板
```
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
```
此时，react 项目已创建完成，可通过`npm run start`进行测试


### 3、安装electron [进入](https://www.electronjs.org/docs/tutorial/first-app)
`npm install --save-dev electron`

**electron 安装问题：**

1, 下载慢，解决方案 [进入](https://blog.csdn.net/GorgeousChou/article/details/82929887)   
2， 错误（Electron failed to install correctly, please delete node_modules/electron and try installing again ）,解决方案[进入](http://)，简介如下
```
1,  Create a file named path.txt in node_modules\electron folder.
2,  Write electron.exe in it.
3,  Download electron package manualy.  
4,  Unpackage the electron files into node_modules\electron\dist
5,  Run your start script
```
[electron 镜像地址](http://npm.taobao.org/mirrors/electron/)，根据平台选择下载， windows 下载 electron-v8.1.0-win32-x64.zip  即可
![输入图片说明](https://images.gitee.com/uploads/images/2020/0309/193400_4390b9ff_1191377.png "屏幕截图.png")

### 4、 配置
安装好electron 后， 再跟目录新建 `main.js`(该文件为electron 的入口文件),输入内容
```
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 440,
    height: 760,
    webPreferences: {
      // preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('./build/index.html')
  mainWindow.loadURL('http://localhost:3000')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) createWindow()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
```


同时，在 `package.json` 中新增配置
```
"main": "main.js",
"scripts": {
    "electron": "electron ."
},
```
完整`package.json`如下
```
{
  "name": "notebook",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "electron": "^8.1.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "electron ."
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

### 5、 运行
首先运行 react 项目 `npm run start`, 此时node会创建 一个端口为 3000 的服务，可在浏览器输入`localhost:3000`进行访问
然后运行electron，`npm run electron`

运行结果如下

![输入图片说明](https://images.gitee.com/uploads/images/2020/0309/194759_4d9b8483_1191377.png "屏幕截图.png")


### 参考文档

1. [electron GITHUB](https://github.com/electron/electron)
2. [create-react-app](https://create-react-app.dev/docs/adding-typescript/)
3. [electron 官方文档](https://www.electronjs.org/docs/tutorial/first-app)
4. [react 官方文档](https://react.docschina.org/docs/getting-started.html)
5. [electron 淘宝镜像](https://npm.taobao.org/mirrors/electron/8.1.0/)