やり直す.React -1 (Setup and Installation)

6429 ワード
React TIL テキストリンク
反応の主な概念を整理したいです.
配置を開始するには、数式ドキュメントを参照してください.
初めて帰ってから水をかけ直しました!
公式文書にもリンクされていますが、[リアクション起動チュートリアル]
https://www.taniarascia.com/getting-started-with-react/
Tania Rasciaの書いた文章はとてもいいです.

what is React ?


ReactはFacebookによって開発され管理されています ユーザーインタフェース(UI)を作成するJavaScriptライブラリ.応答などのフロントエンド・ライブラリまたはフレームワークを使用する最大の理由の1つは、ユーザー・インタフェースが自動的に更新されることです.反応. バーチャルドーム UIをすばやく更新します.バーチャルドーム これは、以前のUIステータスをメモリに保持して、変更するUIの最小セットを計算する技術です.このテクノロジーは、不要なUI更新を削減し、パフォーマンスを向上させます.

Static HTML File


反応を開始する第1の方法
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@^16/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/[email protected]/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      // 이곳에 리액트 코드들이 입력된다. (1)
    </script>
  </body>
</html>
scriptで
  • React-ReactトップレベルAPI
    DOMに関するメソッド
  • REACT DOMの追加
  • バーベルJavaスクリプトコンパイラでは、古いブラウザでES 6+を使用できます.
    クラスを(1)に追加
    class App extends React.Component {
      render() {
        return <h1>Hello world!</h1>
      }
    }

    ReactDOM.render(<App />, document.getElementById('root'))
    React DOM render()メソッドを使用して、rootHTMLのdivにAppクラスを表示します.

    Create React App


    実際、上記の最初の方法は有効ではありません.
    npx create-react-app 파일명
    必要な場所にCRAを取り付ける...終わりだ!
    • LaraVel 8フォームの検証例
    どのように反応でFireBaseストレージで画像をアップロードする.js