Reactでhello world

Reactでhello world

React.jsを使ってとりあえずレンダリングしてみましょう。習うより慣れろという感じで。

React.jsを使うには以下の3行をheadタグ内に記述する必要があります。（とりあえず）

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>

次にbodyタグ内にjsを記述します。

<script type="text/babel">
  ReactDOM.render(第一引数,第二引数)
</script>

renderメソッドの引数の内容は以下のとおりです。

具体的にどういう内容を記述するかというと以下のように記述します。

<div id="koko"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById("koko")
  )
</script>

これで第一引数の内容で、第二引数のDOMを書き換えてくれます。

“text/javascript”ではなく”text/babel”とします。これはJSXをBabelでトランスパイラするためです。

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^