こちらの動画でReact学習スタート (ワクワク)

Reactとは？

React はMVCのV(View)を構成してくれるフロントエンドフレームワーク(AngularやVueと同格)

Reactの利点

• SPA(Single Page Application)なのでページの読み込みがなくスムーズなUXを実現できる。
• JSX (Javascript Syntax Xtension)を使ってJSファイル内に直接HTML要素を記述できる。

前提知識

Javascript

• データ型、変数、関数、ループ
• Promiseオブジェクト & 非同期プログラム
• 配列メソッド [forEach(), map() ...]
• Fetch API & HTTPメソッド

コンポーネントを定義する(クラス vs 関数)

// クラスコンポーネント

export default class Header extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello, React.</h1>
            </div>
         (
    }
}

//  関数コンポーネント

export const Header = () => {
    return (
        <div>
            <h1>Hello, React.</h1>
        </div>
     (
}

どっち使う？ => 関数コンポーネント

以前の関数コンポーネントはステートレスコンポーネント(Stateless Component)と呼ばれ、ステート(State)に合わせて要素をレンダーすることができなかった。

現在はHooks(React 16.8 で追加された新機能)により、関数コンポーネントでもステートを利用することができるようになったため、より簡潔に記述できる関数コンポーネントが好まれているそう。

Reactアプリ作成

# create-react-appでアプリ作成
npx create-react-app my-app

# my-appディレクトリに移動
cd my-app

# アプリ起動
npm start

public > index.html SPAの元となるhtmlファイル(id="root"がある)

// src > index.js

import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index.htmlのroot要素をとってきてAppをrenderしている。

VS Codeで追加するべき拡張機能

ES7 React/Redux/GraphQL/React-Native snippets

よく使う構文をアルファベット列で呼び出せる。

(例)rafceと入力しEnterで、

import React from 'react'

const Header = () => {
    return (
        <div>
            
        </div>
    )
}

export default Header

この型を出力してくれる。