みやちゃ
今回は、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>１５行目で、「Greeting」という名前のコンポーネントを作成しています。
中身を見てみると、このコンポーネントは、propsのtype属性をh1タグで表示するものです。
propsとは、コンポーネントに渡されたオブジェクトのことです。
２０、２１行目でコンポーネントを使用しています。
type属性は、それぞれ「おはよう」と「おはこんにちは」なので、このオブジェクトがコンポーネントに渡され、h1タグで表示されるはずです。
では、ブラウザで確認してみましょう。
まとめ
いかがでしたでしょうか？
今回は、コンポーネントの作成について解説しました！
みやちゃ
ここまでご覧いただきありがとうございます！