Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@kinakodesu(です。 きなこ)

React学習メモ

Last updated at Posted at 2021-05-24

#Reactとは?
・facebookが開発したジャバスクリプトのライブラリ（フレームワークのほうが大きな枠組み）
vue.jsのほうは、ジャバスクリプトのフレームワークらしい
・webのUIを作る
・ReactはSPAではない。Reactは小さなコンポーネント（部品）を作っていくのが得意

UIとは
①見た目（View）
②機能（Controller）
コンポーネント＝見た目＋機能
これをつくりのがReact

#Virtual DOM　＝Reactで管理しているDOMのこと
（通常のDOMはブラウザのレンダリングと別管理だけど、virtualはブラウザのレンダリング関係なく効率よくDOM操作できる）
ジャバスクリプトのエンジンメモリで行う、ブラウザに負荷をかけないで済む

★レンダリング＝元のデータがあって、そのデータを整形して結果を出すこと。

★DOMとは
Document　Object　Modelの略
＝インターフェース
HTMLにアクセスする窓口のこと、html構造、見た目、コンテンツを変更してくれる。

普段の、DOM操作の時
ほげというというIDを持ったテキストがあげに代わりますよという操作の意味

document.getElementById('hoge').innerText = 'age'

virtual　DOMの時
ブラウザでデータの整形をして表示することがないから効率よく動けるらしい。

