![見出し画像](https://assets.st-note.com/production/uploads/images/102412632/rectangle_large_type_2_9d03de884370a395373fa8f64546509d.png?width=1200)
React学習備忘録
React環境構築
//以下のコマンド一発で環境構築完了
npx create-react-app <プロジェクト名>
Electron環境構築
・Electronインストール
//electronインストール
npm install electron
//electron-builderインストール
npm install electron-builder
//index.jsに以下記載
const electron = require("electron");
const { app, BrowserWindow } = electron;
let mainWindow;
app.on("ready", () => {
mainWindow = new BrowserWindow({
webPerferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
mainWindow.loadURL(`${app.getAppPath()}\\build\\index.html`);
});
// package.json例
{
"name": "my_electron",
"version": "0.1.0",
"private": true,
"main": "index.js",
"homepage": "./",
"build": {
"extends": null,
"files": [
"build/**/*",
"*.js"
],
"directories": {
"output": "dist_electron"
},
"win": {
"target": "portable"
}
},
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "electron .",
"electron:build": "electron-builder",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"electron": "^24.0.0",
"electron-builder": "^23.6.0"
}
}
参考URL
https://future-architect.github.io/articles/20210107/
よろしければサポートお願いします😚