Day 1-ReactJSを使用した映画Webサービスの作成

4381 ワード
ReactDOM エンコーディング JSX html React JavaScript テキストリンク
サイト:エンコーディングなし
講座:RealtJSを用いた映画Webサービスの作成
時間:2022.04.17
◆完成した講座:
  • #1 [2021 UPDATE] INTRODUCTION
  • #2 [2021 UPDATE] THE BASICS OF REACT

    • 1. React?


    node.jsをインストールする必要があります.
    Visual Studioの端末にコマンドで反作用をインストールします.
    React
    Facebookが作成したオープン図書館.
    jqueryのように簡単に、簡単に作成できます.
    htmlでは何もせず、html、css、javascriptなどを一度に作成できます
    仮想ドームでは、ユーザーがページを再ロードせずにデータを変更できます.
    変更された部分のみを変更して表示し、すべての操作が完了すると
    それらを合わせて、真実のドームに反映します.
    React DOM
    htmlを開くと、「DOM」というオブジェクトが作成されます.
    変更時にDOM全体を再作成します.
    Reactは、変更のみを更新する「仮想DOM」を作成し、実際のDOMと比較します.すべての更新が終了すると、変更部分だけが本物のDOMに反映されます.
    JSX
    Java Script eXtension. (JavaScript拡張構文)
    JavaScriptでのHTMLの作成と同様
    script type=は「text/babel」と定義して作成する必要があります.
    BABELはJSXを通常のJavaScriptに翻訳してHTMLに転送する
    React.createElement(「親ラベル」、プロパティなど、「子ラベル」)は良い方法ではありません.これに代わってJSX形式で書いたほうがいいです
    合成ドキュメントでreact、reactDOM、Babelを直接アクティブにします.
      <body>
    <div id="root"></div>
  </body>
//보통 HTML의 Body에 'root'란 id의 'div'를 하나 생성해놓고 시작.
JSX는 감싸는 부모태그가 하나 있어야 하기 때문임.

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">이 안에 작성 </script>
  // JSX를 번역해서 일반 JS형태로 HTML의 HEAD 부분으로 전달해 줌
    qlabelにクリックイベントclicked()を追加しevent
    Credentials