目次
背景
今回はReactで、コンポーネントについて学んだことをまとめてみる。
コンポーネントとは？
画面の各構成要素をReactで定義したもので、利点は以下の3つ。
- 再利用性の向上（コードが使いまわせる）
- 可読性の向上（コードが整理される）
- 疎結合になる（バグを減らせる）
コンポーネントの定義
コンポーネントは JavaScriptの関数として定義する
function Welcome(){
return <h1> Hello </h1>; // コンポーネントはJSXを返す
}以下のように実行
<Welcome/>実際にHTML内で使用してみる。
<!DOCTYPE html>
<html>
<head>
<script src="../../../../libs/react.development.js"></script>
<script src="../../../../libs/react-dom.development.js"></script>
<script src="../../../../libs/babel-standalone.js"></script>
</head>
<body>
<div id="app"> </div>
<!-- type="text/babel"とすることでhtmlタグの使用が可能となる -->
<script type="text/babel">
//対象elementを指定する
const appEl = document.querySelector("#app");
const root = ReactDOM.createRoot(appEl);
//コンポーネント(先頭は必ず大文字で記述 小文字だとhtmｌタグと誤認識される)
function Example(){
return <h1>Hello React </h1>;
}
root.render(<Example />);
</script>
</body>
</html>アロー関数でもコンポーネントを定義できる。
const Example = ()=>{
return <h1>Hello React </h1>;
}
//関数の中身がreturnのみだと省略できる
const Example = () => <h1>Hello React </h1>今回はここまで。
