【 react 】react内での書き方のルール

三月は卒論もなく、授業もない、バイトももうすぐ退社するので
時間が余りまくるので、７時間睡眠を意識して参りたいと思います。

意識していないとついつい
「短時間しか寝てない方がかっこいい」
という風に中二病臭い人物になってしまい、
予定を沢山入れてしまうのです。。。。

かえって他のことをおろそかにしないように頑張りますwwww

今日はJSXについて勉強したので忘れないうちにアウトプット

okinawanpizza.hatenablog.com

react で jsx を使うと、、

まず、一番シンプルなreactの構文です。

<div id="root"></div>
<script type="text/babel">
  let dom = document.querySelector('#root');
    let el = React.createElement(<h1>,{},'Hello World');
  ReactDOM.render(el, dom);
</script>

コンパイルされると以下のコードになります。

<div id="root">
   <h1>Hello World</h1>
</div>

JSXを使うとHTMLの文法をそのまま使うような形になってるので
createElementの代わりに次のように書くことができます。

<div id="root"></div>
<script type="text/babel">
  let dom = document.querySelector('#root');
    let el = (
       <h1>Hello World</h1>
    )
ReactDOM.render(el, dom);
</script>

jsxを読み込む

まず、jsxを使うためには

* CDNを読み込みに行く
* babelでコンパイルする

上記二つのコードが必要です。

なので

//  CDN読み込み
     <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js">
     </script>

//   scriptタグにtypeを追加する
     <script type="text/babel">
       処理内容
    </script>
     

この二つを記載して初めてスタートラインに立つことができます。

読み込むエレメントは一つだけ！

エレメント三つを同時にレンダリングするとエラーになります。

<div id="root"></div>
<script type="text/babel">
  let dom = document.querySelector('#root');
    let el = (
       <h1>Hello World</h1>
       <h1> Hello Japan </h1>
      <h1> Hello Okinawa </h1>
    )
ReactDOM.render(el, dom);
</script>

uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag (5:3)
  3 |       let el = (
  4 |           <h1> Hello World </h1>
> 5 |            <h1> Hello Japan </h1>
    |           ^
  6 |           <h1> Hello Okinawa </h1>
  7 |            
  8 |       )

「一つのタグで閉じろ」

というエラーが出てしまいます。
修正方法は<div>を親にして一つのタグの中に複数を作るようにすることです。

<div id="root"></div>
<script type="text/babel">
  let dom = document.querySelector('#root');
    let el = (
      <div>
        <h1>Hello World</h1>
        <h1> Hello Japan </h1>
        <h1> Hello Okinawa </h1>
      </div>
    )
ReactDOM.render(el, dom);
</script>

変数を埋め込む

タグだけではなく、変数を利用して汎用性のあるものにできます。

<div id="root"></div>
<script type="text/babel">
  let dom = document.querySelector('#root');
  let title = "hello wooooooorld";
  let message = "thats too long";
    let el = (
      <div>
        <h1>{title}</h1>
        <p> {message}</p>
      </div>
    )
ReactDOM.render(el, dom);
</script>

通常通りjs で変数を作り、 jsxないでは { 変数名 }で埋め込むことが可能です。

スタイルを設定する

配列のオブジェクトにスタイルをそれぞれ書いて、それをタグに渡します。

<div id="root"></div>
<script type="text/babel">
  let dom = document.querySelector('#root');
  let title = "今日も天気がいいですね";
  let style = {
    fontSize : "20pt",
    color: 'red',
    border: '1px solid orange'
  };

    let el = (
      <div>
        <p style={style}>{title}</p>
      </div>
    )
ReactDOM.render(el, dom);
</script>

* プロパティーの書き方はローワーキャメルケースで 
* ハッシュの場合は{}をつかう

スタイルを書くときの注意点です。

他にも判定文や map など組み合わせた書き方がありますが
次回記載していきたいと思います。

おしまい！