<調整中>Reactを初めて触った時のメモ。
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に沿ったコンポーネント