Reactdomrender ()

6831 ワード
react todayilearned codenewbie beginners テキストリンク
ハローフェロー👋
Reactdomの1つの機能は、Webページに反応する要素をレンダリングすることですReactDOM.render() メソッド.

構文
ReactDOM.render(element, container[, callback])
こうすることができます.
ReactDOM.render(WHAT to render, WHERE to render[, callback if any])

前提条件
我々が飛び込む前に、我々は反応とreactdomを使いますCDN リンクのHTMLファイルではなく、アプリケーションを実行するにはcreate-react-app . あなたが見ることができる方法と理解方法react-dom 依存は、フードの下で働きます.
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
我々も必要Babel JSX構文を変換するには
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
ReactDOM.render() インアクション
を作成しましょう<div> with id="root" インindex.html ファイル.
<html>
    <head>
        ...
    </head>
    <body>
        <div id="root"></div>
        <!-- CDN Links -->
        ...
    </body>
</html>
始まりと終わりの間にあるものdiv タグは、反応は我々が作成したものをレンダリングする場所です.
The <div id="root"></div> 我々のアプリケーション全体のコンテナです.
今、我々はレンダリングされますh1 .
私たちは、JSXを翻訳するためにBabelを必要とするので、我々はReactDOM.render() イン<script type="text/babel"> .
<script type="text/babel">
  ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))
</script>
📖 お読み方法
レンダリングh1 に<div> with id="root" .
ご覧の通り、HTMLの要素を入れますh1 JavaScriptのコードの途中でパラメータです.その行全体をJSXと呼ぶ.
次のポストでJSXについてもっとお話します.

結論
  • ReactDOM.render() 反応する方法は、Webページに反応アプリをレンダリングすることです.
  • ReactDOM.render() は少なくとも2つのパラメータを取ります:
  • 要素(我々は何をレンダリングしたい)
  • コンテナー(レンダリングする場所)
    • 私はここに完全なコードを提供します.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ReactDOM.render()</title>
  </head>
  <body>
    <div id="root"></div>

    <!-- Babel CDN Link -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- React & ReactDOM CDN Links -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> 
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- Render to page -->
    <script type="text/babel">
      ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))
    </script>
  </body>
</html>
    JavaScriptの配列から最も高い、そして最も低い数を得る方法?
    アンドロイド3)イベント処理