SnowNotes
archive

[React] Reactのコンポーネントを表示させる

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=“日光白根山” />


 &lt;/div&gt;


);
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="日光白根山" />

 &lt;/div&gt;


);
ReactDOM.render(element, dom);`