未完成【備忘録】Babel 7系で構築するReact開発環境

未完成【備忘録】Babel 7系で構築するReact開発環境:

この記事について

Babel 7系とReactの開発環境構築の個人的な備忘録です。

本記事は、初心者による記事なので、多々間違いがあると思います。何か間違いございましたら、ご教示いただけると幸いです。

なお、本記事は、下記の記事を参考にまとめ記事という認識で、一読いただければと思います。

参照記事

・ React開発環境構築2018

・ Babel@7で構築するReact開発環境

必要なソフト

yarn

node.jsのパッケージマネージャー npm をすごく使いやすくしたもの。

npm i -g yarn 

※ 公式ドキュメントはhomebrewを推奨しているとのこと。

パッケージ管理できるように、package.jsonを設定。下記コードで、ディレクトリ内に、packageを作成される。

yarn init -y  

ESLint

ESLint... 難しそうなツールの名前ですが、どうやらjsを実行する前に、バグを修正してくれる便利なツールとのこと。

下記、別記事の参照です。

ESLintとは、JavaScriptのための静的検証ツールです。コードを実行する前にバグを発見したり、括弧やスペースの使い方などのスタイルを統一する。

参照記事：ESLint 最初も一歩

インストールコード

yarn add eslint eslint-plugin-react -D 

-Dは devDependencies にインストールするためのオプション

フォルダ構造

project/ 
 ├─node_modules/ ←yarnでインストールしたライブラリが保存されています。 
 │  └─... 
 ├─.eslintrc.json ←new! 
 ├─package.json 
 └─yarn.lock ←パッケージのバージョン情報などが保存されています。 
 

下記のReact用の設定をコピーし、 .eslintrc.json に貼り付ける。

.eslintrc.json

{ 
    "env": { 
        "browser": true, 
        "es6": true, 
        "node": true 
    }, 
    "extends": [ 
        "eslint:recommended", 
        "plugin:react/recommended" 
    ], 
    "parserOptions": { 
        "ecmaFeatures": { 
            "jsx": true 
        }, 
        "ecmaVersion": 2018, 
        "sourceType": "module" 
    }, 
    "plugins": [ 
        "react" 
    ], 
    "rules": { 
        "no-console":"warn", 
        "indent": [ 
            "error", 
            2 
        ], 
        "linebreak-style": [ 
            "error", 
            "unix" 
        ], 
        "quotes": [ 
            "error", 
            "single" 
        ], 
        "semi": [ 
            "error", 
            "always" 
        ] 
    } 
} 

サーバーを書く

サーバーサイドをnode.jsで書く