Reactのコンポーネントを表示させる。
Reactのコンポーネントは、関数でもクラスでも作成することができる。
関数のコンポーネント
関数のコンポーネントを表示させる。
関数のコンポーネントの定義
関数のコンポーネントの定義は以下のようになる。
function コンポーネント名 (引数){
return {JSXの表記} ;
}実際の例
<!DOCTYPE html>
<html>
<head>
<title>react</title>
<meta charset="UTF-8">
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<h1>React Test</h1>
<div class="mountain-name">Mountain name</div>
<script type="text/babel">
let dom = document.querySelector('.mountain-name');
//Mountainコンポーネントの定義
function Mountain(props) {
return <p>Hello,{props.name}</p>;
}
//Mountainコンポーネント<Mountain/>をJSXに埋め込み、ブラウザに表示
let element = (
<div>
<Mountain name="利尻岳" />
<Mountain name="燧ヶ岳" />
<Mountain name="日光白根山" />
</div>
);
ReactDOM.render(element, dom);
</script>
</body>
</html>Mountainコンポーネントを定義。
引数のpropsが<Mountain />の部分から値を受け取っている。
//Mountainコンポーネントの定義
function Mountain(props) {
return <p>Hello,{props.name}</p>;
}結果は下記のようになる。
クラスのコンポーネント
次はクラスのコンポーネントを見ていく。
クラスのコンポーネントの定義
クラスのコンポーネントの定義は下記のようになる。
class クラス名 extends React.Component {
constructor (props) {
super(props);
初期化
}
render() {
return {JSX}
}
}
React.Componentとは、コンポーネントの機能を一通り揃えたクラス。
React.Componentクラスを継承することで、自分でコンポーネントを定義できる。
また、コンポーネントクラスを作成する時は、renderメソッドが必ず必要になる。
実際の例
<!DOCTYPE html>
<html>
<head>
<title>react</title>
<meta charset="UTF-8">
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<h1>React Test</h1>
<div class="mountain-name">Mountain name</div>
<script type="text/babel">
let dom = document.querySelector('.mountain-name');
//クラスのコンポーネント
class Mountain extends React.Component{
//初期化。初期値をthis.stateで設定
constructor(props){
super(props);
this.state = {
name: "Let's add Mountain name"
}
}
//JSXで表示する文字を戻り値として返す。this.propsを指定し、propsの値を取得。
render(){
return <p>Hello,{this.props.name}</p>;
}
}
//ブラウザに表示させるためのJSX
let element = (
<div>
<Mountain name="利尻岳" />
<Mountain name="燧ヶ岳" />
<Mountain name="日光白根山" />
</div>
);
ReactDOM.render(element, dom);
</script>
</body>
</html>
出力はこうなる。
クラスのコンポーネントを使用した例。
まずはクラスのコンポーネントを定義。React.Componentを継承している。
//クラスのコンポーネント
class Mountain extends React.Component{
//初期化。初期値をthis.stateで設定
constructor(props){
super(props);
this.state = {
name: "Let's add Mountain name"
}
}React.Componentを使うにはrender()が必須になる。
this.propsを指定することで、propsの値を取得している。
//JSXで表示する文字を戻り値として返す。this.propsを指定し、propsの値を取得。
render(){
return <p>Hello,{this.props.name}</p>;
}
}propsの値ではなく、初期値のstateの値を取得する時は、{this.state.name}となる。
その場合結果は下記のように変化する。
表示はJSXの部分で表示。
let element = (
<div>
<Mountain name="利尻岳" />
<Mountain name="燧ヶ岳" />
<Mountain name="日光白根山" />
</div>
);
ReactDOM.render(element, dom);
