tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【 react.js 】 index.html内の文字を書き換える

ついにreactの勉強スタート

reactのフレームワーク next.js の参考書は今の所一つしかないらしいのです。
kindleだと今なら50%ポイント還元!笑

https://www.amazon.co.jp/dp/B07X7DHZ9F/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

ということでやっていきましょう

reactで文字の書き換えを行う

reactの基本的な動作は書き換えなので、 とりあえずreactを動かしてみましょう!

raectはCDNで利用することができます。
CDNについてはこちらも是非^^

okinawanpizza.hatenablog.com

まずは下をbodyタグ内にコピペしましょう。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

ボディーには下記を追加します

 <body>

      <div id="root">( silence )</div>
      <script>
      let dom =  document.querySelector('#root');
      let element = React.createElement(
      'p',{}, 'how is going mate'
      );
      ReactDOM.render(element, dom);
      </script>
 </body>

表示結果はこうなります。
HTMLには「silence」としか書かれていないのに
表示内容は how is going mateに書き換わっています。

f:id:okinawanpizza:20200224145907p:plain
textには silence って書いたのに....

それを実現する関数が、render()ということになります。

document.querySelectorは指定したセレクタをタグ(要素)ごと取得します。
createElement は要素ノードの新規作成です。

dom = document.querySelector("#root")
console.log(dom)
>>>  <div id="root">( silent )</div>

こんな感じでタグごと格納されています。

これらを使って、コンポーネントの中身を変えていくのがReactです。

おわり