TIL 28 | React Intro


Why React?


Webアプリケーションの開発


html、css、javascriptのみを使用する場合はjQueryなどのメソッドセットを使用します.しかし,Webの複雑化に伴い,従来のメンテナンス方式が制限され,フロントエンドフレームワークやライブラリの使用が開始された.
想定フレームワークは固定フレームワークで開発され,ライブラリはインポートコードによって私のワークスペースで開発された.

大規模なフロントエンドライブラリ×3

  • Angular
  • Vue
  • React
  • はんのう

  • view(画面)(ユーザインタフェースを作成するためのJavaScriptライブラリ)
  • 応答などのライブラリまたはフレームワークを使用してUIを自動的に更新
  • 仮想ドーム(仮想DOM)を介してUIを迅速に更新(仮想ドームは、変更されるUIの最小集合を計算するために古いUI状態をメモリに保持する技術である!
  • reactionは1つのライブラリで、機能は不足します;第三者のライブラリ(ルータ、冗長など)
  • を使用します
  • Facebookの継続的な管理は生態系を活発にしている.
  • Node.jsとは何ですか。


    JavaScriptをブラウザの外(サーバなど)で実行できる環境です.開発プロジェクトに必要なバーベル、WebパッケージなどはNodeです.jsベースなので必要です.Node.インストールjsはnpmを自動的にインストールします.

    npm

  • node package manager
  • ノードベースのパッケージ
  • を使用するにはnpmというパッケージ管理ツールが必要です.
  • npmでは、複数のパッケージ
  • をインストールおよび管理できます.

    CRA(create react app)


    反応プロジェクトの開始に必要な開発環境を設定するためのツール
    cd Desktop/생성할폴더
    npm create-react-app 프로젝트폴더명
    cd 프로젝트폴더명
    npm start

    craの概要



  • node modules:craを構成するすべてのパケットソースコードが存在する

  • package.json:cra基本パッケージ以外にインストールされているライブラリ/パッケージ情報を記録するファイル
    「dependencies:レスポンスを使用するすべてのパッケージのリストとバージョンを表示できます.
    新しいパッケージをインストールする場合:依存項目に自動的に追加されないため、npmにインストールする場合は--saveを入力する必要があります.ex) npm install slider --save

  • .gitignore:githubにアップロードしたくないフォルダとファイルを作成する
    ex)node modulesは重くgithubにアップロードされません.package.jsonでパッケージ名とバージョンを渡すだけです.他のチームメンバーはgitクローン後にnpm installからダウンロードします.
  • index.html:<div id="root"></div>,1ページアプリケーションなのでhtmlは1つしかありません!
  • index.js:ReactDOM.render(<App />, document.getElementById("root")),関数には2つのパラメータ(表示する要素、画面に表示する要素の位置)
  • があります.
  • App.js:画面に表示される初期コンポーネント