{"id":1678,"date":"2022-01-01T01:50:10","date_gmt":"2021-12-31T17:50:10","guid":{"rendered":"http:\/\/cheng-bing.top\/?p=1678"},"modified":"2022-07-24T23:23:59","modified_gmt":"2022-07-24T15:23:59","slug":"react%e6%96%b0%e9%a1%b9%e7%9b%ae%e6%93%8d%e4%bd%9c%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/cheng-bing.top\/index.php\/2022\/01\/01\/react%e6%96%b0%e9%a1%b9%e7%9b%ae%e6%93%8d%e4%bd%9c%e6%8c%87%e5%8d%97\/","title":{"rendered":"React\u65b0\u9879\u76ee\u64cd\u4f5c\u6307\u5357"},"content":{"rendered":"\n<p>import Harold.\u6f82\u51b0<\/p>\n\n\n\n<p>@Copyright(\"Harold Chengbing\")<\/p>\n\n\n\n<p>\u65b0\u5efa\u6587\u4ef6\u5939\uff0c\u7136\u540e\u4f7f\u7528<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app appName<\/code><\/pre>\n\n\n\n<p>use react icons:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i react-icons<\/code><\/pre>\n\n\n\n<p>use react router:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i react-router-dom<\/code><\/pre>\n\n\n\n<p>\u542f\u52a8NPM Server:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm start<\/code><\/pre>\n\n\n\n<p>build the project:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build<\/code><\/pre>\n\n\n\n<p>serve the build folder at port 8000:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>serve -s build -p 8000<\/code><\/pre>\n\n\n\n<p>use sudo backend:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i json-server<\/code><\/pre>\n\n\n\n<p>\u542f\u52a8:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run server<\/code><\/pre>\n\n\n\n<p>VS Code: ES7 React<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>rafce<\/code><\/pre>\n\n\n\n<p>\u5b89\u88c5axios:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install axios<\/code><\/pre>\n\n\n\n<p>\u5b89\u88c5qs\u6765\u5b9e\u73b0\u5bf9\u8c61\u5c01\u88c5\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i qs<\/code><\/pre>\n\n\n\n<p>axios\u4f7f\u7528\u4f8b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>useEffect(() =&gt; {\n        const getRegion = async () =&gt; {\n            const res = \n            await axios.get(`http:\/\/localhost:8082\/region\/queryAllRegion`, {\n                params:{\n                    page: page,\n                    rowsPerPage: rowsPerPage\n            }\n         });\n         setRow(res.data.t);\n         setTotalPage(res.data.info);\n        };\n    \n        getRegion()\n      }, &#91;page, rowsPerPage])<\/code><\/pre>\n\n\n\n<p>axios post\u6dfb\u52a0\u4f7f\u7528\u4f8b<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const addNewCountryFunction = (e) =&gt; {\n        e.preventDefault();\n        if(!addCountryName || !addCountryShortname) {\n            alert('Please add all fields!')\n            return\n        }\n        axios.post(`http:\/\/localhost:8082\/region\/addNewRegion`, qs.stringify({\n                regionName: addCountryName,\n                regionShortname: addCountryShortname\n            })).then(function (response) { \n                if(response.data === 1)\n                {\n                    setSuccessInsert(true);\n                    setTimeout( () =&gt; {setSuccessInsert(false)}, 5000);\n                    setAddOpen(false);\n                }\n            });\n\n        \n         \n        setAddCountryName('')\n        setAddCountryShortname('')\n    }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>import Harold.\u6f82\u51b0 @Copyright(&#8220;Harold Chengbing&#8221;) \u65b0\u5efa\u6587\u4ef6\u5939\uff0c\u7136\u540e\u4f7f\u7528 use re","protected":false},"author":1,"featured_media":1806,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28],"tags":[],"_links":{"self":[{"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/posts\/1678"}],"collection":[{"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/comments?post=1678"}],"version-history":[{"count":6,"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/posts\/1678\/revisions"}],"predecessor-version":[{"id":1808,"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/posts\/1678\/revisions\/1808"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/media\/1806"}],"wp:attachment":[{"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/media?parent=1678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/categories?post=1678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheng-bing.top\/index.php\/wp-json\/wp\/v2\/tags?post=1678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}