Reactの講座で学んだ事をまとめてます！

# まずは、Javascriptを学ぼう!!

Javascriptの変数の定義の仕方:
~~~Javascript
var val1 = "var変数";
console.log(val1);
//=> var変数

val1 = "var変数を上書き"
console.log(val1)
//=> var変数を上書き

var val1 = "var変数を再宣言"
console.log(val1);
//=> var変数を再宣言
~~~

varの変数宣言では何でも出来てしまう
###### =>プロジェクトが大きくなってくると意図しない所で変数を再宣言,上書きしてしまう!!

そこで、、、
###### let , constという宣言が追加された

##### let: 上書きは出来るが再宣言出来ない
~~~Javascript
let val2 = "let変数";
console.log(val2)

val2 = "let変数を上書き";
console.log(val2)

let val2 = "let変数を再宣言"
//=>Identifier 'val2' has already been declared 
~~~

##### const: 上書き , 再宣言出来ない

~~~Javascript
const val3 = "const変数"
console.log(val3)
//=>const変数 

val3 = "const変数を上書き";
//=>"val3" is read-only

const val3 = "const変数を再宣言"
//=> Identifier 'val3' has already been declared
~~~

Javascriptのオブジェクトや配列は値を変えれる!!

オブジェクト:
~~~Javascript
const val4 = {
  name: "じゃけぇ",
  age: 28,
};

console.log(val4);
//=> name: "じゃけぇ", age: 28}

//nameの中身を書き換える
val4.name = "jak";

//新しいプロパティを追加する
val4.address = "Hiroshima";
console.log(val4)
//=> name: "jak", age: 28, address: "Hiroshima"}
~~~

配列:
~~~Javascript
const val5 = ['dog', 'cat'];
console.log(val5)
//=> ["dog", "cat"]

//配列の中身を変える
val5[0] = "bird"
console.log(val5)
//=> ["bird", "cat"]

//配列を追加する
val5.push("monkey")
console.log(val5)
//=> ["bird", "cat", "monkey"]
~~~

#### Reactでは基本constを使い、処理の中で変更が必要な場合、letを使う!!

#### テンプレート文字列
簡単に言うと、文字列の中にJavascriptの変数が便利に埋め込めるようになった。

「私の名前はじゃけぇです。年齢は28歳です」と表示させたい時、、、
従来の方法:
~~~Javascript
const name = "じゃけぇ";
const age = 28;

const message1 = "私の名前は" + name + "です。年齢は" + age + "です。";
console.log(message1);
~~~

上記の方法だと、コードが長くなって読みずらくなってしまう。
###### => テンプレート文字列を用いる

~~~Javascript
const name = "じゃけぇ";
const age = 28;

//文字列をバッククオテ―ション(``)で囲む
const message2 = `私の名前は${name}です。年齢は${age}です。`;
console.log(message2);
~~~

#### アロー関数

###### 従来の関数の書き方:
~~~Javascript
function func1(str) {
  return str;
}

console.log(func1("func1です"));
//=> func1です
~~~

~~~Javascript
const func1 = function (str) {
  return str;
};

console.log(func1("func1です。"));
//=> func1です。
~~~

#### アロー関数:
- functionは書かずにそのまま引数を書く
- => がアロー関数の由来
- 処理の中で => がある。 = 関数を使っていると思って良い

~~~Javascript
const func2 = (str) => {
    return str;
};

console.log(func2("func2です。"));
//=> func2です。
~~~

引数を書いて、 「=>」を書いてその後{}で処理を書いていくという書き方

引数が2つの時、、、
~~~Javascript
const func3 = (num1, num2) => {
    return num1 + num2;
};

console.log(func3(10,20));
//=>30
~~~

#### 分割代入
~~~Javascript
const myProfile = {
    name: "じゃけぇ"
    age: 28
};

const message1 = `名前は${myProfile.name}です。年齢は${myProfile.age}`;
console.log(message1);

//=> 名前はじゃけぇです。年齢は28 
~~~

###### myProfileという変数がもっと長かったり、もっと設定項目が多いとコードが読みずらくなる。
###### => 分割代入を用いてコードを綺麗にする!

##### 分割代入(const { name, age } = myProfile)で、<br>
##### オブジェクトから指定のプロパティを抜き出して自由に使えるようになる。

~~~Javascript
const myProfile = {
  name: "じゃけぇ",
  age: 28
};

const { name, age } = myProfile;
const message2 = `名前は${name}です。年齢は${age}歳です。`;
console.log(message2);
//=> 名前はじゃけぇです。年齢は28歳です。
~~~

##### 何と! 配列にも使える!

