Web_React #11

6755 ワード
React web テキストリンク
210825
Web_React #11
  • dicegame
    react実習でサイコロゲームを作ろう
    • プロジェクトの設定
    共通フォルダのインデックス.htmlを含まないコンテンツの削除と変更
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>주사위 게임</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
    srcフォルダのインデックス.js以外のすべてのコンテンツの削除と変更
    import ReactDOM from 'react-dom';


ReactDOM.render(
  <h1>안녕 리액트~</h1>,
  document.getElementById('root')
);
    正常な動作を確認

  • index.html
    Webブラウザで最初に実行されるファイルといえます.

  • index.js
    • import ReactDOM from 'react-dom';


ReactDOM.render(
  <h1>안녕 리액트~</h1>,
  document.getElementById('root')
);
    ReactDomという名前のオブジェクトをreact-domというパッケージからフォルダにエクスポートします.
    次にrenderを実行し、renderはペイント画面を表します.
    renderメソッドを見ると2つのパラメータが得られます.コードにhtmlタグが使用されていることを確認できます.<h1>タグが作成されます.getElementId(「root」)はrootというhtml要素です.
    すなわち、renderが実行されると、reactは、最初のパラメータ値に基づいて2番目の新しいhtml要素を作成し、その要素を2番目のパラメータ値に入れるように操作します.
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>주사위 게임</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
    コードでは、ルートの名前はindexです.htmlのdivラベルのid.そこにindexがありますjsで作成したh 1ラベルを入れます.
    リファレンス
    https://www.codeit.kr/courses/react-frontend-development/topics/getting-started-with-react
    奇妙な符号化big 5-hkscs
    ZUFE 1035文字幅符号化(文字列)