超有益資料
まず初めにこちらの資料は非常にわかりやすいです。ぜひ読んでみてください！
コンポーネントとは？
ReactではJavaScriptの中でHTMLを書くことができ、
ボタンやヘッダー、フッターなど、画面の部品単位でパーツを作れます。これをコンポーネントと言います。
JavaScriptの中でHTMLで書く方法を「jsx」と言います。
Reactではこの方法を使いコンポーネントファイルを作成していきます。
コンポーネントの定義
コンポーネントはJavaScriptの関数として定義します。
その時関数名の先頭は大文字にします。
function Practice() { //関数名の先頭は大文字
return <h1>Reactの練習</h1>; //関数で定義するJSXを関数コンポーネント
}
root.render(<Practice />);
//Reactの練習
またアロー関数でも定義できます。
const Practice = () => {
return <h1>Reactの練習</h1>;
};
root.render(<Practice />);
//Reactの練習
この書き方も可能です。
const Practice = () => <h1>Reactの練習</h1>;
root.render(<Practice />);
JSXが複数行の時は()で括るやり方があります。
const Practice = () => {
return (
<div>
<h1>Reactの練習</h1>
</div>
);
};
root.render(<Practice />);
コンポーネントのスタイリング
コンポーネントのスタイリングの方法をやっていきます。
import "./Practice.css"; //CSS ファイルを import する
const Practice = () => {
return (
<div className="component">
</h3>コンポーネント</h3>
</div>
);
};
export default Practice;
.componet{
//省略 お好きなデザイン
}
⚫︎クラス名はclassNameにします。これはJSXの書き方です。
親コンポーネントと子コンポーネント
1つのコンポーネントの中に、別のコンポーネントを導入することで画面を作っていきます。
導入される側を親コンポーネント、導入する側を子コンポーネントと言います。
コンポーネントはjsのファイルとして作成し、親コンポーネントのjsファイルの中に
子コンポーネントのjsファイルをimportしていきます。
コンポーネントの分割方法
コンポーネントの分割方法を実装していきます。
import "./Practice.css"; //CSS ファイルを import する
const Practice = () => {
return (
<div className="component">
<h3>コンポーネント</h3>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</div>
);
};
export default Practice;
これを分割していきます。componentフォルダを作成します。その中にList.jsを作ります。
const List = () => {
return (
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
);
};
export { List };//ここからexportする
import "./Practice.css";
import { List } from "./components/List.js";//List.jsからとってくる
const Example = () => {
return (
<div className="component">
<h3>コンポーネント</h3>
<List /> //List.jsからとってくる
</div>
);
};
export default Practice;
こんな感じで出力されます。
Fragmentというコンポーネント
Fragmentは複数の要素を返したい時に使います。
import Child from "./components/Child";
const Practice = () => <Child />;
export default Practice;
import "./Child.css";
import React, { Fragment } from "react"; //reactのパッケージからインポート
const Child = () => {
return (
<React.Fragment>
<div>
<div className="component">
<h3>コンポーネント</h3>
</div>
<h3>フラグメント</h3>
<p>
コンポーネントの1つで
<br />
React学習は難しい
</p>
</div>
</React.Fragment>
);
};
ざっくりですがこんな感じです。
書き方として<></>の書き方もありますが、下の項目で例を確認してください。
Fragment以外もsectionなど他のコンポーネントもあるみたいです。
JSXの中でJSを実行
JSXの中でJSを書いて実行していきます。
import Child from "./components/Child";
import Express from "./components/Express";
const Practice = () => (
<>
<Child />
<Express />
</>
);
export default Practice;
<></>はFragmentです。
import "./Child.css";
const Child = () => {
return (
<div className="component">
<h3>Reactのコンポーネント</h3>
</div>
);
};
export default Child
const Expression = () => {
const studyTitle = "実装";
return <h3>React{studyTitle}</h3>;
};
export default Expression;
ざっくりですが下の感じです。
もう少し実装していきます。
import "./Express.css";
const Express = () => {
const studyTitle = "実装";
const array = ["list1", "list2", "list3"];
const jsx = <h3>JSXだぞ！</h3>;
return (
<div className={studyTitle.toLowerCase()}>
<div className="Express">
<h3>React{studyTitle}</h3>
<h3>{array}</h3>
{<h3>JSXだぞ！</h3>}
</div>
</div>
);
};
export default Express;
toLowerCaseは大文字を小文字に変換します。
.Express{
color:orange;
border: 5px solid red;
}
import "./Child.css";
const Child = () => {
return (
<div className="component">
<h3>Reactのコンポーネント</h3>
</div>
);
};
export default Child;
import Child from "./components/Child";
import Expression from "./components/Express";
const Example = () => (
<>
<Child />
<Express />
</>
);
export default Example;
資料