React学習のアウトプット（1日目：コンポーネント、props）

この半年間、Vue、Laravel、AWS、Docker、Firebase、Stripeについて勉強し、友人のお店経営を手伝うためにサイト制作を行いました。

正直めちゃめちゃ大変だった。

Firebaseのユーザー認証やStrioeによるクレジット決済、Dockerを使った開発、AWSを使ってメール送信したり、ホスティングしたりと本当にすべて初めてのことでした。

こんだけ初めてのことをやり終えて、ふと思ったのが「もっとほかの言語を習得したい！」と思いました。

正直、最初は楽しくは無かったのですが、最近はめちゃ楽しいです。

こんな感じで今日から**React**を学習します！

Javasciptの勉強をし始めた時、Youtuberの**トラハック**さんの動画を参考に学習したのですが、本当にトラハックさんの動画のクオリティアは凄まじいです。

Udemyで有料で公開されていてもおかしくないレベルの内容になっています。

今日はそんなこんなでトラハックさんのReact入門【基礎編】を終わらせたのでその復習も兼ねて備忘していきます。

#Reactアプリの作成#

Reactのプロジェクトを作成する際は以下のコマンドを実行。

```
npx create-react-app project-name
```

Reactプロジェクトを作成するには``npx``コマンドを使う必要がある。

``npm``ではないことの注意。


#コンポーネント#

コンポーネントの概念はVueとはほぼ変わらない。

```Blog.jsx
import Article from './Article';

const Blog = () => {
    return (
      <>
        <Article title="React" />
        <Like/>
        <FooBar.Foo />
        <FooBar.Bar />
        <Hoge />
      </>
    )
}

export default Blog
```

ReactではDOM要素を``return()``の中に記述する。

Vueでは``template``内に書いていた。

また、``export``も今後書き忘れそうだなと思うので要注意！

また、同じファイルの中に２つ以上コンポーネントも書ける。

```FooBar.jsx
export function Foo() {
  return (<h2>Foo</h2>)
}

export const Bar = () => {
  return (<h2>Bar</h2>)
}
```

２つ以上のコンポーネントを``import``するには2つやり方がある。

##別々にインポート##

```Blog.jsx
import {Foo, Bar} from './components/FooBar';

const Blog = () => {
    return (
      <>
        <Foo />
        <Bar />
      </>
    )
}
```

##まとめてインポート##

```Blog.jsx
import * as FooBar from './components/FooBar';

const Blog = () => {
    return (
      <>
        <FooBar.Foo />
        <FooBar.Bar />
      </>
    )
}
```

これは場合分けの時に使うのかなと思いました。

例えば、同じページでもログインしているユーザーとログインしていないユーザーでページの内容を変えたり。

#Reactのpropsはハンパない#

最後に``props``です。

Vueを学習していた時に感じたことは、Vueは確かに使いやすかったのですが、``this``の乱用が少し気になりました。

僕がプログラムを組むのが下手というのもあるのですが、``this``は汎用性が高い分**保守性**が低くなるというのが難点と感じました。

Reactの``props``はこの``this``の乱用を防いでくれます。

感動しました。

頭が固い僕からしたら、``this``を**使いづらい環境**にしてくれた方がありがたい。

そんな``props``の使い方は以下の通り。

```Blog.jsx
import Article from './Article';

const Blog = () => {
    return (
      <>
        <Article title="React" />
      </>
    )
}

export default Blog
```

```Article.jsx
const Article = (props) => {
  return (
    <div>
      <h2>{props.title}</h2>
    </div>
  )
}
```

コンポーネントにpropsを受け取る名前を指定するところはVueとは変わらないのですが、受け取る方は``props.title``で済んでいますね。

ずっとVueに関わってきた僕からしたら、``props.<プロパティ名>``のように``props``と付けてくれるだけで「propsとして受け取ったのか！」と判断出来てとても分かりやすいなと感じました。

Vueの場合は``props``でまず値を受け取ってからそのプロパティ名をそのまま``<p>{title}</p>``のように使うので、Vue内で定義したものなのか``props``で受け取ったのかを瞬時に判断できません。

Reactの``props``は分かりやすい！！

#useStateもハンパない#

次は``useState``です。

この``useState``はさらに``this``の乱用を防いでくれます。

```Article.jsx
import React, { useState } from 'react'

const Article = (props) => {
  // isPublishedの初期値をfalseにしている
  const [isPublished, togglePublished] = useState( false )

  return (
    <div>
      <h2>{props.title}</h2>
      <label htmlFor="check">公開状態：</label>
      <input id="check" type="checkbox" defaultChecked={isPublished} onClick={() => togglePublished(!isPublished)} />
    </div>
  )
}

export default Article
```

``useState``を使えば``this.state``でわざわざ``props``で受け取った値の初期値を設定しなくて済むのです！

ただ、１つ気になったのは``htmlFor``や``defaultChecked``などのHTML要素のプロパティ名に少しの変更があるところ。

ここはもう慣れていくしかないと感じました。

こんな感じで、React学習の初日を終えました。

新しい言語を学ぶ時って何かまた新しい道を進む感じがして楽しいです！

これからもっと難しいことに直面すると思うのですが、引き続き頑張っていこうと思います！

以上、「React学習のアウトプット（1日目：コンポーネント、props）」でした！！

Thank you for reading