React项目的构建

骑猪看日落 2022-05-18 10:36 205阅读 0赞

###### *最近更新时间：2018年8月2日16:19:24* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

#### 项目背景 ####

> 作为一名初学者，学习完了react的语法和开发规范，但在[GitHub][]上很难找到一个练手或者学习的项目，几经周折，下定决心，在参考已有开源项目的基础上，自己造轮子。真正的好项目，源于生活，又高于生活，于是自己动手做H5版微信。

#### 构建项目 ####

> 构建项目分为两种方案：脚手架 & 自己手工搭建

*  脚手架

> react 脚手架“品牌”一览表，按star降序排列：2018年8月4日00:03:35 更新

<table> 
 <thead> 
  <tr> 
   <th>name</th> 
   <th>watch</th> 
   <th>star</th> 
   <th>fork</th> 
   <th>about</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://github.com/facebookincubator/create-react-app" rel="nofollow">create-react-app</a></td> 
   <td>1591</td> 
   <td>53217</td> 
   <td>11424</td> 
   <td>facebook</td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/react-boilerplate/react-boilerplate" rel="nofollow">react-boilerplate</a></td> 
   <td>511</td> 
   <td>19278</td> 
   <td>3537</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/davezuko/react-redux-starter-kit" rel="nofollow">react-redux-starter-kit</a></td> 
   <td>335</td> 
   <td>10324</td> 
   <td>2398</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

*  手工搭建

[从零开始搭建一个react项目][react]

#### 用create-react-app脚手架构建项目 ####

npm install create-react-app -g //全局搭建一个全局的脚手架
    create-react-app react-practice-wechat //创建名称为 react-practice-wechat 的项目
    /* 执行完这个命令后会看到如下信息： Success! Created react-practice-wechat at C:\Users\Administrator\Desktop\react-p ractice-wechat Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd react-practice-wechat npm start Happy hacking! */
    cd my-demo //进入目录
    npm start //启动项目

> 扩展知识：  
> npm 全局安装路径 npm config get prefix  
> npm查看全局和当前目录的包 npm list & npm list -g

`问题扩展：自己如何做一个 create-react-app 脚手架，在cmd窗口有同样提示语`

> 参考来源：  
> [create-react-app README.md][]  
> [开发 react 应用最好用的脚手架 create-react-app][react _ create-react-app]  
> [react-lesson][]  
> [React工程实践][React]

#### 项目配置 ####

<table> 
 <thead> 
  <tr> 
   <th>type</th> 
   <th>version</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>开发环境</td> 
   <td>win7</td> 
  </tr> 
  <tr> 
   <td>node</td> 
   <td>v6.11.2</td> 
  </tr> 
  <tr> 
   <td>npm</td> 
   <td>3.10.10</td> 
  </tr> 
  <tr> 
   <td>脚手架自带的包</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>react</td> 
   <td>16.4.2</td> 
  </tr> 
  <tr> 
   <td>react-dom</td> 
   <td>16.4.2</td> 
  </tr> 
  <tr> 
   <td>react-scripts</td> 
   <td>1.1.4</td> 
  </tr> 
  <tr> 
   <td>手动安装的包</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>react-router</td> 
   <td>4.3.1</td> 
  </tr> 
  <tr> 
   <td>redux</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>react-redux</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### 路由 ####

> react-router@4.3.1

[react-router @4用法整理][react-router _4]  
[react-router@4官方文档 ][react-router_4_]  
[ReactTraining/react-router][ReactTraining_react-router]

#### 项目相关 ####

*  参考的开源项目  
    参考

# icon #

[iconfont][]

> foot 32px \#8a8a8a \#68c864

#### 手机机型兼容性 ####

> iPhone 8 Plus

[阮一峰][Link 1]

[React 技术栈系列教程][React 1]

#### NPM脚本 ####

*  在构建项目时，npm 工具允许在package.json文件里面，使用scripts字段定义脚本命令。
 *  npm run;查看当前项目的所有 npm 脚本命令
 *  npm run page1.js & npm run page2.js;同时执行两个脚本
 *  npm run page1.js && npm run page2.js;第一个脚本执行成功，继续执行第二个脚本
 *  通常情况，npm脚本由开发者提供，但npm对两个脚本提供了默认值

> npm run start 的默认值是node server.js，前提是项目根目录下有server.js这个脚本；  
> npm run install 的默认值是node-gyp rebuild，前提是项目根目录下有binding.gyp文件。

###### 四个常用的 npm 脚本有简写形式 ######

*  npm start是npm run start
 *  npm stop是npm run stop的简写
 *  npm test是npm run test的简写
 *  npm restart是npm run stop && npm run restart && npm run start的简写

[参考][Link 2]  
[package.json-阮一峰][package.json-]  
[package.json npm官方][package.json npm]

#### start point ####

[从零开始搭建一个react项目][react]  
[react-router @4用法整理][react-router _4]  
[React-router4简约教程][React-router4]  
[https://www.npmjs.com/package/react-router][https_www.npmjs.com_package_react-router]  
[https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html][https_react-guide.github.io_react-router-cn_docs_guides_basics_RouteConfiguration.html]  
[使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态][react-router-dom_]  
[react + redux 完整的项目，同时写一下个人感悟][react _ redux]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[GitHub]: https://github.com/search?q=react
[react]: https://www.jianshu.com/p/324fd1c124ad
[create-react-app README.md]: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md
[react _ create-react-app]: https://blog.csdn.net/qtfying/article/details/78665664
[react-lesson]: https://github.com/ZengTianShengZ/react-lesson/blob/master/lesson-4/README.md
[React]: https://segmentfault.com/a/1190000010435547
[react-router _4]: https://segmentfault.com/a/1190000012258651
[react-router_4_]: https://reacttraining.com/react-router/web/example/basic
[ReactTraining_react-router]: https://github.com/ReactTraining/react-router
[iconfont]: http://www.iconfont.cn/search?q=%E5%BE%AE%E4%BF%A1
[Link 1]: http://www.ruanyifeng.com/blog/archives.html
[React 1]: http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
[Link 2]: http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
[package.json-]: http://javascript.ruanyifeng.com/nodejs/packagejson.html#toc2
[package.json npm]: https://docs.npmjs.com/files/package.json
[React-router4]: http://react-china.org/t/react-router4/15843
[https_www.npmjs.com_package_react-router]: https://www.npmjs.com/package/react-router
[https_react-guide.github.io_react-router-cn_docs_guides_basics_RouteConfiguration.html]: https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html
[react-router-dom_]: https://blog.csdn.net/cen_cs/article/details/77977385
[react _ redux]: https://segmentfault.com/a/1190000007642740
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460