ProgateのReactをはじめました。

いよいよReactなわけです。メンターのマッキーさんいわく、Reactとreduxが肝になるみたいなこと言ってたから、肝に入り始めるわけですな。

早速見てみると、ほうほう、まずはテキストをブラウザに表示させる記述をしてくんだって。Reactを使って文字をブラウザ上に表示させるにはrenderメソッド内のreturn内にテキストを記述すると表示されます、とのことでしたよ。

それがこう。

class App extends React.Component {
  render() {
    return (
        <p>やっほう！</p>
    );
  }
}

ちなみにこれはProgateのReactのレッスンの最初の方。『いろはの「ろ」』くらいの段階なんですけども、

JavaScriptのところでextendsはやったからね、雰囲気はわかってるはずよ！でも自信はないしこの説明書くために1回見直したよ！

多分「App」っていうclassを「React.Component」のclassを元に（継承して）作成したよっていうことなんだろうけど、それ以外はわかってないかんね！
どこのだれなのさReact.Componentってのはよ。

でも今はそれでよしとしてさ、先に進もうと。手を動かして暗記して、他のところの理解が進むと、後からこれも理解が追いつく感じなんだろうと思います。

というわけで先に進もうね。

ちなみにこれ、書き方自体はHTMLっぽいんですけど、このReact内で記述するこの文章のことをJSXと言うらしいです。

JSXはHTMLと同じような使い方ができる

見出しとして<h1>タグや<h2>タグを使うこともできるし、文章には<p>タグ、その他<div>タグなど、HTMLと同様のタグが使えるようになっているらしい。h2に比べたらh1の方が文字サイズがちゃんと大きくなったりもした。

でもJSXを記述する際にはreturn内には複数の要素があるとエラーを起してしまうんだって。例えば以下だとエラーになったよ。

class App extends React.Component {
  render() {
    return (
        <p>やっほう！</p>
        <p>やっほう！！</p>
        <p>やっほう！！！</p>
    );
  }
}

たしかに<p>タグが3つあるよね。これだとエラーになるから、これを解消するために<div>タグを使うんだってさ。<div>タグでくくってあげるとそのまとまりが1つの要素となるんだね。だからこうすんだって。

class App extends React.Component {
  render() {
    return (
      <div>
        <p>やっほう！</p>
        <p>やっほう！！</p>
        <p>やっほう！！！</p>
      </div>
    );
  }
}

一見「要素の数変わってないじゃん」って思うじゃんね。でも違うんだって。

らしい。もっと言うとこの状態は「単一コンテナとしてラップしている」状態らしい。あとはこれ以外だと配列として扱う方法があるらしい。

あと、今のところ理解できたJSXの特筆すべきポイントはこんな感じ

たぶんもっとあるんだろうけど、気づいたら追記してこう