記事のリンク
https://nextjs.org/learn/foundations/from-javascript-to-react
why
Twitter で話題になっていた記事。
職場でも話題になっていたのでかなり大事だと認識して、しっかりと読んで解釈してみた。
HTML と DOM の対比
この記事を読むまでは HTML を update していると思っていた。恥ずかしい。
https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript
js では createElement などをして dom を操作するコードを書くだけで
実際に HTML を変更しているわけではない
HTML を CRUD する DOM を書いているだけらしい。
バックエンドが実際に DB を変更しているわけではなく、 DB を変更するためのクエリを生み出すコードを書いている関係と似ている(感想)
===
{ Imperative(命令的) or Imperative(宣言的)} プログラミング
wiki によると
命令的、宣言的という言葉はよく聞く。
wiki によると
特典ポイント5%と消費税10% が存在する EC サイトの実例っぽいので例えると
100 + 200 で 300 にするのみで、現在の特典と消費税を計算しないのが 命令的(Imperative)
100 + 200 で 300 にするだけでなく、外部の state に 15% 追加されることを保存するのが 宣言的(Declarative)
React や Vue は state に追加する declare もしてるから 宣言的。
===
今回の Next の記事によると
https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript
ここで扱っていた js のコードは命令的だった。
インターフェースがどうやって DOM を更新していくか、ステップごとに書いていった
しかし、記事では 何を したいのかを宣言する 宣言的なコードを書いたほうがスピードが速いと言っている。
そして最もポピュラーな宣言的なライブラリが React.js。
まとめ
React は私たち開発者から何をしたいかを受け取り、どうやって DOM を実装するかをこなしてくれる。
React の詳細な書き方
Babel 入れれば
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
も使える（普通は webpack に含まれてると推測）
ES6 の基礎文法だいじ
UI コンポーネントを分けて再利用考えて作って、UI コンポーネントの
header,
logo
title
nav
article
hooter
って感じのツリーも意識しよう
State, props をちゃんと使おう
応用として context, ref, useEffect も使おう！
残りはこのように React の大枠のガイドが書いてあった。
読破！
Top comments (0)