amafukuのブログ

雑多な記事を書いています。

<調整中>Reactを初めて触った時のメモ。

f:id:amafuku:20220228174129p:plain

1年前に初めてReactを触ったときに残していたメモを引用。

 

Googleドキュメントにメモしていたためにフォーマットの調整難航中です。。。

React
2021/3/25最終更新

 

 

React 公式サイト
https://ja.reactjs.org/

React SPA(シングルページアプリケーション)入門
https://qiita.com/teradonburi/items/fb91e5feacab5071cfef

Amplify+cognito+React+Googleの連携
https://qiita.com/kiyotaman/items/0d5584e16456f760d51b

 


フロントエンド

Javascriptライブラリ

Facebookが開発
javascriptライブラリ
Vueはフレームワーク

SPAシングルページアプリケーション
SPA作るのにReactは便利

UIは見た目と機能、ビューとコントローラー

ヴァーチャルドム
ブラウザと別のDOM操作。

差分描画

JSX・・・JS内でHTMLぽくかける

Javascript拡張言語
JSXもFacebook
JSXが標準

Javascriptではない
JSX→Javascriptに変換して表示
トランスパイラ。
エクマスクリプト

バベル、コヒースクリプト、タイプスクリプト
ここら辺勉強したい。

Reactパッケージが必ず必要
import React from “react”
ファイルの先頭で必要。


JSXのreturnはHTMLに近い
変数名など全てはキャメルケース(単語区切りで大文字)
空要素は全て閉じるinput、imgなど

 

Mac環境構築
Finderからターミナルを検索して右クリック(ダブルタップ)で「情報を見る」
「Rosettaを使用して開く」にチェックを入れる

Homebrewのインストール

nodebrew入れる際にフォルダがないと言われるので、
% mkdir -p ~/.nodebrew/src

nodebrewのインストール
開発環境の構築
% npx create-react-app [作成したいプロジェクト名]

Typescriptの導入の際は
% npx create-react-app [作成したいプロジェクト名] --template typescript


作成したフォルダに移動しpackage.jsonファイルがあるか確認。
その後に
% nom run build

buildフォルダが作成される
% nom start

を実行すると、webでページ確認ができるようになる。


create-react-appは簡単にReact開発環境の構築ができるツール
Reactの開発環境構築はとても難しい
トランスパイラや、バベル、バンドラーのwebpackの設定が難しい。


src・・・コンポーネントを作るJSファイル
public・・・htmlファイルや設定ファイル
Build・・・本番環境用のフォルダ


create-react-app以外の環境構築
Next.js→サーバーサイドレンダリング
通常Reactはフロント、サーバー側でレンダリング?
Gatsby→静的Webサイトに最適

 

classコンポーネントは基本使わないようにする。
functional コンポーネントを基本は使っていく。


React はタグでラップしないといけない。

<div>で囲むがdivを増やしたくない時は
<React.Fragment>で囲む
コンポーネントを囲むためのタグ
省略形は    
<>
</>
上記で囲む

propsでデータを渡す。

親コンポーネント→子コンポーネントに値の受け渡し
親コンポーネント
<Article title={[渡したい内容]} />
子コンポーネント
const Article = (props) => {
return (
<div>
<h2>{props.title}</h2>
</div>
)
};
propsのtitleで取得可能。


stateとは
コンポーネント内で管理する変数
ローカルステイト
propsとして子コンポーネントに渡せる。


stateを使う理由
render()内では値を変更してはいけない
setState()で値を変更する。
stateの変更 = 再レンダーのきっかけになる→ページをリロードせずに表示を切り替えられる。


stateの設定方法
class Componentが前提
constructor()内で宣言
オブジェクト型で記述

class Blog extends React.Component{
constructor(props) {
super(props);
this.state = {
isPublished:false
}
}
}

this.state = {}で記述。


stateの取得
同コンポーネント内ならthis.state.key名で取得
子コンポーネントで参照したい場合はpropsとして渡す。
<Article 
title={“タイトル”}
isPublished={this.state.isPublished}
/>

の形で子コンポーネントに受け渡し。


