name : Masakatsu Shibata

こちらは開発者向けのREADME になります。
アプリケーションの使用方法に関しては、README を参照してください。

ローカル開発マシンにNode 8.16.0またはNode 10.16.0以降のバージョンが必要

$ npx create-react-app my-app
$ cd my-app

不要なファイルの削除はここでは省略。

• Sass

  $ npm i -D node-sass

• Saas をモジュールする

  • ejectせずに、webpack, babel, estlintなどの設定を上書きするツールと、css moduleを有効にするプラグインを使って実現

    $ npm i -D react-app-rewired codebandits/react-app-rewire-css-modules

  • プラグインがsass-loaderとnode-sassに依存してるのでこれも追加

    $ npm i -D sass-loader node-sass 

• ルーティング

  $ npm i -S react-router-dom

• Redux

  $ npm i -S Redux

• React + Redux

  $ npm i -S react-redux

• Redux 非同期

  $ npm i -S redux-thunk

• Redux 開発用ログ

  $ npm i -S redux-logger

• REST API

  $ npm i -S axios

• GitHub Pages

  $ npm i -D gh-pages

• Saas Module

  • config-overrides.js を作って、設定を記述

    $ touch config-overrides.js

  • package.json のscriptsを変更

    {
      "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom"
      }
    }

  • css moduleを有効にしたいsassファイルの拡張子を .sassから .module.sassに変える

    import style from 'style.module.sass'

• 環境変数

  • 開発環境 【 .env.development 】

    $ touch .env.development

  • 本番環境 【 .env.production 】

    $ touch .env.production

• 絶対パスでimport する

  • .env に記述

    NODE_PATH=.

  • VSCode の補完 【 jsconfig.json 】

    $ touch jsconfig.json

• ポート番号指定

  • .env に記述

    PORT=ポート番号

• src/
  • components/ => JSX を扱っている
    • layouts => レイアウトのみを行うJSX
    • pages => 個々のページのJSX
    • ui => UI部品のJSX
  • config/ => components 内で使用する設定(定数など)
  • containers => Reduxのstoreに格納されているデータをComponentに紐付ける
  • images/ => 画像ファイル等
  • redux/ => Redux
    • reducers => Reducers
  • stylesheet => Sass(CSS)ファイル

• 開発モードで実行

  $ npm run start

• テスト

  $ npm run test

• 本番用にビルド

  $ npm run build

• GitHub Pages

  $ npm run deploy

©2020 Dr.NA_ResultFront