render(
<div id='hoge'>age</div>

★差分描画
変更のあった部分だけ、変更させる

★JSX
JavaScriptの中で、HTMLっぽく書くことができること。

ReactDOM.render(
<div className={hoge}/>
<h1>Hello World!</h1>
</div>
)

#JSXの記法について
これを知らないと、Reactを書くことができないので、しっかりと覚える。
ジャバスクリプトの拡張言語（ジャバスクリプトのベースで記載されている、htmlっぽい）
JSXは最終的に、React要素を生成する。

React.createElementはReact要素を生成する式、
これを毎回書くのがしんどいのでJSXで記載する。htmlライクに記載することができる。
出力結果はどっちでも同じなので、。

JSXはコンパイルしてくれている。htmlライクから、React.createElementに変換してくれている感じ。

#JSXの基礎文法
①Reactライブラリをimportする
②return文の中が、JSXの構文。
基本的にはHTMLと同じ、classはclassNameに。
ハイフンは使えない
｛｝内で変数をあつかうことができる。
閉じタグが必要

JSXは階層構造になっていないとダメ
最上位のコンポーネントは並列させることができない。
React.Fragmentで囲む＝これの略称が、<> >だわ！

#JSXを記載するための環境構築をおこなっていく！
create React APPでReactの環境構築を行うことができる。SPAを作成するのに、最も良い方法
１Pだけでページがどんどん変わっていくような感じ。

★本来のReactの環境構築では、
BABELや、Webpackが必要。だけど今の私のレベルではいらない感じ。初学者がやるべきではない。
Node.js→サーバー環境で動く、ジャバスクリプト
手元の環境で動かすために必要

npm→パッケージマネージャー
node.jsの便利なライブラリなどのヴァージョンを管理してくれるようなやつ。

Homebrew　マックのバージョン管理ツール
nodebrew　nodeのバージョン管理ツール

nodeの環境パスを通す
(OS上で動作するタスクがデータを共有するための仕組み）
→shell

publicとsrcのフォルダが作られる。

src→開発用のファイルが格納される。
ReactコンポーネントのJSXファイルなどはこちらに置く。

public→静的なファイルがおかれます。htmlや画像ファイルなど。
ベースになるやつ、ロゴとか。

build→本番用ファイルがおかれる。
npm run buildコマンドで生成される。
デフォルトではない。自分たちで作っていく。

vscodeでもコマンドプロンプトでもいいので、

npm start

と打つと、自動でブラウザが立ち上がる。ローカルホストは３０００番
http://localhost:3000/
ホットリロードにも対応＝ファイル保存を自動で行ってくれる。

npm run build

本番用のファイルを生成して、buildディレクトリに出力する。
srcとpublicファイルを１つにまとめる。（バンドル）
Creating an optimized production build...って出る。
まとまった状態でbuildしてくれる。

npm run eject

あんまりやらないほうがいい。
設定を変更したいときに使用する。
変更しちゃうと下記のような
"react-scripts start"の変更も加えられてしまうから、
せっかくパックになっているのが崩されちゃう（言い換えれば変更できるなんだけど）感じかね？

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

※create-react-appおよびreact-scripts

react-scriptsは、create-react-appスターターパックのスクリプトのセットです。 create-react-appを使用すると、構成せずにプロジェクトを開始できるため、プロジェクトを自分でセットアップする必要はありません。

react-scripts startは、開発モジュールをセットアップしてサーバーを起動し、ホットモジュールをリロードします。 hereを読んで、それが何をするのかを確認できます。

create-react-appを使用すると、次の機能をすぐに使用できます。

React、JSX、ES6、およびFlow構文のサポート。
オブジェクトスプレッド演算子のような、ES6以外の言語エクストラ。
自動プレフィックスCSS。したがって、-webkit-やその他のプレフィックスは不要です。
カバレッジレポートのサポートが組み込まれた、高速でインタラクティブな単体テストランナー。
よくある間違いについて警告するライブ開発サーバー。
JS、CSS、および生産用のイメージを、ハッシュとソースマップとともにバンドルするビルドスクリプト。
すべてのプログレッシブWebアプリの基準を満たす、オフライン優先のサービスワーカーとWebアプリマニフェスト。
単一の依存関係を持つ上記のツールの簡単な更新。

npmスクリプト

npm startはnpm run startのショートカットです。

npm runは、package.jsonのscriptsオブジェクトで定義したスクリプトを実行するために使用されます

スクリプトオブジェクトにstartキーがない場合、デフォルトはnode server.jsになります

反応スクリプトが提供する以上のことをしたい場合があります。この場合、react-scripts ejectを実行できます。これにより、プロジェクトが「管理」状態から非管理状態に変換され、依存関係、ビルドスクリプト、およびその他の構成を完全に制御できます。

#コンポーネントとpropsの復習について

コンポーネント＝見た目＋機能を持つUIの部品

コンポーネントを組み合わせて１つのページを作成する。
２種類のコンポーネントがある。
①classコンポーネント(あんまり使われてない）
②functional Component
→記述量が少ない。

returnの中身がJSXでした。

#なぜコンポーネントを使うのか
・:relaxed:再利用するため
同じ記述を何度も行う必要がない。

・:relaxed:コードの見通しをよくするため
→１コンポーネント＝１ファイル
別ファイルにわけることでコードが読みやすくなる。

・:relaxed:変更に強くなるため
→修正する箇所は、１か所だけでOK
複数のページで書いてたとしても、１か所だけ変更するだけですべて変更される。

★コンポーネントの基本的な使い方★
子コンポーネントはよびだされる感じ。
また、宣言するだけだと、ほかで読み取りされるときにつかえないので
export default Article;って記載される。
→これをすることで、親コンポーネントでimportすることができる。
複数の方法で、関数の宣言の仕方がある。
function アロー関数

★props
データの受け渡しを行う。
子コンポーネント引数にpropsを指定する。親から子にデータを渡す。
動的に変化するところは、propsでデータを受け渡す。

★propsで受け渡しできるデータ
propsのデータは｛｝に記載する
文字列、数値、真偽値、配列、オブジェクト、日付などなんでも可能
変数を渡すことも可能。
文字列は｛｝なしでもOK

★コンポーネントの再利用

import React from 'react';
const Article = (props) =>{
    return(
        <div>
            <h2> {props.title}</h2>
            <p>{props.content}</p>
                 </div>
    );
};

export default Article;
(Article.jsx)

import Article from './components/molecules/Article';

function App(){
  return(
    <div>
      <Article title={'きなこ'}
               content={'今日のお話はここまでです'}
               />
               <Article title={'きなこ'}
               content={'今日のお話はここまでです'}
               />
               <Article title={'きなこ'}
               content={'今日のお話はここまでです'}
               />
               <Article title={'きなこ'}
               content={'今日のお話はここまでです'}
               />
               <Article title={'きなこ'}
               content={'今日のお話はここまでです'}
               />
    </div>
  );
}

export default App;
(App.js)

:bangbang:
ブラウザで表示されたのは以下

Screenshot_2021-05-25 React App.png

Appなのに、APPとかにしててうまくコンポーネントが宣言されてないとかエラーでてたけど
根本的に大文字小文字のミスってゆう些細な間違えをしてました・・・・・。

#コンポーネントのimportとexportについて
コンポーネントを分ける。
1ファイル＝1コンポーネントにするとよい
責務（なんのためのパーツなのか）を明確にするため、大規模なアプリでも管理しやすくするため、:bangbang:再利用をするため）

#別ファイルのコンポーネントはどのように使用するのか？
エクスポートしたものをほかのファイルでインポートして読み込む。

#じゃバスクリプトのモジュール機能
・プログラムをモジュールという単位で分割する（管理しやすくする）
・原則、1ファイル＝1モジュールで
・必要な時に、必要なモジュールのみ読み込む

import Article from './components/molecules/Article';

function App(){
  return(
    <div>
      <Article title={'きなこ'}
      　　　　　content={'今日のお話はここまでです'}
       />
    </div>
  );
}

export default App;
(App.js)

import Article from './components/molecules/Article';でArticleを呼び出して、
Appコンポーネントの中で呼び出している感じ。

##default export（名前なしのexport）
・推奨されるexport
・1ファイル＝1export
・1度宣言したアロー関数をdefault export
・名前付き関数宣言と同時にdefault export

##default import（名前なしのimport）
default exportしたモジュールをそのまま読み込む
import モジュール名 from 'ファイルパス'
export元とimport元の２つのファイルがあって、それぞれimportとexportで結び付けている感じね。。

##名前付きexport＝index.jsで作成される。
・1ファイルから複数モジュールをexportしたいとき
exportが複数ある。
・Reactではエントリポイントでよく使う
・エントリポイントでは別名exportも併用する。
基本的に、exportするときは、default　exportしたファイルがある。
エントリポイントは、いろんなdefault　exportされたやつをひとまとめにしているので、全部同じデフォルトって名前だとみんな同じでかぶってしまうのでエントリポイントで名前を変更している。
（一番わかりやすいのは、ファイル名と同じ名前にするとOK）

##名前付きimport
・1ファイルから複数モジュールを読み込む
・エントリポイントから複数コンポーネントを読み込む
読み込みしたいやつを指定してimportできる。
※importするコンポーネントが増えてきたときにめんどくさくなるので、この記載をしたほうがいいという考えになっている。大規模なアプリになれば恩恵を感じられると思います。

compornentはなるべく細かくしたほうが良いので。
いちいちimportしなくてもhtmlで書いても良さそうだけど、いちいちコンポーネントする話
→少しの変更を加えたいときに、コードの見栄えが悪くなる。

コードの見通しが良くなる
１箇所変えれば、全てのその箇所が変更させることができる！

##コンポーネントの状態を管理する。
:sunny:Hooksとは
クラスコンポーネントでしか使えなかったが、↓
・コンポーネントないで状態を管理するState
・コンポーネントの時間の流れに基づくライフサイクル

最近にできた機能。新しい。
クラスコンポーネントと関数コンポーネントがあるが、
クラスコンポーネントでしか使えていなかったものを、関数コンポーネントでも使用できるようにしたのが、
Hooks。
（書き方が異なる、関数コンポーネントが一般的には使用されている）

Hooksによって、関数コンポーネントでも使用できるようになった。
Hooks＝クラスコンポーネントの機能に接続する。

##State
なぜstateを使うのか
→Reactコンポーネント内の値を書き換えしたい
コンポーネントで表現してるものを書き換えたいとかそんな感じのとき。

コンポーネント内の要素をDOMで直接書き換えるのは❌
（JavaScriptではやってもOKだったけどReactでは仮想DOMがあるのであまりおすすめされない）
新しい値を使って再描画（再度レンダリング）をさせる○

再描画するタイミングとしては、
①stateが変更されたとき
②propsが変更されたとき

##useStateの使い方
①useStateによるstateの宣言
const [state, setState] = useState(initialState)
定数の宣言
左から
現在の状態＞更新の関数＞初期値（useStateに初期値を渡す）

②Stateの更新
setState(newState)
更新関数＞新しい値

※コールバック関数※

※propsとStateの違い
どっちも再描画される時に記載されるけど
propsは、引数のようにコンポーネントに渡される値
必ず親のコンポーネントから子供のコンポーネントに受け継がれる？もの
更新するときは、親の方を更新するんだよね

Stateは、コンポーネントの内部で宣言制御される値
そのコンポーネントの中で宣言されるし、制御される。importとかで受け渡しをしたりはしないのかな？
よくわかんない

##Stateをpropsに渡す
更新関数はそのままpropsとして渡さずに関数化する
関数をpropsに渡す時には気をつける。
Stateが変わることによってコンポーネントの表示が変わる。
propsが変化することで、表示が変わる。

propsへ関数を渡すときは、コールバック関数か、関数自体を渡すのがいい。
propsに渡すときに関数を渡さないと、無限レンダリングが起きて、エラーになる！

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?