stateの変更方法
setState()を使用
関数にラップするのが一般的
setState()内に記述されたstateのみ変更

 

コンポーネントのライフサイクル
Mounting
コンポーネントが配置される期間
Updating
コンポーネントが変更される期間
Unmounting
コンポーネントが破棄される期間


ライフサイクル使う理由
関数の外に影響を与える関数を記述するため
DOM変更、API通信、ログ出力、setState()など

副作用=適切な場所に配置するべき処理

Mount
constructor()
初期化(stateなど)

render()
VDOMを描画

componentDidMount()
render()後に1度だけ呼ばれる
リスナー設定やAPI通信に使われる


Update
render()
VDOMを再描画

componentDidUpdate()
再render()後に呼ばれる
スクロールイベントや条件付きイベント

Unmaunting
componentWillUnmount()
コンポーネントが破棄される直前
リソースを解放するため
リスナーの解除など

 

React Hooks
フックとは
クラス機能をFunctional Componentでも使えるようになる
React 16.8から導入
100%後方互換 => 小さく導入
ReactHooksを新しく導入しても古いプログラムに影響が出ない

Hooksを使う理由
シンプルに保つため。


functional ComponentでStateを扱う
useState()を使用する。(ステートフック)
クラスコンポーネントのthis.state、this.setState()にあたる。
複数のStateを使用する時はStateごとに宣言

使い方
useState関数をインポート
import React, {useState} from ‘react’;

宣言する
const [state変数名, state変更関数] = useState(state初期値);

JSX内で使用
<input type=”text” onClick={() => state変数関数()} />

useEffect()
ライフサイクルメソッドの作成、以下3点の役割

componentDidMount()
componentDidUpdate()
componentWillUnmount()

レンダーごとに処理が走る。

ログイン機能の実装
必要な物:react-router-dom

PrivateRouteを実装
import {BrowserRouter as Router, Redirect, Route, RouterProps, Switch} from
‘react-router-dom’;

 


パスワード系のフレームワーク
cognito

ステートフック

const [count,setCount] = useState(0);

return (
<div>
<button onClick={() => setCount(count +1)}>
</div>
)


const [count,setCount] = useState(0)
this.state = {
count:0
}


const awsConfiguration = {
region: 'ap-northeast-1',
IdentityPoolId: 'ap-northeast-1:172b2f3e-2d5f-4a8b-9c1e-7358f574232a',
UserPoolId: 'ap-northeast-1_oz5jOsBH6',
ClientId: '5he22mtd001p1q70540jafbt6p',
}

export default awsConfiguration


React コメントアウト
{/* ...... */}

React画面遷移について

URL指定の画面切り替え?
http://localhost:3000/page1
http://localhost:3000/page2
のような画面遷移の方法

$ npm install react-router-mod

完了したらpackage.jsonファイルを開き
"react-router-dom": "^5.2.0"
の記述を探し、あったらインストールは完了している。


pageA

import React from ‘react’;

class pageA extends React.Component {
render() {
return (
<div>
<p>pageA</p>
</div>
)
}
}
export default pageA

pageB

import React from ‘react’;

class pageB extends React.Component {
render(){
return(
<div>
<p>pageB</p>
</div>
)
}
}
export default pageB


App.js

import React from ‘react’;

import {BrowserRouter, Route, Switch} from ‘react-router-dom’;
import pageA from ‘./pageA’;
import pageB from ‘./pageB’;

class App extends React.Component {
render () {
return (
<BrowserRouter>
<Switch>
<Route exact path=”/pageA” component={pageA} />
<Route exact path=”/pageB” component={pageB} />
</Switch>
</BrowserRouter>
)
}
}

export default App
2021年4月2日追記
Typescriptを入れる際はcreate-react-appの記述が少し変わっている。
% npx create-react-app [プロジェクト名] --template typescript

Reduxについて
状態管理のためのフレームワーク

Action
「何をする」という情報を持つオブジェクト。
Typeプロパティを必ず持つ。

ActionCreater
Actionを作成するメソッド。
Actionを作るのみ。

Material-ui
Google Material Designに沿ったコンポーネント