はじめに
この記事はReact初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。
Componentとは何か
Componentを直訳すると、「部品、構成要素」といった意味の言葉です。
ReactにおけるComponentもまさに「部品」であり、呼び出すだけでComponentが定義するレイアウトを画面に表示することができます。
実装してみる
Componentの作成方法には大きく２通りがあります。
- 関数として作る
- クラスとして作る
ですね。
component_sample.html
<!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://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<h1 class="br-primary text-white display-4">React</h1>
<div class="container mt-3">
<div id="root"></div>
</div>
<script type="text/babel">
let dom = document.querySelector('#root')
let message = "React Component Page"
// 関数コンポーネント
function Welcome(props) {
return <div className={props.alert}>
<p className={props.fontSize}>{props.name}!!</p>
</div>
}
let el = (
<div>
<h5 className="mb-4">{message}</h5>
<Welcome name="Taro" fontSize="h2" alert="alert alert-primary" />
<Welcome name="Hanako" fontSize="h5" alert="alert alert-dark" />
</div>
)
ReactDOM.render(el, dom)
</script>
</body>
</html>
Welcomeという名前の関数Componentを作成しています。
component_sample.html
function Welcome(props) {
return <div className={props.alert}>
<p className={props.fontSize}>{props.name}!!</p>
</div>
}
そして、この部分で呼び出しています。
component_sample.html
<Welcome name="Taro" fontSize="h2" alert="alert alert-primary" />
<Welcome name="Hanako" fontSize="h5" alert="alert alert-dark" />
Componentに引数を渡す場合には、htmlタグに属性を指定するのと同じような形で引数を渡せます。
渡した引数は関数の中で、props.xxxxをいう形で使うことができます。
class_component_sample.html
<!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://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<h1 class="br-primary text-white display-4">React</h1>
<div class="container mt-3">
<div id="root"></div>
</div>
<script type="text/babel">
let dom = document.querySelector('#root')
let message = "React Component Page"
// クラスComponent
class Rect extends React.Component {
x = 0
y = 0
width = 0
height = 0
color = "white"
style = {}
constructor (props) {
super(props)
this.x = props.x
this.y = props.y
this.width = props.w
this.height = props.h
this.color = props.c
this.style = {
backgroundColor:this.color,
position:"absolute",
left:this.x + "px",
top:this.y + "px",
width:this.width + "px",
height:this.height + "px"
}
}
render() {
return <div style={this.style}></div>
}
}
let el = (
<div>
<h5>{message}</h5>
<div>
<Rect x="200" y="200" w="200" h="200" c="cyan" />
<Rect x="300" y="300" w="200" h="200" c="magenta" />
</div>
</div>
)
ReactDOM.render(el, dom)
</script>
</body>
</html>
Rectという名前のクラスComponentを作成しています。
class_component_sample.html
class Rect extends React.Component {
x = 0
y = 0
width = 0
height = 0
color = "white"
style = {}
constructor (props) {
super(props)
this.x = props.x
this.y = props.y
this.width = props.w
this.height = props.h
this.color = props.c
this.style = {
backgroundColor:this.color,
position:"absolute",
left:this.x + "px",
top:this.y + "px",
width:this.width + "px",
height:this.height + "px"
}
}
render() {
return <div style={this.style}></div>
}
}
そして、この部分で呼び出しています。
class_component_sample.html
<Rect x="200" y="200" w="200" h="200" c="cyan" />
<Rect x="300" y="300" w="200" h="200" c="magenta" />
関数Componentと同じように、htmlタグの属性のような形で引数を渡すことができます。
渡された引数は最初にconstructorで処理され、最終的にrenderメソッドのreturnで書かれているhtmlが画面に渡されます。
最後に
Componentを使うことで一気に実用的になってきた感じがしますね。
特にクラスComponentの方は、constructorとかも出てきてバックエンド畑の自分にとっては一気に馴染み深くなった気がします。