ウェブサイト制作

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

     </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);