LoginSignup
0
0

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.

@teambo

Reactの環境構築時のメモ

Last updated at Posted at 2021-09-04

Reactの環境構築

npx create-react-app my-app
cd my-app
npm start

react create appで作られるもの

  • react create appだと以下内容がデフォルトで含まれているらしい
    • JSX変換処理や最新のJavascript記法を以前のブラウザでも使えるようにするトランスパイル処理(Babel?)
    • ソースファイルを1個の*.jsにまとめるバンドル処理
    • ファイルの変更件シュルト自動再トランスパイル、ブラウザの自動リロード
    • コードエラーの実行前検出(ESLint)
    • 実行時に発生したエラーをブラウザ上でわかりやすく表示
    • 本番環境用のソースコード圧縮・最適化
    • TypeScriptを使いたい場合は以下コマンド
npx create-react-app my-app --template typescript

デバッグ環境の作成

VS Code上でやる方法

  • 参考：VSCodeでReactをデバッグする方法
    • これは古い方法。Debugger for Chromeを入れようとしたら、deprecatedになっていた
  • VS Code標準？のdebugツールででできた。

ブラウザ上でやる方法。

不明点の雑メモ(体型的に勉強していないので、バラバラと書いてく)

TypeScriptを採用したら、型の指定をしないとエラーになって困った

  • type scriptを利用する場合、型を指定しないと暗黙のanyのエラーが発生します
    • 型の指定は引数で 変数: 型と指定すれば解決する。最悪変数： anyで解決する(やってはいけない)

React×TypeScriptの時、型の指定ってどこでするのが正しいん？？？

  • 関数型コンポーネントの引数(Props)の型の指定をどこでするべきか

関数コンポーネントの引数への引き渡しでオブジェクトで渡し方がわからん！！配列とか詰むやんけってなった時の解消法

const HogeComponent = (props:LoginUser) => {
  return <div> hello {props.name}! your nickname is {props.nickname}!!!!
}

//...(略)...
< HogeComponent loginUser={loginUser}> // ここをオブジェクトで一気に渡したい
  • 参考：React(TypeScript)のコンポーネントにオブジェクトを直接渡したい
  • スプレッドして渡してください ってなってるけど、オブジェクトをfoo={...hoge}とするとarrayじゃなきゃ使えないぜって怒られる
    • foo={...hoge}→{...hoge}にしたら解決した。変数指定した時点でPropの一要素として割付けしようとするので、fooがarrayじゃないってなって怒られるっぽい？

TypeScriptの型定義のtypeとinterfaceの違い

ReactVFCってなんぞ？

  • 参考：【検証】React.FC と React.VFC はべつに使わなくていい説
    • Reactのコンポーネントには3種類存在する
      • JSX.Element型
      • React.FC型
      • React.VFC型
    • 3つあるが基本的には () => JSX.Element のままでOK　らしい
    • FC ／ VFC は非推奨とは言わないまでも、Github上の議論の中で積極的に使うべきではない傾向にあるということが分かりました らしい
    • 細かくはサイト内を見るべし(今回の主題じゃないので読み飛ばしました)
  • ReactVFCは型定義を行う際に便利な型っぽいので、TypeScriptを使う上ではほぼ必要ないっぽい

関数コンポーネントならぬ、クラスコンポーネントってやつもあるらしい

  • ほとんど関数コンポーネントで賄えるので今は使われていない

UseEffectとは？

  • 参考：副作用フックの利用法
    • useEffect は何をやっているのか？ このフックを使うことで、レンダー後に何かの処理をしないといけない、ということを React に伝えます
import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

API呼び出しはどうやってやる？

・axiosという3rd Partyのアプリを使用する方法
・JavaScriptのfetchメソッドを使う方法

  • 参考：【リソース取得APIの比較】fetchとaxiosの4つの相違点

    • axiosのほうが良さそう(モダンなリクエスト用のライブラリっぽい)

  • npm install axiosしたらエラーが出るようになったぞ・・・！

    • npm auditすると jestとかnode, reactがmissingって言われる
    • axiosに対応のライブラリがデフォだと入ってないのか？それともaxiosのinstall時に何か起きてるのか？何かが悪さをしていると思うが・・・(そのうち調べる)
    • 元々バージョン意識してなかったしnpm davidに頼ってみる
      • npm install david -g
      • david update
    • これをやっても肝心なreactが見つからねえってなった。調べてるとReact: missing script: startという記事が出てきて、yarn.lockファイルが悪さをしてるっぽいことがわかった。yarnを利用しているわけでもないので指示通りにnpm uninstall -g yarnで消してみたら解消(おそらくパッケージ管理の設定ファイルとかを変えなきゃいけないんだろうけど、そこら辺わからないので消す手段を取る)
    • というか本当はyarnが入っていて、恐らくyarnで管理する設定になっていたのでyarn add axiosで導入する必要があったと思われる

  • axiosの方が3rd party製のライブラリなので、導入が必要となるがAPIリクエスト用のライブラリなので、色々と便利なはず

axiosのレスポンス構造

  • 参考：axiosのgithubのReadme
    • data:Object
    • status:number
    • statusText:string
    • headers:Object
    • config:Object
    • request:Object

axiosのパラメータ指定方法

axios.get('/xxx', {
  params: {
    querystringparam: aaaaa
  }
});

axiosで取得したデータがdoes not exist on type 'never'.って怒られるで

axiosで取得したデータをHTMLに描画しようとしたらObject is possibly 'null'って怒られました

reactでパラメータによってHTMLの表示非表示を制御したい

  • 以下みたいな感じでreturnする前にパラメータの値をチェックしてif文で制御すれば良さそう
if(param) {
  return (
    <div> あるよ </div>
  )
} else {
  return (
    <div> ないよ </div>
  )
}

↓TODO↓

↑TODO↑

複数コンポーネントを跨いだ状態管理ってどうやんの？

  • 参考： Software design 2021/8号
    • 大規模プロジェクトならRedux
    • 中・小規模ならContext API
    • 小規模ならuseReducer
  • vueで言うとvuex
0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?