目次
目的
前回に引き続きReactについて学習を進めた。今回はコンポーネントの分割についてまとめた。
コンポーネントにスタイルを当ててみる
reactでは「className」としてクラスを記述する。
これはJavaScriptでのclassと混在しないようにするため。
import "./Example.css" //Example.cssにCSSを記述する
const Example = () => {
//改行するためにはreturnの後を( )で囲む
return (
<div className = "component">
<h3>Hello Component</h3>
</div>
);
};
export default Example;コンポーネントの分割
今回は以下のソースのulタグ部分を分割してみる
import "./Example.css"
const Example = () => {
return (
<div className = "component">
<h3>Hello Component</h3>
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
<li>item-5</li>
</ul>
</div>
);
};
export default Example;同じディレクトリ内にcomponentsというディレクトリを新しく作成し、コンポーネントファイルを作成
const List = () => {
return (
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
<li>item-5</li>
</ul>
)
}
//外部ファイルで使用可能にする
export { List }import "./Example.css"
import{ List } from "./components/List" //コンポーネントの読み込み
const Example = () => {
return (
<div className = "component">
<h3>Hello Component</h3>
<List/> //コンポーネントの呼び出し
</div>
);
};
export default Example;より細かく分割していく。 componentsディレクトリに先ほどのコードをChildというコンポーネントとして、作成。
import "./Example.css" //Example.cssも同じディレクトリに移動
import{ List } from "./List"
const Child = () => {
return (
<div className = "component">
<h3>Hello Component</h3>
<List/>
</div>
);
};
export default Child;
最終的にここまで細かくできる。
import{ Child } from "./components/Child"
const Example = () => <Child/>;
export default Example;今回はここまで。
