{"id":27,"date":"2024-08-13T08:59:35","date_gmt":"2024-08-13T08:59:35","guid":{"rendered":"https:\/\/www.yehger.com\/?p=27"},"modified":"2024-08-15T13:51:49","modified_gmt":"2024-08-15T13:51:49","slug":"how-to-build-a-base-react-h5-project","status":"publish","type":"post","link":"https:\/\/www.yehger.com\/index.php\/2024\/08\/13\/how-to-build-a-base-react-h5-project\/","title":{"rendered":"How to build a base React H5 project."},"content":{"rendered":"<h2>1. Initialization &amp; Install Dependencies<\/h2>\n<p><strong>Initial the project<\/strong><\/p>\n<pre><code class=\"language-c\">> npm init<\/code><\/pre>\n<p><strong>Install base dependencies<\/strong><\/p>\n<pre><code class=\"language-c\">> npm i webpack webpack-cli webpack-dev-server html-webpack-plugin mini-css-extract-plugin css-loader style-loader<\/code><\/pre>\n<p><strong>Install React<\/strong><\/p>\n<pre><code class=\"language-c\">> npm i react react-dom babel-loader @babel\/core @babel\/preset-env @babel\/preset-react<\/code><\/pre>\n<p><strong>Install Common Modules<\/strong><\/p>\n<pre><code class=\"language-c\">> npm i axios good-storage less less-loader postcss postcss-loader postcss-pxtorem styled-components valtio<\/code><\/pre>\n<h2>Preview Base Folder<\/h2>\n<p><strong>You can going to this link below here to check details of every file.<\/strong><br \/>\n\u2193\u2193\u2193\u2193\u2193\u2193\u2193\u2193\u2193\u2193<\/p>\n<h3><strong><a href=\"https:\/\/github.com\/Sugarmant\/React_Base_Template\">Click Here- &gt; \u300aReact_Base_Template\u300b<\/a><\/strong><\/h3>\n<p>\u2191\u2191\u2191\u2191\u2191\u2191\u2191\u2191\u2191\u2191\u2191<\/p>\n<pre><code class=\"language-treeview\">React_Base_Template\/\n|-- build\/\n|   |-- webpack.dev.config.js\n|   `-- webpack.prod.config.js\n|-- public\/\n|   `-- index.html\n|-- src\/\n|   |-- api\/\n|   |   |-- index.js\n|   |   `-- request.js\n|   |-- assets\/\n|   |   |-- default_avatar.png\n|   |   `-- empty_bg.png\n|   |-- components\/\n|   |   `-- Dialog\/\n|   |       `-- index.jsx\n|   |-- router\/\n|   |   `-- index.jsx\n|   |-- store\/\n|   |   |-- index.js\n|   |   `-- user.js\n|   |-- utils\/\n|   |   |-- formater.js\n|   |   |-- index.js\n|   |   `-- styled-px2rem.js\n|   |-- views\/\n|   |   |-- Home\/\n|   |   |   `-- index.jsx\n|   |   `-- Test\/\n|   |       `-- index.jsx\n|   |-- cssreset.css\n|   `-- main.jsx\n|-- jsconfig.json\n|-- package.json\n|-- package-lock.json\n|-- postcss.config.js\n`-- README.md<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1. Initialization &amp; Install Dependencies Initial the project > npm init Install base dependencies > npm i webpack webpack-cli webpack-dev-server&#8230; <a class=\"read-more\" href=\"https:\/\/www.yehger.com\/index.php\/2024\/08\/13\/how-to-build-a-base-react-h5-project\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-react-study"],"_links":{"self":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":38,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":82,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/27\/revisions\/82"}],"wp:attachment":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}