React.jsのコード例を自分用にまとめてみる(JSX)

Facebook にシェア
Pocket
LINEで送る
このエントリーを Google ブックマーク に追加

前々回のコードを前回のJSXの説明を元に変換してみる。

基本的な使い方

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BASIC</title>

</head>
<body>
    
    <div id="main"></div>

<!-- React.jsの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<!-- ReactDOM.jsの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="main"></div>
<!-- JSXを使うためのBabelの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

<script type="text/babel">

/* div#main にh1タグを追加してタイトルを挿入する */

// コンポーネントの作成
var Component = React.createClass({
    render: function(){
        return (
                <h1>ベーシックReact.js</h1>
        )
    }
});

// レンダリングする
ReactDOM.render(
    <Component></Component>,
    document.getElementById("main")
);
</script>
</body>
</html>

 

プロパティを与える

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PROPERTY</title>

</head>
<body>
    
    <div id="main"></div>

<!-- React.jsの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<!-- ReactDOM.jsの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="main"></div>
<!-- JSXを使うためのBabelの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

<script type="text/babel">

/* div#main にh1タグを追加してタイトルを挿入する */

// コンポーネントの作成
var Component = React.createClass({
    render: function(){
        return <h1>{val1}{val2}</h1>;
    }
});

// レンダリングする
ReactDOM.render(
    <Component val1="プロ" val2="パティ"></Component>,
    document.getElementById("main")
);
</script>
</body>
</html>