その2
https://qiita.com/DaisukeNishi/items/e93a3448668f65df7a91
その3
https://qiita.com/DaisukeNishi/items/697fb3579d7dd69324b3
その4
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
の中に良い感じに書いてあるようです。
2.yarn ejectする
$ yarn eject
片道切符で「初心者モード」が終わってしまうyarn eject
です。
これをやる前後で、変更などはコミットしておくと、ejectが失敗しないです。
プロジェクトのフォルダの中にwebpack.config.js
などの
ファイルが沢山出てくるのですが、今回あんまりそれは関係なくて、
package.json
に色々な設定が出てきます。
なので、ほとんどpackage.json
だけ触ればよくて、
新たに.eslintrc
とか.babelrc
など、お馴染みの設定ファイルを作る必要はないです。
{
//省略
"eslintConfig": {
"extends": "react-app"
},
//省略
"babel": {
"presets": [
"react-app"
]
}
}
関係ない部分は、エディタの左の▽で畳んでおくと分かりやすいです。
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
いれてあります。
もし「鍵マーク」が表示されたら、自分のパスワードをいれます。
そして、インストールが終わったらpackage.json
をまた開きます。
"eslintConfig": {
"extends": "react-app"
},
↓こちらを下記のようにする。
"eslintConfig": {
"plugins": [
"react-pug"
],
"extends": [
"react-app",
"plugin:react-pug/all"
]
},
[
と{
がややこしい上に、babel
と設定が似ていて、混乱しやすいです。
eslint-plugin-react-pug
が、設定の中ではreact-pug
と省略されています。
5.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
に打ち替えてみて、動くか確認します。
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
7.調べてて思った事
エラー内容で検索して調べていくと、Typescript
の質問と回答が圧倒的に多いので、
「そのエラーは型宣言が・・」みたいなのが多い。多分React
使う人はデフォルトでts
を使うっぽいので
ES6
で書く初心者にとっては、なかなかツラいものがありそうだと感じました。
あとbabel
が最近@babel
になって、欲しいのと違うプラグインの方が検索上位に来たりします。
React
に関してはQiita
とTeratail
より外国のオッサンの方がズバリ解決策を示している事が多いので、
英語のページを頑張って読む方が、逆に速いかもしれないです。
Youtubeで日本語でReact入門を解説している人の動画がありました。
お金払ってUdemy
とか見たほうが良いのかもですが、
最初のとっかかりとしては無料のYoutube
も結構良いなと思いました。
https://www.youtube.com/watch?v=xJAqa0U_X50&list=PLh6V6_7fbbo9HNwl5htJOIV48JUgwWQVS&index=1
以上です。
参考記事
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/