reactメモ

electron環境設定など

```
mkdir electron_xxx
cd electron_chat/
npm install electron@1.6.1 --save-dev
npm install connors/photon --save
npm install react@15.4.2 react-dom@15.4.2 react-router@3.0.0 --save
npm install babel-cli@6.18.0 babel-preset-es2015@6.18.0 babel-preset-react@6.16.0 --save-dev

mkdir -p ./src/main
mkdir -p ./src/renderer
```

react環境設定など

```
npm --version
npm install npm --global
npm --version
mkdir hello_react && cd hello_react
npm init -y
```

vi package.json 

```
{
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "electron": "^1.6.1"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.0"
  }
}
```

```
npm install react react-dom
npm install webpack webpack-dev-server --save-dev
npm install babel-cli babel-loader babel-preset-env babel-preset-react --save-dev
npm install eslint eslint-loader eslint-plugin-react --save-dev
npm install css-loader style-loader babel-loader --save-dev
mkdir src
mkdir public
open .
```

vi package.json 

```
{
  "name": "hello_react",
  "version": "1.0.0",
  "description": "hello react",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack serve",
    "webpack": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.16",
    "@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-react": "^7.13.13",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.4",
    "eslint": "^7.25.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.23.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}
```

package.json に定義されているものをインストールする？

```
npm install
```


vi .babelrc

```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

vi .eslintrc.json

```
{
    "parser": "babel-eslint",
    "env": {
      "browser": true,
      "es6": true
    },
    "parserOptions": {
      "sourceType": "module",
      "ecmaFeatures": {
        "experimentalObjectRestSpread": true,
        "jsx": true
      }
    },
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "plugins": ["react"],
    "rules": {
      "no-console": "off"
    },
    "settings": {
      "react": {
        "version": "detect"
      }
    }
  }
```

vi webpack.config.js

```
module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    path: __dirname + '/public/js',
    filename: "[name].js"
  },
    devServer: {
    contentBase: __dirname + '/public',
    port: 8080,
    publicPath: '/js/'
  },
  devtool: "eval-source-map",
  mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      enforce: "pre",
      exclude: /node_modules/,
      loader: "eslint-loader"
    }, {
      test: /\.css$/,
      use: ["style-loader","css-loader"]
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
     }]
  }
};

```

| コマンド | 機能 |
|:-----------|:------------|
| npm install パッケージ名       | パッケージのインストール        |
| npm uninstall パッケージ名       | パッケージのアンインストール        |
| npm list       | インストールされているパッケージの一覧        |
| npm search       | パッケージの検索        |
| npm init       | package.jasonファイルの作成        |
| npm run スクリプト名      | package.jasonファイルに定義されたスクリプトの実行        |
| npm start       | package.jasonファイルに定義されたstartスクリプトの実行        |
| npm help       | 短いヘルプ        |
| npm help -l       | 詳しいヘルプ        |
| npm help コマンド名       | コマンドの詳細ドキュメント        |

package.json のスクリプトが下記のように設定しておけば
```
  "scripts": {
    "start": "webpack serve",
    "webpack": "webpack"
  },
```

src/index.js

```
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!!</h1>,
  document.getElementById('root')
);

```

public/index.html

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="js/app.js" charset="utf-8"></script>
</body>
</html>
```

npm start
npm run webpack
でスクリプトを実行できる

webpack -d を実行するにはnpx webpack -d でもOK

● babelを実行
npx babel src/index.js
でbabelを使ってES6コードををES５に変換することもできる

● eslintを実行
npx eslint src/index.js


※code コマンドでカレンとドライブが開けるようにする
VSCodeでコマンドパレットを開く(⇧⌘P)
表示されたコマンドパレットにshell commandと入力。
以降shell上で　code . とすることでvscを起動できるようになる

index.js

```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import propTypes from 'prop-types';
const MoneyBook = () => {

  const books = [
    {date:"1/1",item:"お年玉",amount:10000},
    {date:"1/3",item:"ケーキ",amount:-500},
    {date:"2/1",item:"小遣い",amount:3000},
    {date:"2/5",item:"漫画",amount:-600},
    {date:"2/5",item:"レコード",amount:-2600},
  ]

  return (
    <div>
    <h1>小遣い帳</h1>
    <table className="book" >
      <thead>
        <th>日付</th>
        <th>項目</th>
        <th>入金</th>
        <th>出金</th>
      </thead>
      <tbody>
        {books.map((book) => 
          <MoneyBookItem book={book} key={book.date + book.item}/>
        )}
      </tbody>
    </table>
  </div>
  )
}

const MoneyBookItem = (props)=>{
  const {date,item,amount}=props.book
  return (
    <tr>
      <td>{date}</td>
      <td>{item}</td>
      <td>{amount >= 0 ? amount : null}</td>
      <td>{amount <  0 ? -amount : null}</td>
    </tr>
  )
}

MoneyBookItem.propTypes = {
  book: propTypes.object.isRequired
}


ReactDOM.render(
  <MoneyBook/>,
  document.getElementById('root')
);

```

index.html

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="js/app.js" charset="utf-8"></script>
</body>
</html>


```

index.css

```
.book {
    border-collapse: collapse;
}
.book th, .book td {
    border: solid 1px;
    padding: 1px 15px;
}
```

npm start