Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
Reactのプログラムにおいてコンポーネントは非常に重要な役割を担っています。
コンポーネントは表示の内容や必要なデータ、処理などを一つのオブジェクトにまとめたものです。
コンポーネントの書き方
function コンポーネント名 (引数){
return ;
}コンポーネントは<コンポーネント名/>と記述することで利用することができます。
これにより、タグの部分に関数でreturnしたエレメントがはめ込まれる。
下記のコードにおいてReactはプロジェクトの中に組み込まれているのでReactのCDNは読み込む必要がありません。
コンポーネントの違い
前まではクラスコンポーネント (Class Component) じゃないとStateやライフサイクルが扱えなかったのですがReact Hooksが登場したことにより関数コンポーネントでも同じような機能が使えるようになりました。
関数コンポーネント (Functional Component)
import React from 'react';
const Button = (props) => {
return <button>Say, {props.hello}</button>;
};
export default Button;クラスコンポーネント (Class Component)
import React, {Component} from 'react';
class Button extends Component {
render() {
return <button>Say, {this.props.hello}</button>
}
}
export default Button;関数コンポーネント
https://www.agile-software.site/2021/08/08/react-hooks-2/ function Welcome(props) {
return <div className="alert alert-primary">
<p className="h4">Hello React!!</p>
</div>
}作成したWelcomeコンポーネントを埋め込んでいます。
let el = (
<div>
<h5 class="mb-4">{message}</h5>
<Welcome />
</div>
)<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1 class="bg-primary text-white display-4">React</h1>
<div class="container mt-4">
<div id="root">wait...</div>
</div>
<script type="text/babel">
let dom = document.querySelector('#root')
let message ="React component page."
// これが関数コンポーネント
function Welcome(props) {
return <div className="alert alert-primary">
<p className="h4">Hello React!!</p>
</div>
}
// 表示するJSX
let el = (
<div>
<h5 class="mb-4">{message}</h5>
<Welcome />
</div>
)
ReactDOM.render(el, dom)
</script>
</body>
</html>クラスコンポーネント
class クラス名 extends 継承するクラス {・・・}Reactにはコンポーネントの機能を一通りそろえた「React.Components」というクラスがある。
class コンポーネント名 extends React.Component{
}親コンポーネントと子コンポーネント
親コンポーネントでimportできるように子コンポーネントでexportする必要があります。
exportとimport
componentフォルダにあるArticleを
const Article = (props) => {
return (
<div>
<h2>{props.title}</h2>
<p>{props.content}</p>
);
};
export default Article;import Article from "./components/Article";
function App() {
return (
<Article
title={}
content={}
/>
);
}
