Reactの基本!コンポーネントについて

# 超有益資料
まず初めにこちらの資料は非常にわかりやすいです。ぜひ読んでみてください！

https://read-engineer.com/2020/12/11/react/#index_id5

https://read-engineer.com/2020/07/30/spa/#index_id1


# コンポーネントとは？
ReactではJavaScriptの中でHTMLを書くことができ、
ボタンやヘッダー、フッターなど、画面の部品単位でパーツを作れます。これを```コンポーネント```と言います。

JavaScriptの中でHTMLで書く方法を```「jsx」```と言います。
Reactではこの方法を使いコンポーネントファイルを作成していきます。

# コンポーネントの定義
コンポーネントは***JavaScriptの関数として定義***します。
その時```関数名の先頭```は***大文字***にします。

```react
function Practice() {  //関数名の先頭は大文字
        return <h1>Reactの練習</h1>;　//関数で定義するJSXを関数コンポーネント
      }
      root.render(<Practice />);
//Reactの練習
```
またアロー関数でも定義できます。

```jsx
const Practice = () => {
        return <h1>Reactの練習</h1>;
      };
      root.render(<Practice />);
//Reactの練習
```
この書き方も可能です。
```jsx
const Practice = () => <h1>Reactの練習</h1>;

      root.render(<Practice />);
```
***JSXが複数行の時は()で括るやり方***があります。
```jsx
const Practice = () => {
        return (
          <div>
            <h1>Reactの練習</h1>
          </div>
        );
      };

      root.render(<Practice />);

```




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/022a7ee0-0b57-c927-cfd3-c68e2f47e17e.png)

> 引用　https://read-engineer.com/2020/12/11/react/#index_id5

# コンポーネントのスタイリング
コンポーネントのスタイリングの方法をやっていきます。

```Practice.js
import "./Practice.css"; //CSS ファイルを import する 

const Practice = () => {
  return (
    <div className="component">
      </h3>コンポーネント</h3>
    </div>
  );
};

export default Practice;
```
```Practice.css
.componet{
   //省略　お好きなデザイン
}
```
⚫︎***クラス名はclassName***にします。これはJSXの書き方です。

# 親コンポーネントと子コンポーネント
***1つのコンポーネントの中に、別のコンポーネントを導入することで画面を作っていきます***。
```導入される側を親コンポーネント```、```導入する側を子コンポーネント```と言います。
コンポーネントはjsのファイルとして作成し、親コンポーネントのjsファイルの中に
子コンポーネントのjsファイルをimportしていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/ecaf423c-14d7-cae6-8fb6-72d3c1d96e70.png)

> 引用　https://read-engineer.com/2020/12/11/react/#index_id5


# コンポーネントの分割方法
コンポーネントの分割方法を実装していきます。

```Practice.js
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を作ります。

```List.js
const List = () => {
  return (
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
      <li>リスト4</li>
    </ul>
  );
};

export { List };//ここからexportする
```

```Practice.js
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;
```
![スクリーンショット 2023-04-02 23.31.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/0acd3b69-f222-94d1-0fe0-3c155d79c35b.png)
こんな感じで出力されます。


# Fragmentというコンポーネント
Fragmentは複数の要素を返したい時に使います。

```Practice.js
import Child from "./components/Child";

const Practice = () => <Child />;

export default Practice;
```

```Child.js
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>
  );
};
```
ざっくりですがこんな感じです。

![スクリーンショット 2023-04-03 0.38.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/0f6c2257-396a-476d-86e7-6e728c225685.png)

書き方として```<></>```の書き方もありますが、下の項目で例を確認してください。
Fragment以外もsectionなど他のコンポーネントもあるみたいです。

# JSXの中でJSを実行
JSXの中でJSを書いて実行していきます。

```Practice.js
import Child from "./components/Child";
import Express from "./components/Express";

const Practice = () => (
  <>
    <Child />
    <Express />
  </>
);

export default Practice;
```
```<></>はFragment```です。

```Child.js
import "./Child.css";

const Child = () => {
  return (
    <div className="component">
      <h3>Reactのコンポーネント</h3>
    </div>
  );
};

export default Child
```

```Express.js
const Expression = () => {
  const studyTitle = "実装";
  return <h3>React{studyTitle}</h3>;
};

export default Expression;
```
ざっくりですが下の感じです。

![スクリーンショット 2023-04-03 1.01.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/0b5793a7-439a-1935-7941-1ca8ebfd367c.png)

もう少し実装していきます。

```Express.js
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.css
.Express{
       color:orange;
    border: 5px solid red;
}  
```

```Child.js
import "./Child.css";

const Child = () => {
  return (
    <div className="component">
      <h3>Reactのコンポーネント</h3>
    </div>
  );
};

export default Child;
```

```Practice.js
import Child from "./components/Child";
import Expression from "./components/Express";

const Example = () => (
  <>
    <Child />
    <Express />
  </>
);

export default Example;
```
![スクリーンショット 2023-04-03 1.45.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/2a489ca7-aeb5-96e8-2bfc-78cd933db349.png)



# 資料

https://read-engineer.com/2020/12/11/react/#index_id5

https://www.udemy.com/course/react-complete-guide/

https://ja.reactjs.org/docs/fragments.html

https://marsquai.com/745ca65e-e38b-4a8e-8d59-55421be50f7e/f83dca4c-79db-4adf-b007-697c863b82a5/2bc34da4-3f8c-4b46-8e10-b016dbcb89bb/