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

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

大まかな使い方を覚えたので、まとめてみる。

ただ、これをみたところでReact.jsの恩恵を感じることはできない気がしている。

というか、自分自身がまだ恩恵を受けられていないから、伝えられないのだろう。

 

基本的な使い方

div#main の中に、<h1>ベーシックReact.js</h1>を挿入する。

これを読んでも全く恩恵を受けられている感じは受けないけれども、一応ベーシックな使い方。

<!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/javascript">

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

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

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

プロパティを与える

プロパティとは、レンダリングするときにコンポーネント(エレメント)にパラメータを与えるもの。

var1にプロ、var2にパティを与えて、連結して表示している。

 

<!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/javascript">

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

// コンポーネントの作成
var Component = React.createClass({
    render: function(){
        return React.DOM.h1(null, this.props.var1, this.props.var2);
    }
});

// レンダリングする
ReactDOM.render(
    React.createElement(Component, {var1: "プロ", var2: "パティ"}),
    document.getElementById("main")
);
</script>
</body>
</html>