カテゴリー: react

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は上手くいってます。