{"id":61,"date":"2025-11-20T16:55:02","date_gmt":"2025-11-20T08:55:02","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=61"},"modified":"2025-11-20T16:55:02","modified_gmt":"2025-11-20T08:55:02","slug":"%e5%9c%a8-html-%e9%a1%b5%e9%9d%a2%e4%b8%ad%e4%bd%bf%e7%94%a8-react%e7%9a%84%e5%9c%ba%e6%99%af%e5%88%86%e6%9e%90-2","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/20\/%e5%9c%a8-html-%e9%a1%b5%e9%9d%a2%e4%b8%ad%e4%bd%bf%e7%94%a8-react%e7%9a%84%e5%9c%ba%e6%99%af%e5%88%86%e6%9e%90-2\/","title":{"rendered":"\u5728 HTML \u9875\u9762\u4e2d\u4f7f\u7528 React\u7684\u573a\u666f\u5206\u6790"},"content":{"rendered":"\n

\u5728 HTML \u9875\u9762\u4e2d\u4f7f\u7528 React<\/strong> \u53ef\u4ee5\u4e3a\u4f60\u5e26\u6765\u52a8\u6001\u3001\u7ec4\u4ef6\u5316\u548c\u53ef\u590d\u7528\u7684\u7528\u6237\u754c\u9762\uff08UI\uff09\u3002React \u662f\u4e00\u4e2a\u7528\u4e8e\u6784\u5efa\u7528\u6237\u754c\u9762\u7684 JavaScript \u5e93\uff0c\u7279\u522b\u9002\u7528\u4e8e\u6784\u5efa\u590d\u6742\u7684\u4ea4\u4e92\u5f0f\u5355\u9875\u9762\u5e94\u7528\uff08SPA\uff09\u3002React \u7684\u6838\u5fc3\u601d\u60f3\u662f\u7ec4\u4ef6\u5316\u5f00\u53d1\u548c\u865a\u62df DOM\u3002\u968f\u7740 React \u7684\u6d41\u884c\uff0c\u8d8a\u6765\u8d8a\u591a\u7684\u5f00\u53d1\u8005\u9009\u62e9\u5728\u4f20\u7edf HTML \u9875\u9762\u4e2d\u96c6\u6210 React \u6765\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u548c\u5f00\u53d1\u6548\u7387\u3002<\/p>\n\n\n\n

1. React \u4e0e HTML \u9875\u9762\u7ed3\u5408\u7684\u573a\u666f\u5206\u6790<\/strong><\/h3>\n\n\n\n

\u5728 HTML \u9875\u9762\u4e2d\u4f7f\u7528 React \u7684\u573a\u666f\u901a\u5e38\u6709\u4ee5\u4e0b\u51e0\u79cd\uff1a<\/p>\n\n\n\n

1.1 \u5355\u9875\u5e94\u7528\uff08SPA\uff09\u4e2d\u7684 React \u7ec4\u4ef6\u96c6\u6210<\/strong><\/h4>\n\n\n\n

\u5728\u4f20\u7edf\u7684\u591a\u9875\u5e94\u7528\u4e2d\uff08MPA\uff09\uff0c\u6bcf\u4e2a\u9875\u9762\u662f\u4e00\u4e2a\u72ec\u7acb\u7684 HTML \u6587\u4ef6\u3002\u5f53\u9700\u8981\u5728 HTML \u9875\u9762\u4e2d\u5d4c\u5165\u52a8\u6001\u5185\u5bb9\u65f6\uff0cReact \u53ef\u4ee5\u4f5c\u4e3a\u90e8\u5206\u9875\u9762\u7684 UI \u6846\u67b6\u6765\u7ba1\u7406\u548c\u6e32\u67d3\u52a8\u6001\u7ec4\u4ef6\u3002\u4f8b\u5982\uff0c\u4f60\u53ef\u4ee5\u5c06 React \u7528\u4e8e\u9875\u9762\u4e2d\u7684\u4e00\u4e2a\u7279\u5b9a\u533a\u57df\uff0c\u800c\u5176\u4ed6\u90e8\u5206\u4ecd\u7136\u4f7f\u7528\u4f20\u7edf\u7684 HTML \u548c JavaScript\u3002<\/p>\n\n\n\n

    \n
  • \u573a\u666f<\/strong>\uff1a\u5728\u4e00\u4e2a\u9759\u6001\u7f51\u7ad9\u4e2d\uff0c\u4f60\u5e0c\u671b\u901a\u8fc7 React \u7ec4\u4ef6\u6765\u6e32\u67d3\u52a8\u6001\u5185\u5bb9\uff0c\u6bd4\u5982\u7528\u6237\u8bc4\u8bba\u3001\u4ea4\u4e92\u5f0f\u8868\u5355\u3001\u52a8\u6001\u83dc\u5355\u7b49\u3002<\/li>\n\n\n\n
  • \u5b9e\u73b0<\/strong>\uff1a\u4f60\u53ea\u9700\u8981\u5728 HTML \u9875\u9762\u4e2d\u901a\u8fc7\u00a0script<\/code>\u00a0\u6807\u7b7e\u52a0\u8f7d React\uff0c\u5e76\u5c06\u5b83\u6302\u8f7d\u5230\u6307\u5b9a\u7684 DOM \u8282\u70b9\u4e2d\u3002<\/li>\n<\/ul>\n\n\n\n

    \u793a\u4f8b\uff1a<\/h4>\n\n\n
    \n&lt;!DOCTYPE html>\n&lt;html lang="en">\n&lt;head>\n    &lt;meta charset="UTF-8">\n    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">\n    &lt;title>React \u5728 HTML \u4e2d\u7684\u5e94\u7528&lt;\/title>\n&lt;\/head>\n&lt;body>\n\n    &lt;div id="root">&lt;\/div> &lt;!-- React \u4f1a\u6302\u8f7d\u5230\u8fd9\u91cc -->\n\n    &lt;script src="https:\/\/unpkg.com\/react@17\/umd\/react.development.js">&lt;\/script>\n    &lt;script src="https:\/\/unpkg.com\/react-dom@17\/umd\/react-dom.development.js">&lt;\/script>\n    &lt;script>\n        \/\/ \u521b\u5efa React \u7ec4\u4ef6\n        const MyComponent = () => {\n            return (\n                &lt;div>\n                    &lt;h1>Hello, React in HTML!&lt;\/h1>\n                    &lt;p>This is a simple React component rendered inside a static HTML page.&lt;\/p>\n                &lt;\/div>\n            );\n        };\n\n        \/\/ \u5c06 React \u7ec4\u4ef6\u6e32\u67d3\u5230\u9875\u9762\u4e2d\u7684 #root \u5143\u7d20\n        ReactDOM.render(&lt;MyComponent \/>, document.getElementById('root'));\n    &lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
    \u8bf4\u660e\uff1a<\/h4>\n\n\n\n
      \n
    • \u901a\u8fc7\u5728 HTML \u9875\u9762\u4e2d\u5f15\u5165 React \u548c ReactDOM \u7684 CDN \u7248\u672c\uff0c\u4f60\u53ef\u4ee5\u76f4\u63a5\u5728\u9875\u9762\u4e2d\u5b9a\u4e49 React \u7ec4\u4ef6\uff0c\u5e76\u5c06\u5b83\u6e32\u67d3\u5230\u4e00\u4e2a\u6307\u5b9a\u7684\u00a0div<\/code>\uff08\u5982\u00a0#root<\/code>\uff09\u4e2d\u3002<\/li>\n\n\n\n
    • React \u4f1a\u63a5\u7ba1\u9875\u9762\u4e2d\u6307\u5b9a\u5bb9\u5668\uff08#root<\/code>\uff09\u5185\u7684\u5185\u5bb9\u3002<\/li>\n<\/ul>\n\n\n\n
      1.2 \u5728\u73b0\u6709\u9879\u76ee\u4e2d\u9010\u6b65\u8fc1\u79fb\u5230 React<\/strong><\/h4>\n\n\n\n
      \u6709\u65f6\uff0c\u4f60\u7684\u73b0\u6709 HTML \u9875\u9762\u53ef\u80fd\u662f\u4e00\u4e2a\u4f20\u7edf\u7684\u591a\u9875\u9762\u5e94\u7528\uff08MPA\uff09\uff0c\u4f46\u662f\u4f60\u60f3\u5c06\u5176\u9010\u6b65\u8fc1\u79fb\u5230 React \u6784\u5efa\u7684\u5355\u9875\u9762\u5e94\u7528\uff08SPA\uff09\u3002\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u4f60\u53ef\u4ee5\u5c06 React \u4f5c\u4e3a\u4e00\u4e2a\u201c\u589e\u91cf\u8fc1\u79fb\u201d\u7684\u5de5\u5177\uff0c\u5373\u5728\u73b0\u6709\u7684 HTML \u9875\u9762\u4e2d\u96c6\u6210 React \u7ec4\u4ef6\u3002<\/p>\n\n\n\n
        \n
      • \u573a\u666f<\/strong>\uff1a\u4f60\u53ef\u80fd\u5df2\u7ecf\u6709\u4e00\u4e2a\u4f20\u7edf\u7684 HTML \u9875\u9762\u6216\u9879\u76ee\uff0c\u4f46\u5e0c\u671b\u5c06\u4e00\u4e9b\u52a8\u6001\u90e8\u5206\uff08\u4f8b\u5982\u8bc4\u8bba\u533a\u3001\u4ea4\u4e92\u8868\u5355\u3001\u6570\u636e\u8868\u683c\u7b49\uff09\u8fc1\u79fb\u5230 React \u4e2d\uff0c\u4ee5\u83b7\u5f97\u66f4\u597d\u7684\u7528\u6237\u4f53\u9a8c\u548c\u5f00\u53d1\u6548\u7387\u3002<\/li>\n\n\n\n
      • \u5b9e\u73b0<\/strong>\uff1a\u4f60\u53ef\u4ee5\u901a\u8fc7\u5c06 React \u7ec4\u4ef6\u5d4c\u5165\u5230\u73b0\u6709\u9875\u9762\u7684\u67d0\u4e2a\u90e8\u5206\uff0c\u800c\u65e0\u9700\u91cd\u6784\u6574\u4e2a\u5e94\u7528\u3002<\/li>\n<\/ul>\n\n\n\n
        \u793a\u4f8b\uff1a<\/h4>\n\n\n
        \n&lt;!-- \u5728\u73b0\u6709 HTML \u9875\u9762\u4e2d -->\n&lt;!DOCTYPE html>\n&lt;html lang="en">\n&lt;head>\n    &lt;meta charset="UTF-8">\n    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">\n    &lt;title>Incremental Migration to React&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;header>\n        &lt;h1>Welcome to My Website&lt;\/h1>\n    &lt;\/header>\n\n    &lt;main>\n        &lt;p>This is a traditional HTML page, but React will render here:&lt;\/p>\n        &lt;div id="react-container">&lt;\/div> &lt;!-- React \u4f1a\u5728\u8fd9\u91cc\u6e32\u67d3 -->\n    &lt;\/main>\n\n    &lt;footer>\n        &lt;p>&amp;copy; 2021 My Website&lt;\/p>\n    &lt;\/footer>\n\n    &lt;script src="https:\/\/unpkg.com\/react@17\/umd\/react.development.js">&lt;\/script>\n    &lt;script src="https:\/\/unpkg.com\/react-dom@17\/umd\/react-dom.development.js">&lt;\/script>\n\n    &lt;script>\n        const DynamicComponent = () => {\n            return (\n                &lt;div>\n                    &lt;h2>This is a dynamic React component&lt;\/h2>\n                    &lt;p>It is rendered inside a static HTML page.&lt;\/p>\n                &lt;\/div>\n            );\n        };\n\n        ReactDOM.render(&lt;DynamicComponent \/>, document.getElementById('react-container'));\n    &lt;\/script>\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
        \u8bf4\u660e\uff1a<\/h4>\n\n\n\n