ちなみに、分割代入を使わない時は、、、
~~~Javascript
const myProfile = ["じゃけぇ", 28];
const message3 = 名前は${myProfile[0]}です。年齢は${myProfile[1]}歳です。`;
console.log(message3);
//=>名前はじゃけぇです。年齢は28歳です。 
~~~

###### 分割代入を使うと、、、
配列の場合、オブジェクトのように名前が決まってないので順番に受け取る
myProfileの最初の要素がname , 次の要素がageに入る
~~~Javascript
const myProfile = ["じゃけぇ", 28];
const [name, age] = myProfile;
const message4 = `名前は${name}です。年齢は${age}歳です。`;
console.log(message4);
//=> 名前はじゃけぇです。年齢は28歳です。 
~~~

#### デフォルト値、引数など
~~~Javascript
const sayHello = (name) => console.log(`こんにちは${name}さん!`);
sayHello("じゃけぇ");
//=> こんにちはじゃけぇさん!
~~~

引数が渡されない時、、、
~~~Javascript
sayHello();
//=> こんにちはundefinedさん!
//値が入っていない初期状態undifinedと判定される
~~~

引数が渡されない時のデフォルトの値を設定したいとき
nameの後に = を付けて設定したい値を入れる

~~~Javascript
const sayHello = (name = "ゲスト") => console.log('こんにちは${name}さん！');
sayHello();
//=> こんにちはゲストさん

sayHello("じゃけぇ");
//=>こんにちはじゃけぇさん!
~~~

#### スプレッド構文
従来の配列の展開、、、
~~~Javascript
const arr1 = [1,2];
console.log(arr1);
//=> [1,2]
~~~

スプレッド構文で配列を展開すると、、、
~~~Javascript
const arr1 = [1, 2];
console.log(...arr1);
//  => 1 2
~~~
配列だったが実際の1,2という値になっている。
配列の中身を順場に処理して展開する

~~~Javascript
const arr1 = [1, 2];
const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(arr1[0], arr1[1]);
//=>3
~~~

スプレッド構文を使って引数を渡すと、、、
~~~Javascript
const sumFunc = (num1, num2) => console.log(num1 + num2);
const arr1 = [1, 2];
sumFunc(...arr1);
//=> 3
~~~

スプレッド構文で渡すと要素が順番に設定されるので、↑の行と同じ事をしている
イメージ: ...　=> 順番に処理する

#### 展開の反対で1つにまとめる
配列をまとめて受け取るのに使える
~~~Javascript
const arr2 = [1,2,3,4,5,6];
const [num1, num2, ...arr3] = arr2;

console.log(num1);
//=>1

console.log(num2);
//=>2

console.log(arr3);
//=>[3, 4, 5]
~~~

#### 配列のコピー、結合

~~~Javascript
const arr4 = [10, 20];
const arr5 = [30, 40];

//arr4の同じ要素を持つarr6という配列を作る
const arr6 = [...arr4];
console.log(arr6);
//=>[10, 20]
~~~

arr4とarr5を結合した新しい配列を作る
~~~Javascript
const arr4 = [10, 20];
const arr5 = [30, 40];
const arr7 = [...arr4, ...arr5];
console.log(arr7);
// => [10, 20, 30, 40]
~~~

...arr4 => arr4を展開してできた10,20
...arr5 => arr5を展開してできた30,40
よって、[10,20,30,40,50]という配列が作られる

##### コピーするだけなら下記のような書き方でも良いのでは、、、?
~~~Javascript
const arr4 = [10, 20];
const arr8 = arr4;

console.log(arr8);
//=> [10,20]

arr8[0] = 100;
console.log(arr4);
//=> [100,20]
~~~

##### 元々,arr4 = [10 , 20]だったのが[100,20]になっている!:scream:
##### =>元の配列も変わってしまう
##### => 不具合が発生する可能性がある!
<font color="Red">配列をコピーしたいときはスプレッド構文を使う!</font>

### mapやfilterを使った配列の処理

for文を使った処理:
~~~Javascript
const nameArr = ["田中", "山田", "じゃけぇ"];
for (let index = 0; index < nameArr.length; index++) {
  console.log(nameArr[index]);
}

// =>田中
//   山田
//   じゃけぇ

~~~

mapを使った処理:
~~~Javascript
const nameArr = ["田中", "山田", "じゃけぇ"];

const nameArr2 = nameArr.map((name) => {
  return name;
});

console.log(nameArr2);
// =>["田中", "山田", "じゃけぇ"]

~~~
###### 順場に入ってきた値をそのまま返している
###### for文と同じ結果になっている。

~~~Javascript
const nameArr = ["田中", "山田", "じゃけぇ"];
nameArr.map((name) => {
  console.log(name);
});

// => 田中
//    山田
//    じゃけぇ

~~~

##### map: 配列に対して使って、中で順番に要素が引数に設定され、それを関数内で処理させる

##### mapの使い方:
- 単純に配列をループさせて何かを処理する
- returnされた結果に基づいて新しい配列を作る

##### filter: ある条件に一致したものだけ返して新しい配列を作る

~~~Javascript
const numArr = [1, 2, 3, 4, 5];

//この配列から奇数を取り出して新しい配列を作りたい時
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
});
console.log(newNumArr);
// =>[1, 3, 5]
~~~

###### mapで配列が何番目かを表示させたいとき、、、
1つ目の引数には配列の要素が入り、2つ目の引数には順番が0から入る

~~~Javascript
const nameArr = ["田中", "山田", "じゃけぇ"];
nameArr.map((name, index) => {
  console.log(`${index + 1}番目は${name}です`);
});

// =>  1番目は田中です
//     2番目は山田です
//     3番目はじゃけぇです
~~~

###### const nameArr = ["田中", "山田", "じゃけぇ"];
###### ↑の要素の"じゃけぇ"以外に「さん」を付けて新しい配列を作りたいとき、、、

~~~Javascript
const nameArr = ["田中", "山田", "じゃけぇ"];
const newNameArr = nameArr.map((name) => {
  if (name === "じゃけぇ") {
    return name;
  } else {
    return `${name}さん`;
  }
});
console.log(newNameArr);
//=>["田中さん", "山田さん", "じゃけぇ"]
~~~

##### 三項演算子
構文: ある条件? 条件がtrueの時 : 条件がfalseの時

~~~Javascript
const val1 = 1 > 0 ? "trueです" : "falseです";
console.log(val1);
//=> trueです
~~~

~~~Javascript
const num = 1300;

//toLocalString: 金額とかで,区切りに3桁表示してくれる。
console.log(num.toLocaleString());

//=>1,300
~~~

~~~Javascript
const num = "1300";
const formattedNum =
// typeof: その変数の型が何かを判定する
  typeof num === "number" ? num.toLocalString() : "数値を入力してください";

console.log(formattedNum);
// => 数値を入力してください
~~~

~~~Javascript
const checkSum = (num1, num2) => {
  return num1 + num2 > 100 ? "100を超えています!!" : "許容範囲内です";
};
console.log(checkSum(50, 40));
//=> 許容範囲内です
~~~

###### 関数のreturn部分でも三項演算子を使ったりする

##### 論理演算子の本当の意味を知ろう(&& ||)

一般的な使い方:
~~~Javascript
const flag1 = true;
const flag2 = false;

if (flag1 || flag2) {
  console.log("1か2はtrueになります");
}
// //=>1か2はtrueになります

if (flag1 && flag2) {
  console.log("1も2もtrueになります。");
}
//=> (何も表示されない)
~~~

##### <font color="Red">実は || && は、「または」 , 「かつ」という意味ではない。</font>

例: ||の場合
~~~Javascript
const num = null;
const fee = num || "金額未設定です";
console.log(fee);
//=>金額未設定です
~~~

~~~Javascript
const num = 100;
const fee = num || "金額未設定です";
console.log(fee);
//=> 100
~~~

#### 何故、このような事が起きるのか？
### || は左側がfalseなら右側を返すという意味:flushed:
### ||の左側がtrueならそのまま左側を返す:flushed:

例: &&の場合

~~~Javascript
const num2 = 100;
const fee2 = num2 && "何か設定されました";
console.log(fee2);
//=> 何か設定されました
~~~

~~~Javascript
const num2 = null;
const fee2 = num2 && "何か設定されました";
console.log(fee2);
// => null
~~~

### && は左側がtrueなら右側を返す　falseなら左側を返す:flushed:

## Reactを学ぼう!!

一旦、大事なこと:
public/index.html
~~~HTML
<div id="root"></div>
~~~
ReactなどのSPA開発では、index.html自体は一枚で
後は、Javascriptで要素を書き換えて画面の遷移を表現する

この記述はHTMLのどの部分にJavascriptを差し込んでいくかという目印

src/index.js
~~~Javascript

import { StrictMode } from "react";
import ReactDom from "react-dom";

import App from "./App";

//renderという処理で実際にJavascriptの内容を反映する
ReactDom.render(
  <StrictMode>
    
    //import APP from "./APP"より、APP.jsというファイルを読み込む
    <App />
  </StrictMode>,

  //rootというidを取得する
  document.getElementById("root")

);
~~~

APP.js
~~~Javascript
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

~~~
index.jsで読み込まれて↓のような画面が表示される!
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/c19d82da-b119-f124-628f-4aae7c3327cb.png)



## JSX記法について

index.js
~~~
import React from react
~~~
この記述は、Reactのコンポーネントを書いていくのに
必ず必要!!

~~~
import ReactDom from 'react-dom 
~~~

index.jsには、HTMLにコンポーネントを反映していく必要がある
それに必要なReactDomをimportする

##### Reactでは関数を使って画面の要素であるコンポーネントを表現する
~~~Javascript
const APP = () => {
    return null;
}
//これでnullという値を返すAPPという関数が出来た
~~~

この関数を画面に反映するためにReactDomの中にあるrenderという関数を使う
ReactDom.render(<レンダリングする関数名 /> , 反映する場所)

~~~Javascript
const APP = () => {
    return null;
}

ReactDom.render(<App /> , document.getElementById("root"))

~~~

### 実際にJSX記法を使って画面に要素を表示してみよう!!
ReactではJavascriptの中にHTMLを書いていく感じ
~~~Javascript

import React from "react";
import ReactDom from "react-dom"

const App = () => {
  return <h1>こんにちは</h1>
}

ReactDom.render(<APP />, document.getElementById("root"));
~~~

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/a37e4fc5-6404-4ba9-683f-e90255a96c1c.png)



###### 更に、JSX記法を使って要素を追加してみよう!!
要素が複数(returnのに内容が複数)の時は、
下記のようにreturnに()を用いる

~~~Javascript

import React from "react";
import ReactDom from "react-dom"

const App = () => {
  return (
    <h1>こんにちは</h1>
    <p>お元気ですか?</p>
  )
}

ReactDom.render(<APP />, document.getElementById("root"));
~~~

#### <font color="Red">しかし、、、エラーが発生!!:scream:</font>

![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/541deb84-7d65-50de-00a4-07dc28527dfe.png)


### JSX記法のルール:  returnするHTMLの内容は1つのタグで囲む!!
今回は、divタグで囲む

~~~Javascript

import React from "react";
import ReactDom from "react-dom"

const App = () => {
  return (
    <div>
        <h1>こんにちは</h1>
        <p>お元気ですか?</p>
    </div>
  )
}

ReactDom.render(<APP />, document.getElementById("root"));
~~~

![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/63be5371-d8b4-d8c5-93d7-d315e469e340.png)


## しかし、余分なdivがレンダリングされてしまう 
## => エラーを回避するためならReact.Fragmentタグを使う!!

~~~Javascript

import React from "react";
import ReactDom from "react-dom"

const App = () => {
  return (
    <React.Fragment>
        <h1>こんにちは</h1>
        <p>お元気ですか?</p>
    </React.Fragment>
  )
}

ReactDom.render(<APP />, document.getElementById("root"));
~~~

## コンポーネントの使い方を知ろう!!
Reactでは、画面の表示の部分を色々なファイルに分けてコンポーネントとして管理する

新しいファイル App.jsを作成する
~~~Javascript
import React from 'react';
import ReactDom from "react-dom";

const App = () => {
    return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
        </>
    );
};
    
~~~

このままでは、Appという関数はこのファイル上でしか使えない。
export default 関数名と記述する
関数を他でも使用出来るようにする

App.js
~~~Javascript
import React from 'react';
import ReactDom from "react-dom";

const App = () => {
    return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
        </>
    );
};

export default App;
    
~~~

##### exportが記述出来たのでindex.jsでAppとう関数を使おう!!
~~~Javascript
import React from "react";
import ReactDom from "react-dom";
import App from "./App";

ReactDom.render(<App />, document.getElementById("root"));
~~~

import 使いたい関数名 from "どのファイルからimportするのか"と記述する

##### 他のファイルで画面のレンダリングの部分を作成し、<br>exportして、importする事でコンポーネントとして利用出来る

コンポーネントとして利用するファイルは.jsxにするとわかりやすい

## Reactでのイベントやstyleの扱い方を知ろう!!

ボタンを押した時に~したいという機能を作りたい時、、、

###### 1 buttonタグを記述する
App.js
~~~Javascript
import React from 'react';
import ReactDom from "react-dom";

const App = () => {
    return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
           <button onClick = {}>ボタン</button>
        </>
    );
};

export default App;
    
~~~

Reactの特徴:
HTMLのタグの中で使うイベント , styleの名称 => 単語の繋ぎ部分が大文字(キャメルケース)

~~~Javascript
 return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
           <button onClick = {}>ボタン</button>
        </>
~~~
jsxで返しているHTMLのタグを{}で囲むと
Javascriptとして認識される
=>{}で囲って、Javascriptの関数を書いていくイメージ


~~~Javascript
import React from 'react';
import ReactDom from "react-dom";

const App = () => {
  const onClickButton = () => alert();
    return(
        <> //<React.Fragment>を省略する事が出来る
           <h1>こんにちは</h1>
           <p>お元気ですか?</p>
            
            //{}の中に割り当てたい関数名を記述する => イベントを割り当てる事が可能
           <button onClick = {onClickButton}>ボタン</button>

        </>
    );
};

export default App; 
~~~

![2-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/c7958682-9b40-909a-bbba-cad289ff54b3.png)

![2-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/e6062077-385c-55cf-f559-b76d8ea2f590.png)




#### styleを割り当てる

~~~Javascript
return(
        <> 
           <h1 style = {{color: "red"}}>こんにちは</h1>
           <p>お元気ですか?</p>
           <button onClick = {onClickButton}>ボタン</button>

        </>
    );
~~~

![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/5210c124-54b4-827b-75fa-e7bf19f963cf.png)


style = {{}}:
外側の{}: Javascriptを書きますよ~という{}
内側の{}: Javascriptのオブジェクトの{}


###### 変数を使ってstyleを割り当てる

~~~Javascript
import React from 'react';
import ReactDom from "react-dom";

const App = () => {
  const onClickButton = () => alert();
  const contentStyle = {
    color: 'blue';
    fontSize: '18px';
  };

    return(
        <> //<React.Fragment>を省略する事が出来る
          <h1 style = {{color: "red"}}>こんにちは</h1>
           <p style = {contentStyle}>お元気ですか?</p>
           <button onClick = {onClickButton}>ボタン</button>

        </>
    );
};

export default App; 
~~~

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/533e2a6a-f4d1-8aaf-c346-260d8975d87e.png)


一度、オブジェクトの変数を定義して中にプロパティを書いて行く。
そして、それをstyleの中に反映させていく。

## Propsを知ろう!!

props: コンポーネントに対して渡す引数のようなもの , 
       ある程度、動的にコンポーネントを使えるように出来る。

例: コンポーネントとして画面を別ファイルに切り出しても
    条件によっては、その振る舞いを変える必要がある
    通常は黒文字 , エラーの時は赤文字
    

###### 「元気です」という文字は女性用なので<br>ピンク色にしようとすると、、、

~~~Javascript
import React from "react";

const App = () => {
  const onClickButton = () => alert();
  const contentStyle = {
    color: "blue",
    fontSize: "18px"
  };

  const contentLeadyStyle = {
    color: "pink",
    fontSize: "18px"
  };

  return (
    <React.Fragment>
      <h1 style={{ color: "red" }}>こんにちは</h1>
      <p style={contentStyle}>お元気ですか?</p>
      <p style={contentLeadyStyle}>元気です!</p>
      <button onClick={onClickButton}>ボタン</button>
    </React.Fragment>
  );
};

export default App;
~~~

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/d93c825d-87b0-c31b-228e-7e623acc95ec.png)

##### しかし、出てくるたびにstyleを分けるのはメンドクサイ!!
##### => 文章をコンポーネント化して、色と文章をPropsとして受け取るようにすれば良い！

srcの配下にcomponentsというフォルダを作成する
色を付けた文字を表示するコンポーネント(ColorfulMessage.jsx)を作成する

src/components/ColorfulMessage.jsx
~~~Javascript
import React from 'react';

const ColorfulMessage = () => {
  const contentStyle = {
    color: 'blue';
    fontSize: '18px'; 
  }
  return (
    <p style = {contentStyle}>お元気ですか?</p>
  )
}
~~~
blueの文字色で指定された「お元気ですか?」というメッセージを返すコンポーネントを
作成できた。

App.jsxでimportしてColorfulMessageというコンポーネントを使う

App.jsx
~~~Javascript
import React from "react";
import ColofulMessage from './components/ColorfulMessage';

const App = () => {
    const onClickButton = ()  => alert();
    const contentLedyStyle = {
        color: 'pink';
        fontSize:'18px;
    };
    return (
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>

           //タグの中にコンポーネントを入れる事で
           //ColofulMessageというコンポーネントを使える
           <ColofulMessage />

           <p style = {contentLedyStyle}>元気です!</p>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    );
};

export default App;

~~~

このままだと、青文字で「お元気ですか」としか返さない
=>Propsで条件を渡して動的に変わるコンポーネントにする

Propsを渡す場合、
渡す方 , 渡される方　両方に修正を加える

渡す方: タグの中に渡したい名称を書いて行く
App.jsx(渡す方)

~~~Javascript
import React from "react";
import ColofulMessage from './components/ColorfulMessage';

const App = () => {
    const onClickButton = ()  => alert();
    const contentLedyStyle = {
        color: 'pink';
        fontSize:'18px;
    };
    return (
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>

           //色を渡したいのでcolor , 文章を渡すのでmessageにした(任意で決めれる)
           <ColofulMessage color = "blue" message = "お元気ですか?"/>

           <p style = {contentLedyStyle}>元気です!</p>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    );
};

export default App;

~~~

このようにして、
コンポーネントに対して適当な名前を付けて要素を渡していく事で
コンポーネントに対してPropsを渡せる


ColorfulMessage.jsx(Propsを渡される方)

~~~Javascript
import React from "react";

const ColorfulMessage = (props) => {
    const contentStyle = {
        color: "blue";
        fontSize: "18px";
    };
    
    return <p style = {contentStyle}>お元気ですか?</p>;
};

export default ColorfulMessage;

~~~

ここで、Propsの中身を確認すると、、、

~~~Javascript
const ColorfulMessage = (props) => {

    console.log(props);
    //=> {color: "blue", message: "お元気ですか？"}

    //colorというプロパティに「blue」という文字列
    //messageというプロパティに「お元気ですか?」という文字列が入っている

    const contentStyle = {
        color: "blue";
        fontSize: "18px";
    };
~~~

App.jsxで設定したPropsが渡ってきていると確認出来る
=>後は、コンポーネントの中で渡ってきた要素を使えば良い

~~~Javascript
import React from "react";

const ColorfulMessage = (props) => {
    const contentStyle = {
        color: props.color;
        fontSize: "18px;
    };
    
    //returnしているHTMLっぽい所でJavascriptを書く場合、{}で囲む
    return <p style = {contentStyle}>{props.message}</p>;
};

export default ColorfulMessage;
~~~

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/828e68e6-2a49-34e0-8896-d8bb9dcb215a.png)


ピンク色の「元気です！」もPropsを使って記述すると、、、

App.jsx
~~~Javascript
import React from "react";
import ColofulMessage from './components/ColorfulMessage';

const App = () => {
    const onClickButton = ()  => alert();
    return (
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color = "blue" message = "お元気ですか?"/>
           <ColofulMessage color = "pink" message = "元気です!"/>
           <p style = {contentLedyStyle}>元気です!</p>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    );
};

export default App;

~~~

初めは↓のようなスタイルがあってごちゃごちゃしていたが、
共通のコンポーネントを書くことでスッキリさせる
~~~Javascript
  const contentLedyStyle = {
        color: 'pink';
        fontSize:'18px;
    };
~~~

Propsのもう一つの渡し方、、、
ColorfulMessageというタグで囲って文章を設定する

App.jsx
~~~Javascript
 <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
 <ColofulMessage color="pink">元気です!</ColofulMessage>
~~~

ColofulMessageというタグで囲った中身を使うようにする
=> childrenを用いる

ColorfulMessage.jsx
~~~Javascript
import React from "react"

const ColorfulMessage = (props) => {
    const contentStyle = {
       color: props.color,
       fontSize: "18px"
    };

    return <p style = {contentStyle}>{props.children}</p>;
}

export default ColorfulMessage;
~~~

コンポーネントのタグで囲った中身をそのまま渡すと
特別なchildrenという変数に入ってくる

## Stateを知ろう!!

State: それぞれのコンポーネントが持っている状態
       条件によって画面が自動的に変わる部分をStateとして
       定義すれば良い。

Stateを使用する場合、useStateを使う必要がある

App.jsx
~~~Javascript
import React, { useState } from "react";
import ColofulMessage from "./components/ColorfulMessage";

const App = () => {
    const onClickButton = () => alert();
    useState();
    return(
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
           <ColofulMessage color="pink">元気です!</ColofulMessage>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    )
}
~~~

~~~Javascript
import React, { useState } from "react";
~~~
useStateは、Reactの中に入っている
=> 分割代入で中身からuseStateを取り出している


useStateから実際に使う変数を設定する
useStateの中から配列の分割代入で取り出していく
~~~Javascript
import React, { useState } from "react";
import ColofulMessage from "./components/ColorfulMessage";

const App = () => {
    const onClickButton = () => alert();

    //const[Stateとして使用する変数名 , そのStateを変更する為の関数名]
    //useState()の()に、初期値を設定することが出来る(今回は0)
    const [num, setNum] = useState(0);
    return(
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
           <ColofulMessage color="pink">元気です!</ColofulMessage>
           <button onClick = {onClickButton}>ボタン</button>
        </>
    )
}
~~~


実際にnumという変数に0が格納されているのか
確認してみよう!!

~~~Javascript
import React, { useState } from "react";
import ColofulMessage from "./components/ColorfulMessage";

const App = () => {
    const onClickButton = () => alert();

    //const[Stateとして使用する変数名 , そのStateを変更する為の関数名]
    //useState()の()に、初期値を設定することが出来る(今回は0)
    const [num, setNum] = useState(0);
    return(
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
           <ColofulMessage color="pink">元気です!</ColofulMessage>
           <button onClick = {onClickButton}>ボタン</button>
           <p>{num}</p>
        </>
    )
}
~~~

![0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/0bc13a0a-4fe4-ffe7-b3d0-87a5d649641a.png)


#### ボタンをクリックすると数字をカウントアップする機能を実装する
App.jsx
~~~Javascript
import React, { useState } from "react";
import ColofulMessage from "./components/ColorfulMessage";

const App = () => {
    const onClickCountUp = () => {
    
        //Stateを更新するには、2つ目に設定したsetNumという関数を使う
        //その中にnumをどのように更新したいか書く
        setNum(num + 1);
    }

    //const[Stateとして使用する変数名 , そのStateを変更する為の関数名]
    //useState()の()に、初期値を設定することが出来る(今回は0)
    const [num, setNum] = useState(0);
    return(
        <>
           <h1 style = {{color: 'red'}}>こんにちは</h1>
           <ColofulMessage color="blue">お元気ですか?</ColofulMessage>
           <ColofulMessage color="pink">元気です!</ColofulMessage>
           <button onClick = {onClickCountUp}>カウントアップ!</button>
           <p>{num}</p>
        </>
    )
}
~~~

![0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/f3ee0572-5b8f-e179-ddb2-8ab227b3674e.png)



## 再レンダリング , useEffect

まずは、顔文字を表示させる

App.jsx
~~~Javascript
import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
   const onClickCountUp = () => {
       setNum(num + 1);
   };
   const [num, setNum] = useState(0);
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <p>{num}</p>
      <p>!(^^)!</p>
   );
};

export default App;
~~~

ボタンを押すと顔文字を表示/非表示させる機能を実装する

~~~Javascript
import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
   const onClickCountUp = () => {
       setNum(num + 1);
   };
   const [num, setNum] = useState(0);
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <br />

      //ボタンを作成する
      <button>on/off</button>

      <p>{num}</p>
      <p>!(^^)!</p>
   );
};

export default App;
~~~

表示/非表示という状態を持たせる
=> 状態を定義する
=> Stateを定義する

~~~Javascript
import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
    const [num, setNum] = useState(0);
    
   //表示/非表示を扱うStateを定義する , 初期値をtrueにする
   //faceshowFlagを更新する為の関数がsetfaceShowFlag

   const [faceShowFlag , setFaceShowFlag] = useState(true)

   const onClickCountUp = () => {
       setNum(num + 1);
   };
  
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <br />
      <button>on/off</button>

      <p>{num}</p>
      <p>!(^^)!</p>
   );
};

export default App;
~~~


faceShowFlagがtrueの時だけ
顔文字部分がレンダリングされるようにする
=> &&: 左側がtrueの時に右側を返す

~~~Javascript
import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
    const [num, setNum] = useState(0);
    const [faceShowFlag , setFaceShowFlag] = useState(true)
    const onClickCountUp = () => {
       setNum(num + 1);
   };
  
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <br />
      <button>on/off</button>
      <p>{num}</p>

      {faceShowFlag && <p>!(^^)!</p>}

   );
};

export default App;
~~~

on/offボタンが押された時に、faceShowFlagのtrue/falseを切り替える

~~~Javascript
import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
    const [num, setNum] = useState(0);
    const [faceShowFlag , setFaceShowFlag] = useState(true)
    const onClickCountUp = () => {
       setNum(num + 1);
   };

   //この中で、setFaceShowFlagを切り替える
  // useStateで定義した関数を呼び出す
  // true => false , false => trueにする
  // => 現在のフラグ(faceShowFlag)の値の逆(!を付ければ良い)

   const onClickSwitchShowFlag = () => {
       setFaceShowFlag(!faceShowFlag);
   }
  
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>
      <br />

      //onClickに定義したonClickSwitchShowFlagという関数を割り当てる
      <button onClick = {onClickSwitchShowFlag} >on/off</button>

      <p>{num}</p>

      {faceShowFlag && <p>!(^^)!</p>}

   );
};

export default App;
~~~

#### 何故、再読み込みしてないのにnumが+1されたり、顔文字が表示されるのか?
#### => Reactのコンポーネントが再レンダリングされているから。

ステイトの更新があった時に、Reactがそれを検知してコンポーネントを上から読み込み
h1 style = ~の表示が変わる


~~~Javascript
import React, { useEffect, useState } from "react";
import ColorfulMessage from "./components/ColorfulMesssage";

const App = () => {
 
  //ボタンを押すたびに表示される => ボタンを押すたびに一番上から読み込まれている
  console.log("最初");
  // const onClickButton = () => alert();
  const onClickCountUp = () => {
    setNum(num + 1);
  };
~~~
 
画面を再読み込みしてコンソールを見てみると、、、
![453.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/0f5747a7-af42-d6d8-63f7-8f2edb5a0070.png)

一番、最初にconsole.log("最初")が通過されているのがわかる

ステイト変更時はどうなるかボタンを押して確認してみると、、、
![ボタン(ステイト)を押すたびに読み込まれている.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/0a3df6a1-c3b1-145c-f0f3-2a9100d640cb.png)

ステイトを変更すると , ボタンを押した数だけ表示される
=>setFaceShowFlagという関数でステイトが変更された時、
  また、const App = () という関数コンポーネントが頭から読み込まれている


~~~Javascript
import React from "react";

const ColorfullMessge = (props) => {
  console.log("カラフル");
  const { color, children } = props;
  const contentStyle = {
    color: color,
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;
};

export default ColorfullMessge;
~~~

「カウントアップ」ボタンを押してStateを変更すると、、、

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/24e47619-8b4a-ac3c-8d91-7bb4786c62af.png)


~~~Javascript
import React , { userState } from "react";
import ColorfulMessage from "./components/ColorfulMessage";

const App = () => {
    
    //ここが表示される
    console.log("最初");

    const [num, setNum] = useState(0);
    const [faceShowFlag , setFaceShowFlag] = useState(true)
    const onClickCountUp = () => {
       setNum(num + 1);
   };


   const onClickSwitchShowFlag = () => {
       setFaceShowFlag(!faceShowFlag);
   }
  
   return (
    <>
      <h1 style = {{ color: "red" }}>こんにちは!</h1>
        
       //ColofulMessageが2回読み込まれる
      <ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
      <ColorfulMessage color = "pink">元気です!</ColorfulMessage>

      <br />
      <button onClick = {onClickSwitchShowFlag} >on/off</button>

      <p>{num}</p>

      {faceShowFlag && <p>!(^^)!</p>}

   );
};

export default App;
~~~

~~~Javascript
<ColorfulMessage color = "blue">お元気ですか?</ColorfulMessage>
<ColorfulMessage color = "pink">元気です!</ColorfulMessage>
~~~

~~~Javascript
import React from "react";

const ColorfullMessge = (props) => {

  //ここが表示される
  console.log("カラフル");

  const { color, children } = props;
  const contentStyle = {
    color: color,
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;
};

export default ColorfullMessge;
~~~

親のコンポーネントは、自分のStateが更新されたので
「最初」と表示される

親のコンポーネントが再レンダリングされ、それに追従して
「カラフル」と2回表示される

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/4119a66b-1f37-1f74-6b89-c3e532bf3777.png)



### 再レンダリングの仕組みを知らないと思わぬバグを引き起こす!?

カウントアップしていって、3の倍数の時に顔文字を表示する機能を実装する

numが3の倍数の時に、faceShowFlagをtrueにする

~~~Javascript

const App = () => {
  console.log("最初");
  const onClickCountUp = () => {
    setNum(num + 1);
  };
  const [num, setNum] = useState(0);
  const [faceshowFrag, setFaceShowFlag] = useState(false);

  const onClickSwitchShowFlag = () => {
    setFaceShowFlag(!faceshowFrag);
  };

if (num % 3 === 0) {
    setFaceShowFlag(true);
  } else {
    setFaceShowFlag(false);
  }
~~~

しかし、このような記述だと下記のようなエラーが出る!!
![error.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/3b0668c1-d7ac-dff5-4c58-1416722561d9.png)

コンポーネント内で物凄い数の再レンダリングが起きている事によるエラー

原因:
~~~Javascript
//numに0という初期値が与えられる
const [num, setNum] = useState(0)
~~~

~~~Javascript
//num % 3 == 0より、

if (num % 3 === 0) {

    //こちらの処理が通り、ステイトが変更される
    setFaceShowFlag(true);

  } else {
    setFaceShowFlag(false);
}
~~~

ステイトが変更された事によって、<br>またコンポーネントが頭から読み込まれる
~~~Javascript
const App = () => {

~~~

このように、何度もステイトが変更されてAppがずっとループする事でエラーが起きている
=> Too many re-renders. ～というエラーが起きたら、ステイトの変更周りを注意しよう!!

解決策:
既に、setFaceShowFlagがtrueの時に、このフラグをtrueにする関数を呼ばないようにする
falseの時に、falseにする関数を呼ばないようにする

改善したコード:
~~~Javascript
if (num % 3 == 0) {
    faceshowFrag || setFaceShowFlag(true);
  } else {
    faceshowFrag && setFaceShowFlag(false);
  }
~~~

faceShowFlag || setFaceShowFlag(true);
  setFaceShowFlag(true)がtrueの時にsetFaceShowFlagという関数を呼ばないようにする(falseの時に呼ぶ)
  => || : 左がfalseの時に右側の処理をやってくれる

  faceShowFlag && setFaceShowFlag(false)
  faceShowFlagがtrueの時にfalseにしたい
  &&:左側がtrueなら右側の処理をする

### しかし、on/offボタンが動かなくなってしまった!!


原因:
~~~Javascript
<button onClick={onClickSwitchShowFlag}>on/off</button>
~~~
この部分より、on/offボタンをクリックするとonClickSwitchShowFlagが呼ばれる
setFaceShowFlag(!faceshowFrag);が呼ばれて現在のfaceshowFragが反転する

ステイトが更新されたので頭から読み込まれる
if (num % 3 == 0)が読み込まれるがnumの値が変わってないので

~~~Javascript
if (num % 3 == 0) {
    //また、この部分を通る
    faceshowFrag || setFaceShowFlag(true);
  } else {
    faceshowFrag && setFaceShowFlag(false);
  }

~~~

フラグをfalseにしてもtrueにまた、更新されてしまう
結果として、on/offが効かない

扱う変数が増えたり、ステイトの数が増えると<br>それぞれの処理が邪魔しあって上手く動かなかったりする
=> 関心の分離をする

この部分をnumの値だけ関心を持つようにする!!
~~~Javascript
if (num % 3 == 0) {
    faceshowFrag || setFaceShowFlag(true);
  } else {
    faceshowFrag && setFaceShowFlag(false);
  }
~~~

関心の分離には、useEffectを用いる!

使い方:
~~~Javascript

const onClickCountUp = () => {
    setNum(num + 1);
};

const onClickSwitchShowFlag = () => {
    setFaceShowFlag(!faceShowFlag);
};

useEffect(()) => {
   console.log("useEffect");
});

if (num % 3 === 0 ){
    faceShowFlag || setFaceShowFlag(true);
}else{
    faceShowFlag && setFaceShowFlag(false);
}
~~~

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/1cf3e2c5-d26a-796a-8039-93968b31b806.png)


useEffectに空の配列[]を設定する事で
  最初は、useEffect!表示されるがステイトを更新すると
  最初という文字しか表示されない
  => useEffectの中を通っていない
  => 空の配列を渡す事で最初の1回だけ通したい処理を書くことが出来る

  例: 画面を表示するのにデータを取って来る事etc...




~~~Javascript

const onClickCountUp = () => {
    setNum(num + 1);
};

const onClickSwitchShowFlag = () => {
    setFaceShowFlag(!faceShowFlag);
};

useEffect(()) => {
   console.log("useEffect");
});

if (num % 3 === 0 ){
    faceShowFlag || setFaceShowFlag(true);
}else{
    faceShowFlag && setFaceShowFlag(false);
}
~~~

[]の中に変数を入れると
その変数が変化した時だけ通すように設定出来る!!

~~~Javascript
useEffect(() => {
    if (num % 3 == 0) {
      faceshowFrag || setFaceShowFlag(true);
    } else {
      faceshowFrag && setFaceShowFlag(false);
    }
    console.log("userEffect!!");
  }, [num]);
~~~

## おまけ: default export と export

defaultとではない、もう一つのexportの仕方:
~~~Javascript
import React from "react";

//通常のexportの仕方(関数コンポーネントの定義の前にexportを付ける)
export const ColorfullMessge = (props) => {
  const { color, children } = props;
  const contentStyle = {
    color: color,
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;
};

//defaultのexportの仕方
export default ColorfullMessge;

~~~

しかし、エラーが発生した
![error.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/050490d6-ad46-3844-fab1-83f0d6c654b6.png)



通常のexportでは、importして使用する場合、分割代入をする

App.jsx
~~~Javascript

import React, { useEffect, useState } from "react";

//通常のexportのimport
import from {ColorfulMessage} from "./components/ColorfulMesssage";

//defaultのexportでのimport
//import ColorfulMessage from "./components/ColorfulMesssage";
~~~

Reactのコンポーネントでは、基本通常のexportを使えば良い!!

App.jsxでコンポーネントの名前を間違えたとき、、、

defaultのexportの時、、、

App.jsx
~~~Javascript

import React, { useEffect, useState } from "react";

//コンポーネントの名前を間違えても(本来は、ColorfulMessage)
import ColorfulMessag from "./components/ColorfulMesssage";

//この部分のタグも同じColorfulMessagにすれば、そのままプロジェクトが進んでしまう
<ColorfulMessag color="blue">お元気ですか？</ColorfulMessag>
<ColorfulMessag color="pink">元気ですか</ColorfulMessag>


export default App;
~~~

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/746cdef2-b525-8cd1-d401-da508a4e7523.png)

通常のexportの時、
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2565038/4805c629-60e9-f973-7f9f-4829ac71c397.png)

エラーを出してくれる!!