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の特筆すべきポイントはこんな感じ

JSXで記述するときのあれやこれや

①コメントアウトは{/******/}で囲む(***はコメントの中身ね)
②imgタグは最後にスラッシュ付けて閉じる。<img src=’画像のURL’ />
③JSXの中では{}で囲うことでJavaScriptの値とかも記述できる
④HTML5のタグはすべて使える

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です