LoginSignup
0
0

More than 3 years have passed since last update.

@DaisukeNishi(daisuke nishi)

create-react-appからpugまで(その2)

Last updated at Posted at 2020-02-29

その１
https://qiita.com/DaisukeNishi/items/dae74d5dcf5ddb171b3d
その３
https://qiita.com/DaisukeNishi/items/697fb3579d7dd69324b3
その４
https://qiita.com/DaisukeNishi/items/801e1b1e02487e26e905
その5
https://qiita.com/DaisukeNishi/items/ca7d80c104ca7a792f9d
その6
https://qiita.com/DaisukeNishi/items/c8982546c803d2c5dc99

おなじような事を何回も書いてます。

pugで書きたい。

create-react-appで、めちゃ簡単にReactで書けるようになってる。
しかしjsxを覚えるなら最初からpugで覚えたいと思ったが、
いきなりハードルが上がったので、忘れないように反芻して書いておく。

※最初に書いたやり方だと、微妙だったので書き変えます。

1.create-react-appする

$ npm install -g create-react-app
$ create-react-app example
$ cd example
$ yarn start

これでlocalhost:3000ができちゃう。
しかし、フォルダの中を見ても.babelrcと.eslintrcが見当たらない。
babelの設定などは、最初の段階ではreact-scriptsの中に良い感じに書いてあるようです。

２．yarn eject しない

$ yarn eject //← しない

package.jsonの中身を少し変えます。

package.json
{
  //省略
  "eslintConfig": { //←この項目は消す。
    "extends": "react-app"
  },
  //省略
  "babel": {     //←これは「yarn eject」しなければ出ない。
      "presets": [
      "react-app"
    ]
  }
}

色々考え直して、やっぱり.babelrcを作ります。

$ touch .babelrc

.bashrcの中身は、同じです。

{
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}
設定を変更する

react-scriptsは、.babelrcを読み込む設定になっていないので、
/node_modules/react-scripts/config/webpack.config.js
の中の、
baberc: false を babelrc: trueに編集したい。

しかし

/node_modules/の値を直接書き換えてしまうと、
あとで色々と困る事になってしまう。

なので複製して使う

なので、react-scriptsをコピーして、
一旦ホームディレクトリ（プロジェクトの外）にペーストします。
react-scripts-turn-on-babelrcという名前にし、
react-scripts-turn-on-babelrc/config/webpack.js
を開いてbabelrc: false→babelrc: trueに書き換えて保存します。

Githubに置く

ローカルに保存したままではみんなで使えないので、
自分のGithubにリポジトリを作ってプッシュします。
https://github.com/daisuke240000/react-scripts-turn-on-babelrc
これを「公開」の状態にしておきます。

package.jsonの中にある
"react-script": "^3.4.0"は、削除します、
"react-scripts-turn-on-babelrc":を追加します。
右側はバージョンじゃなくてGithubのリポジトリを書いておきます。

package.json
"react-scripts-turn-on-babelrc": "https://github.com/daisuke240000/react-scripts-turn-on-babelrc"

$ yarn

これで設定変更したreact-scriptsが使えるようになります。
"start": "react-scripts-turn-on-babelrc start",に書き換えるのかなと思いきや
そこは書き換えなくても大丈夫のようです。

package.json
"scripts": {
    "start": "react-scripts start", //←そのままで、動くっぽい
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

$ yarn start

動きます。当然バージョンが違ったら動かないので、
自分がインストールしたものを編集します。

3.babel-plugin-transform-react-pug入れる

$ yarn add babel-plugin-transform-react-pug
$ yarn add babel-plugin-transform-react-jsx

依存ファイルを2個入れる。※多分-Dを付ける。

{
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

↓こちらを下記のようにする。

{
  "babel": { 
    "presets": [
      "react-app"
    ],
    "plugins": [
      "transform-react-pug",
      "transform-react-jsx" 
    ] 
  }
}

これはpugをjsxに変換してくれる書き方です。
必ずpugの方が上に来ないとダメみたいです。

4.ESLintを入れる。

$ yarn add eslint
$ yarn add eslint-plugin-react-pug

eslint本体はejectする時に自動で入るかもしれません。※多分-Dを付ける。
もしeslintをグローバルにインストールしている場合は、
プラグインもグローバルに入れろ、と書いてある。

$ sudo yarn add -g eslint
$ sudo yarn add -g eslint-plugin-react-pug

環境によってはパーミッションエラーが出る時があるので、sudoいれてあります。
もし「鍵マーク」が表示されたら、自分のパスワードをいれます。
そして、インストールが終わったら
.eslintrcを作って、そこにpackage.jsonにあったeslintConfigを移します。

$ touch .eslintrc
package.json
"eslintConfig": {
  "extends": "react-app"
},

↓こちらを下記のように.eslintrcに書きます。

 {
  "plugins": [
    "react-pug"
  ],
  "extends": [
    "react-app",
    "plugin:react-pug/all"
  ]
},

[と{がややこしい上に、babelと設定が似ていて、混乱しやすいです。
eslint-plugin-react-pugが、設定の中ではreact-pugと省略されています。

webpack.config.jsを書き換える

eslintConfigを消しただけでは、向き先が変わらないっぽいので、
先程作ってプッシュした、react-scripts-turn-on-babelrcの
中にあるwebpack.config.jsをまた書き換えます。

webpack.config.je
useEslintrc: true

これをプッシュして、また入れ直します。

$ yarn upgrade

5.App.jsを書き換える。

今更ですが初期表示のロゴマークくるくるは、App.jsに書いてあります。

App.js
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

↓pugに打ち替えてみて、動くか確認します。

App.js
function App() {
  return pug`
    div(className="App")
    header(className="App-header")
      img(src=logo className="App-logo" alt="logo")
      p
        | Edit 
        code src/App.js
        |  and save to reload.

      a(className="App-link" href="https://reactjs.org" target="_blank" rel="noOpener noReferrer")
        | Learn React
  `;
}

export default App;

return pugの所が、return (pugなのか return pug( なのか、
どう書けば良いんだろうかと試行錯誤したんですが、結論(要らなかったです。
上記のように、シンタックスのハイライトが消えてしまうので、VSCodeならvscode-react-pug
を入れておくとキレイな表示になります。

6.もう一回ブラウザで確認する

$ yarn start

ちゃんと表示されました。
image.png

7.調べてて思った事

これを書いた後に外人はどんなヤリカタしてるんだと思ったら、
どうやらreact-app-rewiredというToolを使っているらしい。

以上です。

参考記事

http://www.beguru.work/2019/01/06/create-react-app-%E3%81%A7-babelrc%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B/
https://kic-yuuki.hatenablog.com/entry/2019/09/08/111817
https://github.com/facebook/create-react-app

https://stackoverflow.com/questions/56513346/how-to-use-pug-templating-engine-with-reactjs
https://qiita.com/TakuyaHara/items/f560d34aaa7857b32c82
https://www.npmjs.com/package/babel-plugin-transform-react-pug
https://github.com/pugjs/babel-plugin-transform-react-pug#eslint-integration
https://github.com/ezhlobo/eslint-plugin-react-pug
https://html2pug.now.sh/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0