{"id":42,"date":"2023-11-10T17:43:28","date_gmt":"2023-11-10T09:43:28","guid":{"rendered":"http:\/\/hxlsakrua.top\/?p=42"},"modified":"2024-01-15T20:02:31","modified_gmt":"2024-01-15T12:02:31","slug":"react%e5%87%bd%e6%95%b0%e5%bc%8f%e7%bb%84%e4%bb%b6%e9%a1%b9%e7%9b%ae%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba","status":"publish","type":"post","link":"http:\/\/hxlsakrua.top\/?p=42","title":{"rendered":"react\u51fd\u6570\u5f0f\u7ec4\u4ef6\u9879\u76ee\u5feb\u901f\u642d\u5efa"},"content":{"rendered":"\n

\u00a01.\u521b\u5efa\u9879\u76ee<\/h2>\n\n\n\n
\n

\u5728\u60f3\u8981\u521b\u5efa\u9879\u76ee\u7684\u4f4d\u7f6e\u4e0b\u4f7f\u7528cmd\u547d\u4ee4\u884c\u6216\u4f7f\u7528idea\u7ec8\u7aef\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4(\u672c\u4eba\u7528\u7684idea)<\/p>\n\n\n\n

\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aprimordial-react\u7684\u9879\u76ee<\/p>\n<\/blockquote>\n\n\n\n

npx create-react-app primordial-react<\/code><\/pre>\n\n\n\n
\n
\u00a0\u00a0\u8f93\u5165y\uff0c\u5bfc\u5165\u8be5\u5305\uff08\u4e0d\u662f\u7b2c\u4e00\u6b21\u642d\u5efa\u7684\u8bdd\u5c31\u6ca1\u6709\u8be5\u9009\u9879\uff09\"\"<\/p>\n<\/blockquote>\n\n\n\n
\n
\u6253\u5f00\u8be5\u9879\u76eeprimordial-react<\/p>\n\n\n\n
\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4(\u9010\u884c\u8f93\u5165)<\/p>\n<\/blockquote>\n\n\n\n
npm install\r\nnpm start<\/code><\/pre>\n\n\n\n
\u200b\"\"<\/p>\n\n\n\n
\n
\u51fa\u73b0\u8be5\u9875\u9762\u8bf4\u660e\u811a\u624b\u67b6\u5b89\u88c5\u6210\u529f\uff0c\u505c\u6b62\u8fd0\u884c\u3002<\/p>\n<\/blockquote>\n\n\n\n
2.\u521d\u59cb\u5316\u9879\u76ee<\/h2>\n\n\n\n
\n
\u5220\u9664\u6389\u65b0\u9879\u76ee\u4e2d\u00a0src<\/code>\u6587\u4ef6\u5939\u4e0b\u7684\u6240\u6709\u6587\u4ef6\u3002\uff08\u4e0d\u8981\u5220\u9664src\u6587\u4ef6\u5939\uff09<\/p>\n\n\n\n
\u5728src\u6587\u4ef6\u4e0b\u65b0\u5efa\u5982\u4e0b\u6587\u4ef6<\/p>\n<\/blockquote>\n\n\n\n
index.js<\/p>\n\n\n\n
import React from 'react';\r\nimport ReactDOM from 'react-dom\/client';\r\n\r\nconst Hello = () => {\r\n    return(\r\n        <div>hello world<\/div>\r\n    )\r\n};\r\n\r\nexport default Hello;\r\n\r\n\/\/ \u5c06Hello\u7ec4\u4ef6\u653e\u5165public\/index.html(\u521d\u59cb\u7684\u9875\u9762)\u91cc\r\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\r\nroot.render(<Hello \/>);\n\r<\/code><\/pre>\n\n\n\n
\u8fd0\u884c\u8be5\u9879\u76ee\uff0c\u6548\u679c\u5982\u4e0b<\/p>\n\n\n\n
\u200b\u200b\"\"\u200b<\/p>\n\n\n\n
3.\u521b\u5efa\u9879\u76ee\u67b6\u6784<\/h2>\n\n\n\n
\u5982\u4e0b\u521b\u5efa\u4e09\u4e2a\u6587\u4ef6\u5939\uff08\u82e5\u6709\u5176\u4ed6\u9700\u8981\u53ef\u4ee5\u81ea\u884c\u5728src\u4e0b\u521b\u5efa\u65b0\u7684\u6587\u4ef6\u5939\uff09<\/p>\n\n\n\n
\u200b\"\"\u200b<\/p>\n\n\n\n