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メソッドの引数の内容は以下のとおりです。

第一引数 第二引数
レンダリングするthml レンダリング先のDOM

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

<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でトランスパイラするためです。

サンプル

Reactでhello world

コメント

タイトルとURLをコピーしました