作りながら学ぶReact入門 をやる

作りながら学ぶReact入門

買った本で体系的に一通りやろうとおもう

Reactとは

History

1995にjsが登場

2005にGoogle Map, GmailでAjaxが注目を浴びる

jQueryなどの有用なlibraryが現れる

2010sにAngularJSなどと共にReact登場(2013)

FBそのものの巨大サービスのメンテナンス性を高めるために開発されたFW

従来のjs libとは違ってデータの変更で自動的に全画面表示処理が必要な場所？？ を更新する

jQの必要な部分を更新する処理をなくしているのがポイントらしい．

ReactはVirtual DOMが必要最小限必要な箇所を自動で置き換えてくれる

component

header, menu, itemsList, shoppingCart,

などを論理的な部分にReactでは分割できる． それによりメンテナンス性の高いシステムが作成できる．

SPA

従来の開発( PHP? )は画面の更新がserver, clientで別れていたので

コードが複雑だったが，Reactは画面の作成をclientのjsが担当するので

わかりやすいフロントとバックの分担ができるようになったらしい．

server側の処理が従来と違ってSmartPhoneでも同じにできるらしい．

画像を見ると，MVCのController, ModelをServer, Clientの両方で行い

相互のControllerでjsonをやり取りするらしいが，意味不明．

ENV, 環境構築

mkdir making-learn-react

cd making-learn-react

npm init -y

RYOs-MBP:making-learn-react kaede$ npm init -y
Wrote to /Users/kaede/code/making-learn-react/package.json:

{
  "name": "making-learn-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

これでシンプルなpackage.jsonを生成できる

これを

+   "description": "Hello React",
+   "private": true,
+   "scripts": {
+    "start": "webpack-dev-server",
+    "webpack": "webpack-d",
+   },

に書き換える( + はわかりやすくするため)

説明をつけて，private projectに設定して， webpack-dev-serverでlocalhostでserveできるようにして， webpack-dで何かをする？？？

そして忘れずにgithubにpush.

github.com/new

からmaking-learn-reactで作成し

git init

これでlocalに残ってるgitのデータをリフレッシュ

git remote add origin git@....

現在地がリンクするremote(github)の接続情報をつける

git add . git commit git push origin master

いつもの追加コマンド

To github.com:kaede0902/making-learn-react.git

• [new branch] master -> master

これでリンクできた．

...

面倒だが書いてあるとうりにconfig fileを babelrc, eslintrc, webpack.config.js,

を書き写し，npm start すると

err 1

webpack-cliがseparate されたエラーが出た npm i -D webpack-cli

これで起動すると babel loader のエラー？

babel-loaderにはbabel-coreが必要で，それが含まれるbabel@7.x系をinstall

白と出る．

npm uninstallして@7をinstallした

err 2

今度はeslintが読まれない

各ファイルでこれが現れている． eslintはnpm --saveで入れた

react_devtools_backend.js:6 ./node_modules/scheduler/index.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
Failed to load config "eslint:recommend" to extend from.
Referenced from: /Users/kaede/code/mkreact/.eslintrc.json

morizyun.github.io

eslintはes6のミスを指摘してくれるツールらしい？なら入れないといかんな

terminalに出てくる ( i ) 「wdm」ってなんだ？

terminalに全角文字とか出さないで欲しいんだが？

eslintシリーズをpack.jsonから消して，package-lock.jsonも消して，node-modules/を削除して，npm iで他のものを入れ直した

@6.8.0が入った

eslint, eslint-loader, eslint-plugin-react,

質問を投げました

teratail.com

.eslintrc.jsonが

"extends":[ "eslint:recommend", "plugin:react/recommended"],

はい，typoだった

err 03

webpack rcのstyle-loaderをlodaerにtypoしてなかなか気づけなかった

webpack

webpackはその名の通りにcss, js, img, を一つにまとめているらしい．

webpackとはCSSやJavaScript、画像などWebサイトを構成するあらゆるファイルを1つにまとめるモジュールバンドラーのことです。

www.mitsue.co.jp

出力先のjsに全てがまとまっている？

(img in qiita)

qiita.com

またentry pointでapp.jsでindex.jsを読み込み，npm startでwebpack dev serverを動かせてくれる．これを使う方がerrの表示がていねい?

また，処理時間，パフォーマンスを教えてくれる？

npm serverの他に-dで何かができる

jsx

実際にhtmlを書いてみるとthreadの鑑賞で崩れが起きたから抜いた！！

threadはもちろんtbodyもいらん

table, tr, th, /th, /tr, tr, td, /td, /tr, /table,

で十分だ！！！

forEachでjsxを簡略化する作戦は失敗

          {books.forEach(hoge => {
            console.log(hoge.date);
            return(`
            <tr>
              <td>${hoge.date}</td>
              <td>${hoge.item}</td>
              <td>${hoge.amount}</td>
              <td></td>
            </tr>
            `)
          })}

これだとうまく帰ってこない

かといって本の通りに

          <tr>
            <td>{books[1].date}</td>
            <td>{books[1].item}</td>
            <td></td>
            <td>{-books[1].amount}</td>
          </tr>

を四回書くのはいやだ．

どうしようか....