{"id":5753,"date":"2022-03-20T19:10:07","date_gmt":"2022-03-20T11:10:07","guid":{"rendered":"http:\/\/39.106.39.94\/?p=5753"},"modified":"2022-04-18T22:15:51","modified_gmt":"2022-04-18T14:15:51","slug":"%e7%bb%83%e4%b9%a01%ef%bc%9a%e5%ad%a6%e4%b9%a0%e8%ae%b0%e5%bd%95%e5%99%a8","status":"publish","type":"post","link":"https:\/\/lilichao.com\/?p=5753","title":{"rendered":"\u7ec3\u4e601\uff1a\u5b66\u4e60\u8bb0\u5f55\u5668"},"content":{"rendered":"\n<p>\u901a\u8fc7\u524d\u8fb9\u8bfe\u7a0b\u7684\u5b66\u4e60\uff0c\u6211\u4eec\u5df2\u7ecf\u53ef\u4ee5\u4f7f\u7528npm\u53bb\u7ba1\u7406React\u9879\u76ee\u4e86\u3002\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5f00\u59cb\u5c1d\u8bd5\u4f7f\u7528React\u6765\u505a\u4e00\u4e9b\u5c0f\u7684\u7ec3\u4e60\uff0c\u73b0\u5728\u6211\u4eec\u6709\u5982\u4e0b\u4e00\u4e2a\u8bbe\u8ba1\u56fe\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"869\" height=\"607\" src=\"https:\/\/my-wp.oss-cn-beijing.aliyuncs.com\/wp-content\/uploads\/2022\/04\/20220418220344552.png\" alt=\"\" class=\"wp-image-5755\" srcset=\"https:\/\/my-wp.oss-cn-beijing.aliyuncs.com\/wp-content\/uploads\/2022\/04\/20220418220344552.png 869w, https:\/\/my-wp.oss-cn-beijing.aliyuncs.com\/wp-content\/uploads\/2022\/04\/20220418220344552-300x210.png 300w, https:\/\/my-wp.oss-cn-beijing.aliyuncs.com\/wp-content\/uploads\/2022\/04\/20220418220344552-768x536.png 768w, https:\/\/my-wp.oss-cn-beijing.aliyuncs.com\/wp-content\/uploads\/2022\/04\/20220418220344552-400x280.png 400w\" sizes=\"(max-width: 869px) 100vw, 869px\" \/><\/figure>\n\n\n\n<p>\u8fd9\u4e2a\u9875\u9762\u6211\u79f0\u5176\u4e3a\u5b66\u4e60\u8bb0\u5f55\u5668\uff0c\u5176\u4e3b\u8981\u4f5c\u7528\u5c31\u662f\u8bb0\u5f55\u6211\u4eec\u6bcf\u5929\u5728\u5b66\u4e60\u4e0a\u6240\u82b1\u8d39\u7684\u65f6\u95f4\u3002\u4f7f\u7528React\u5f00\u53d1Web\u9879\u76ee\u548c\u76f4\u63a5\u7f16\u5199\u7f51\u9875\u4e5f\u6ca1\u6709\u592a\u5927\u7684\u533a\u522b\u3002\u65e0\u975e\u5c31\u662f\u7ed3\u6784\u3001\u8868\u73b0\u548c\u884c\u4e3a\u3002\u6240\u4ee5\u5bf9\u4e8e\u4e0a\u8ff0\u7ec3\u4e60\u6211\u4eec\u53ef\u4ee5\u5148\u5c1d\u8bd5\u5728<code>index.js<\/code>\u4e2d\u5b9a\u4e49\u5b83\u7684\u7ed3\u6784\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>index.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import ReactDOM from \"react-dom\/client\";\nimport '.\/index.css';\n\nconst App = &lt;div className=\"logs\"&gt;\n    &lt;div className=\"logs-item\"&gt;\n        &lt;div className=\"logs-date\"&gt;\n            &lt;div className=\"month\"&gt;\u4e09\u6708&lt;\/div&gt;\n            &lt;div className=\"day\"&gt;22&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"logs-item-desc\"&gt;\n            &lt;h2&gt;\u5b66\u4e60React&lt;\/h2&gt;\n            &lt;div className=\"logs-item-time\"&gt;80\u5206\u949f&lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;;\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(App);\n<\/code><\/pre>\n\n\n\n<p>\u4f60\u4f1a\u53d1\u73b0\uff0c\u6211\u4eec\u5b9a\u4e49\u7684\u7ed3\u6784\u5b58\u50a8\u5230\u4e86\u4e00\u4e2a\u540d\u4e3a<code>App<\/code>\u7684\u53d8\u91cf\u4e2d\uff0c\u7136\u540e\u901a\u8fc7<code>root.render()<\/code>\u5c06\u5176\u6e32\u67d3\u5230\u4e86\u9875\u9762\u4e2d\uff0c\u9664\u6b64\u4e4b\u5916\u548c\u7f16\u5199<code>html<\/code>\u7684\u7ed3\u6784\u6ca1\u6709\u4efb\u4f55\u533a\u522b\u3002<\/p>\n\n\n\n<p>\u5728React\u4e2d\u7f16\u5199\u6837\u5f0f\u65f6\uff0c\u53ef\u4ee5\u76f4\u63a5\u7f16\u5199\u5230<code>css<\/code>\u6587\u4ef6\u4e2d\uff0c\u7136\u540e\u901a\u8fc7<code>import<\/code>\u76f4\u63a5\u5f15\u5165\uff0c\u5f15\u5165\u540e<code>Webpack<\/code>\u4f1a\u81ea\u52a8\u5bf9\u4ee3\u7801\u8fdb\u884c\u6253\u5305\u3002<code>css<\/code>\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>index.css<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">*{\n    box-sizing: border-box;\n}\n\nbody{\n    margin: 0;\n    background-color: #dfdfdf;\n}\n\n.logs{\n    width: 800px;\n    background-color: #eae2b7;\n    border-radius: 20px;\n    margin: 20px auto;\n    padding: 10px;\n    box-shadow: 0 1px 8px rgba(0, 0, 0, .25);\n    display: flow-root;\n}\n\n.logs-item{\n    margin: 16px;\n    background-color: #fcbf49;\n    border-radius: 20px;\n    box-shadow: 0 1px 8px rgba(0, 0, 0, .25);\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    font-weight: bold;\n}\n\n.logs-date{\n    width: 88px;\n    border-radius: 20px;\n    overflow: hidden;\n    text-align: center;\n}\n\n.logs-date .month{\n    height: 28px;\n    line-height: 28px;\n    background-color: #d62828;\n    font-size: 20px;\n    color: white;\n}\n\n.logs-date .day{\n    background-color: #fff;\n    height: 60px;\n    line-height: 60px;\n    font-size: 50px;\n}\n\n.logs-item-desc{\n    flex: auto;\n    text-align: center;\n}\n\n.logs-item-desc h2{\n    margin: 10px 0;\n    font-size: 20px;\n    color: #003049;\n}\n\n.logs-item-time{\n    color: #d62828;\n}\n<\/pre>\n\n\n\n<p>\u7f16\u5199\u8fd9\u4e2a\u9875\u9762\u65f6\uff0c\u4e0d\u8981\u6c42\u4f60\u7684\u9875\u9762\u548c\u56fe\u7247\u91cc\u7684\u4e00\u6a21\u4e00\u6837\uff0c\u53ea\u8981\u611f\u89c9\u5bf9\u4e86\u5373\u53ef\uff0c\u7ec3\u4e60\u7684\u4e3b\u8981\u76ee\u7684\u8fd8\u662f\u719f\u7ec3React\u7684\u4e00\u4e9b\u64cd\u4f5c\u3002<\/p>\n\n\n\n<p>\u7ec3\u4e60\u867d\u7136\u5199\u5b8c\u4e86\uff0c\u4f46\u662f\u4f60\u6709\u6ca1\u6709\u53d1\u73b0\u4ec0\u4e48\u95ee\u9898\u5462\uff1f<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u901a\u8fc7\u524d\u8fb9\u8bfe\u7a0b\u7684\u5b66\u4e60\uff0c\u6211\u4eec\u5df2\u7ecf\u53ef\u4ee5\u4f7f\u7528npm\u53bb\u7ba1\u7406React\u9879\u76ee\u4e86\u3002\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5f00\u59cb\u5c1d\u8bd5\u4f7f\u7528React\u6765\u505a\u4e00\u4e9b\u5c0f [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5755,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[198],"tags":[200,202,199,221],"_links":{"self":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts\/5753"}],"collection":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5753"}],"version-history":[{"count":3,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts\/5753\/revisions"}],"predecessor-version":[{"id":5757,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts\/5753\/revisions\/5757"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/media\/5755"}],"wp:attachment":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}