【超超簡単】スクリプトコードを用意してJSXを使ってみよう！

3048 ワード
React JavaScript render JSX JavaScript テキストリンク

JSXとは

JSXを使うとjavascriptの中にHTMLタグを書けるようになります。
JSXはReactでは、必須ではないですが覚えておいたほうが便利です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>React</title>
       <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

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

       <h1>React</h1>
       <div id="root">wait...</div>
<script>
    let dom =document.querySelector('#root');

    let element = React.createElement(
    'p',{}, 'Hello React'
    );
    ReactDOM.render(element, dom);
</script>

    </body>
</html>

Reactの＜script＞タグの用意

こちらの＜script>タグを用意してください

<!--Reactの本体-->

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

<!--仮想DOMのスクリプトファイル-->
 <script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"><!--仮想DOMのスクリプトファイル-->

組み込み用タグの用意

Reactの表示に組み込むElementメソッドを取得します。
querySelectorメソッドを使い id="rootを取得します。

  <div id="root">wait...</div>

let dom =document.querySelector('#root');

仮想Elementの作成

次にReactのcreateElementでエレメントを作成します。
とりあえず、Reactでは仮想DOMのエレメント作って組み込むことだけ覚えましょう。

let elementでelementの変数を定義して
以下のようにメソッド作ります

React.createElement（タグ名,　属性, 中に組み込まれるもの);

let element = React.createElement(
'p',{}, 'Hello React'
);

レンタリングで仮想elementを表示させよう

作成した仮想DOMのElemenはレンタリングをつかって表示させます。
renderメソッドで以下のように表示させます。

ReactDOM.render(element, dom);

画面にはこう表示されます。

・Reactでid="root"の値を取得する前

・仮想elemntを作成しレンタリングした後。

ご清聴ありがとうございます。
これからも定期的に投稿していこうと思うので少しでもためになったら、
LGTMまたは、フォローよろしくお願いします！