Category: React.js

React.js 4

<script type="text/babel">
        (() =>{

            function Counter(){
            return <div>0</div>
        }

            ReactDOM.render(
                <div>
                    <Counter/>
                    <Counter/>
                    <Counter/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <div>0 {props.color}</div>
        }

            ReactDOM.render(
                <div>
                    <Counter color="red"/>
                    <Counter color="yellow"/>
                    <Counter color="blue"/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <div style={{backgroundColor:props.color}}>0</div>
        }

            ReactDOM.render(
                <div>
                    <Counter color="red"/>
                    <Counter color="yellow"/>
                    <Counter color="blue"/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <li style={{backgroundColor:props.color}}>0</li>
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

[ccs]
body {
font-size:16px;
font-family: Verdana, sans-serif;
}

.container {
width: 330px;
margin: 20px auto;
}

.container ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap:wrap;
}

.container li {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
cursor: pointer;
user-select: none;
border-radius: 5px;
margin: 0 5px 10px;
}
[/ccs]

React.js 3

camelcaseでclassを書くこともできる。

<script type="text/babel">
        (() =>{

            ReactDOM.render(
                <div className="box"></div>,
                document.getElementById('root')
            );
    })();
    </script>

inlineもok

<script type="text/babel">
        (() =>{

            ReactDOM.render(
                <div style={{width:150, height:100, backgroundColor:'blue'}}></div>,
                document.getElementById('root')
            );
    })();
    </script>

onClick

<script type="text/babel">
        (() =>{

            function showMessage(){
                alert('this is alert!');
        }

            ReactDOM.render(
                <div style={{width:150, height:100, backgroundColor:'blue'}} onClick={showMessage}></div>,
                document.getElementById('root')
            );
    })();
    </script>

うぉ、なんかすげー疲れた。。
あれ、今の所は、レンダリングやalertなど特段JSで処理できることばかりだから、React.jsを使う場面がいまいち想像つかないぞ。。

React.js 2

JSXで渡せるのは一つだけ。
XMLベースのため、hrなど閉じタグのないタグはエラーになる。

<div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            const name = "yamada";
            ReactDOM.render(
                <p>React, {name.toUpperCase()}</p>, document.getElementById('root')
            );
    })();
    </script>

React, YAMADA

複数の要素を渡す場合は、親要素で囲う

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            const name = "Yamada";
            ReactDOM.render(
                <div>
                    <p>React, {name.toUpperCase()}</p>
                    <p>{name.toLowerCase()}</p>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>
</body>
</html>

React, YAMADA
yamada

React.js 1

– ユーザインタラクティブな画面をシンプルに構築
https://ja.reactjs.org/

– ES6:JavaScriptの新しい規格

– react developer toolsをchromeに入れる

あれ、atomと同じマークだ。atomってelectron&github開発だよね、確か。

– CDNはtutorialから取得
https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            ReactDOM.render(
                <p>React</p>, document.getElementById('root')
            );
    })();
    </script>
</body>
</html>

React.jsとは

React.jsはUIのパーツを作るためのライブラリ
FacebookがOSSとして公開 https://github.com/facebook/react

idに○○を指定して、部品を動かす、などの際に使用する。

<html>
    <body>
        <div id="hogehoge"></div>
    </body>
</html>

Elemental UI

– ボタン、テキストが大量にあり、入力内容を即座に表示するような部品に活きる
　- 電卓、カレンダーなど
– jQueryのように、アニメーションが得意ではない
– Facebook, Instagram, Yahoo, Atomなどが導入
– Backbone.jsやAngular.jsとも併用可能
– 通常はJSXを使うが、自動コンパイルされる
– npm react-toolsによるJSXビルドの方法もある

React.jsのファイルを読み込む

<script src="http://fb.me/react-0.13.3.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>

sample

<html>
    <head>
        <script src="http://fb.me/react-0.13.3.js"></script>
        <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
    </head>
    <body>
        <div id="app"></div>

        <script type="text/jsx">
            var Test = React.createClass({
            render: function(){
            return (
                <p>This is React Test!</p>
            );
        }
        });

        var m = React.render(<Test />, document.getElementById('app'));
        </script>
    </body>
</html>

vue.js vs react.js


reactの基本は知っておく必要があるかもだが、vue.jsの方が強いな。

reactでcomponentの引数を渡す

reactでcomponentの引数を渡したい時があると思いますので、そのサンプルを書きます。

Counterという関数。propsを受け取り、そのcolorを書きます。｛props.color｝

function Counter(props){
		return <div>0 {props.color}</div>
	}

渡す方です。

<div>
			<Counter color="blue"/>
			<Counter color="yellow"/>
			<Counter color="red"/>
		</div>,

繋げてみます。

(() => {

		function Counter(props){
		return <div>0 {props.color}</div>
	}

		ReactDOM.render(
		<div>
			<Counter color="blue"/>
			<Counter color="yellow"/>
			<Counter color="red"/>
		</div>,
			document.getElementById('root')
		);
	})();

うまく引き継がれました。

それをdivタグのsytleの属性に渡します。
backgroundColor:props.colorとすることで、props.colorを背景色に指定しています。

function Counter(props){
		return <div style={{backgroundColor:props.color}}>0</div>
	}

reactで使う関数の基本構文

クリックするとアラートが表示される関数をreactで書きたいとします。
アラートはシンプルに書きます。

function showMessage(){
		alert('Hello');
	}

これをreact内に書くとき。
onClick={showMessage}で呼び出します。その際に、onClick=”showMessage”だとstringと認識されるため、{}を指定してあげてください。

<div id="root"></div>
	<script type="text/babel">
		(() => {

		function showMessage(){
		alert('Hello');
	} 

		ReactDOM.render(
			<div className="box" onClick={showMessage}></div>,
			document.getElementById('root')
		);
	})();
	</script>

では、ブラウザで表示を確認します。

JSX

constで変数を渡すこともできます。

<script type="text/babel">
		(() => {

		const name = 'engineer';
		ReactDOM.render(
			<p>Hello! {name.toUpperCase()}</p>,
			document.getElementById('root')
		);
	})();
	</script>

こうですね。

readctDOM.renderの中でタグを複数書くとエラーになる

<div id="root"></div>
	<script type="text/babel">
		(() => {

		const name = 'engineer';
		ReactDOM.render(
			<p>hello</p><p>world</p>,
			document.getElementById('root')
		);
	})();
	</script>

divタグで囲うとエラーが消える。

React

A JavaScript library for building user interfaces
react
https://reactjs.org/

chromeにreact developer toolを入れます。

拡張管理を押下。
ファイルのURLへのアクセスを許可する　をonにする

reactの公式より、try reactを押下
https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

このscriptタグの箇所をコピペ

<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>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

htmlの中に入れていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
	 <meta charset="UTF-8">
	 <title>React</title>
	 <link rel="stylesheet" href="css/styles.css">
	 <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>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
	<script type="text/babel">
		
	</script>
</body>
</html>

reactを書いていきます。

<div id="root"></div>
	<script type="text/babel">
		(() => {
		ReactDOM.render(
			<p>Hello!</p>,
			document.getElementById('root')
		);
	})();
	</script>

reactでは、(() => {})();と書く。もはやfunctionは省略。変わった書き方だ。
document.getByElementは上手くいってます。