React | CRA(Create-React-App)


CRAリン反応プロジェクトの開始に必要な開発環境を設定するためのツール.
基本的なノードモジュールと形態を設定します.

1.反応開始


:リアクターはUI機能のみを提供します.そのため、開発者が自ら構築しなければならないものが多い.システム全体を直接構築できるため、必要に応じて最適化できますが、多くの労力が必要なため、最初の段階では開発環境を直接構築することは難しいです.
これらの問題を解決するためにCRAが現れた.
  • CRAは、Webアプリケーションを作成するためのフィードバック環境を提供します.
  • CRAを用いて,1回の命令で反応器開発環境を構築した.(時間短縮可能)
  • 2.CRAを取り付けた後


    :CRAには、反応アプリケーションを実行するために必要なさまざまなパッケージ(バーベルやWebパッケージなど)が含まれており、システム、ES 6+構文、CSSの後処理をテストするために必要な開発環境も提供されています.これらの開発環境を直接構築するには、時間がかかるだけでなく、メンテナンスも必要です.CRAを使用して開発環境を設定するため、既存の機能を改善したり、新しい機能を追加したりする場合は、パッケージバージョンをアップロードするだけです.

    3.CRAのインストール方法


    :CRAを直接インストールし、必要に応じてCRAにプロジェクトを生成させる方法もあります.
    ただし、最新バージョンのCRAを使用するためには、npxでのインストールを推奨します.
    npx create-react-app 프로젝트명
  • npxにインストールされている場合は、最新バージョンのCRAをインストールし、プロジェクトを作成してからCRAを再削除します.
  • 4.開発環境の構築


    :CRAを使用して初期開発環境を構築した場合、このプロジェクトフォルダに複数のファイルがインストールされます.
    どんなものがあるか見てみましょう.

    1) node.modules


    :パッケージソースを含むフォルダに削除しないでください...触らないで.

    2) package.json


    :パッケージの情報とバージョン.
    追加のサードパーティ製プラグインをインストールすると、自動的にここに記録されます.
  • Githubでアイテムをプッシュすると、ファイルはアップロードされ、ノードとしてのみ使用されます.modulesのような重いフォルダは上がらない.
  • すなわち、モジュールを生成するには、プロジェクトをクローンしたチームメンバーがgit installをクローンする必要がある.
  • 当時の設置の既存はこのpackage.jsonです.
  • 3) gitignore


    :実はpachageです.jsonだけがgithubでnodeモジュールが上がらない理由はこの子です.
    つまり、襟に置くべきではないフォルダを設定することができます.
  • を開くと、上の写真のようにノードが開きます.モジュールも初期に設定されていることがわかります.
  • 4)共通フォルダ


    :ネックデータを格納する場所.
    index.htmlもここにあります.(レスポンスでは、インデックスは編集されないファイルになりました.)

    5)srcフォルダ


    :チームプロジェクトの共通構成部品とページを構成する構成部品をここに集約します.