一口で食べるReact-Day 6


🗓 実施日:2022.04.15~16未明
体力が足りなくて长くできない.あとで夜も勉強しますよ.

5-1. Why React.js

  • 反応器は、素子ベースUIライブラリである.
  • の重複コードを修正する必要がある場合、修正する必要があるコードは
  • 増加する.
  • は「アセンブリ化」方式を採用する、修正時の穴数
  • を減らすことができる.
  • 反応器は宣言プログラミングである.
  • jQuery:コマンドプログラミング(プロセスを1つずつリストすべき)
  • 宣言プログラミング:目標明確
  • virtual DOM (Document Object Model)
  • のドキュメントを更新し続けると、ブラウザは大量のタスク
  • を実行し続けます.
  • の変更を仮想DOMに事前に更新し、その後...?(レンダリングなし)1回の更新
  • 5-2. Create React App


    React.jsに加えて、Webpack(複数のJavaScriptファイルを1つのファイルにマージ)とBael(jsxとhtmlをブレンドした構文でJavaScriptコードを記述するのに役立ちます)をダウンロードします.
    →でもインストールすると…やるべきことはたくさんある
    →Boiler Plate(事前に用意した小包)
  • フォルダ(reactiexce 1)
  • を作成
  • Vscodeを使用してフォルダ
  • を開きます.
  • パネル、端末(Command+J)
  • を開く
  • create進捗

  • npx:npmではありません.一度だけ使用する場合はnpxを使用します.
    npx -v 

  • npx-v:バージョンの検証

  • 作成
    npx create-react-app reactexam1
  • ReactExech 1フォルダ内に作成されるので、その内容を外部に切り取って内部のReactExech 1フォルダ:
  • を削除してください.
    node.jsベースなので、node modules、package.jsonなど似たようなところが多いです
    package.jsonを表示するときに、スクリプトにショートカットで登録されたコンテンツがあります.
    運転
  • npm start
    反応はlocalhost:3000で開きます

  • 終了:control+c

  • 実行順序
  • index.jsでアプリケーションを適用します.js
  • のインポート
  • index.インデックスhtmlのrootというidのdiv.jsから読み出し、
    Renderの内容はアプリですjs戻り値

  • JAvascript+html=javascript式、extension=jsx
  • javascriptの変数または関数はhtmlコードで
  • を使用するのが簡単です.

  • export default ??
  • 一部のjsがexport defaultとしてエクスポートされた構成部品は、
  • です.
  • は、「ファイルのパス」(名前変更可能)
  • として他のファイルで使用できます.