TIL # 37 (React intro 4)


1. React. Why? What?

  • アプリケーション開発
  • ユーザインタフェース作成用JavaScriptライブラリ
  • 2. CRA



  • Node.js & npm

  • Settings
    1) node-modules - package.json - .gitignore
  • node-modules:CRAを構成する全てのパケットソースを含むフォルダpackage.json:CRAベースパッケージ以外のインストール済みライブラリ(名称、バージョン)を記録するファイル.gitignore: .gitignore ファイルgithubにアップロードしたくないフォルダとファイルを作成できます.
    2) `index.html` - `index.js` - `App.js`
    index.html:<div id="root"></div>ファイルがあります.index.js: ReactDOM.render関数には2つのパラメータがあります.1番目のパラメータは、画面に表示される要素であり、2番目のパラメータは、画面に表示される要素の位置である.ReactDOM.render( <App /> , document.getElementById('root'))現在画面に表示されている初期構成部品.

    ::その他のフォルダ構成


    1)共通フォルダ
  • index.html
  • イメージ-イメージファイル管理
  • data-mockデータ管理(後述)
  • 2)srcフォルダ
  • コンポーネント-共通部品管理
  • pages—ページ上の構成部品フォルダからなる
  • Login - App.js: , Login.js
  • Main- Login.scss , Main.js
  • stylesフォルダ
  • Main.scss-css初期化
  • reset.scss-よく使われるcss属性定義(ex.font-family,theme color)
  • 3. Component & JSX

  • コンポーネント-定義/タイプ/特徴
  • JSX-定義/特徴