Reactのguide to main conceptsを読み始める人～その１～

パートいくつまで行くかわからないけど、とりあえず読み始めてみることにする。

Vueは下記の本を通してやったが、イマイチ型などつけにくかったりして、微妙に違うのでは？という気がした。

基礎から学ぶ Vue.js

作者:mio
発売日: 2018/05/29
メディア: 単行本（ソフトカバー）

んでもって、Reactあるよなーと思って2年くらい思って手を出さなかったので、一度Tutorialくらいは通そうと思って、今日から眺めてみることにした。

とりあえず hello-world を眺める

https://reactjs.org/docs/hello-world.html

とりあえずハローワールドから。大体日本語が正しく表示されるのかを気にするので下記のものを表示したりしたぺこ。

ReactDOM.render(
  <h1>こんにちはぺこ～ よろしくぺこ～</h1>,
  document.getElementById('root')
);

手を動かして学びたい人はこっちのほうがいいらしい。まあConceptちょっと眺めてみて、そのあとやろうと思う。

https://reactjs.org/tutorial/tutorial.html

あとはやっぱりコンポーネント思考です、みたいな説明も軽く書いてある。ほかにはJavaScriptの知識も前提にありますと。

JavaScriptに関しては3つのポイントが重要とある gistを参照する形で書かれていた。概要的には

letとconstを使おう
classキーワードを使ってclass定義をしよう。classでのメソッド定義にはカンマがいらないことと、thisのスコープにはよく注意すること
allow function => を使おう。これを使う場合は this の値が変わらないらしい（なんかthisの罠的な記事があったような気がするな）

それとまだまだ覚えるべきことはたくさんあるので MDN とか見てくださいとある。

Introducing JSX を眺める

マークアップとロジックの両方を含む概念を「コンポーネント」として表現する。それがJSXで、必ずしもReactで使う必要はないが、事実上使われるものらしい。

とりあえず試してみる。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: '白銀',
  lastName: 'ノエル'
};

const element = (
  <h1>
    ぺーこぺこぺこ {formatName(user)}
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

なんか引用符で囲まなかったりするの新鮮。 const element = <img src={user.avatarUrl}></img>;

中かっこで変数展開とかされるみたい。TipsにHTMLに近い性質のものなので、camelCase を使うようにとも記載がある。

By default, React DOM escapes any values embedded in JSX before rendering them.

これは基本ありがたそう（React Domはデフォルトでレンダリングする前にエスケープするとある）。

Babel compiles JSX down to React.createElement() calls.

React.createElement() というバグになりにくいような仕組みもあるようだ。これは重要かもなー

まとめ

ここまででもあんまり知らないこと多いなーと思った、Tutorial: Intro to React で早いところうごかしてみたいけど、今はのんびり概念的なところを追おうかなと思ってる。

たぶん勉強ペースとかものんびりだけど、小さいアプリでもそのうち作りたいなと思ってます（てかTypeScriptでちゃんとフロント書きたいなって気持ち、Vueはそのあたりの組み合わせが魔界っぽいが、ReactはTSでもある程度できるみたいな話よく聞くので、まあどうなんだろう、やってみたいね）。

のんびりだけど今日は終わり。