Javascript React プログラミング

React コンポーネントの作成【React.js入門#4】

 

みやちゃ

 

皆さんこんにちは、みやちゃです!

物理とプログラミングについて解説しています!

こちらの記事で、Railsのアプリケーション開発からRspecのテスト、herokuにデプロイまで解説しています!

今回は、React.js入門の第4弾です!

コンポーネントの作成について解説します!

今回は
  • コンポーネントの作成
この記事を読むと

React.jsで重要なコンポーネントの作成ができるようになります!

目次

コンポーネントとは

コンポーネント(component)とは、「部品」を指す言葉です。

Reactでは、このコンポーネントは、独自に定義することができます。

そして、h1タグやpタグのようなHTMLタグのように、自由に再利用することができます。

コンポーネントの作成

それでは実際にコンポーネントを作成して、自由に使ってみましょう。

以下のコードを見てください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
  </head>
  
  <body>
    <div id="root"></div>

    <script type="text/babel">
      function Greeting (props){
        return <h1>{props.type}</h1>
      }
      const dom = 
        <div>
          <Greeting type="おはよう" />
          <Greeting type="おはこんにちは" />
        </div>  

      ReactDOM.render( dom , 
        document.getElementById('root')
      )
    </script>
  </body>
</html>

15行目で、「Greeting」という名前のコンポーネントを作成しています。

中身を見てみると、このコンポーネントは、propsのtype属性をh1タグで表示するものです。

propsとは、コンポーネントに渡されたオブジェクトのことです。

20、21行目でコンポーネントを使用しています。

type属性は、それぞれ「おはよう」と「おはこんにちは」なので、このオブジェクトがコンポーネントに渡され、h1タグで表示されるはずです。

では、ブラウザで確認してみましょう。

まとめ

いかがでしたでしょうか?

今回は、コンポーネントの作成について解説しました!

 

みやちゃ

 

ここまでご覧いただきありがとうございます!

© 2024 とあるエンジニアの備忘録ブログ Powered by AFFINGER5