[TOC] ## React概述 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 ## React 特点 * **1.声明式设计**−React采用声明范式，可以轻松描述应用。 * **2.高效**−React通过对DOM的模拟，最大限度地减少与DOM的交互。 * **3.灵活**−React可以与已知的库或框架很好地配合。 * **4.JSX**− JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 * **5.组件**− 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 * **6.单向响应的数据流**− React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。 ## 使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。 create-react-app 自动创建的项目是基于 Webpack + ES6 。 执行以下命令创建项目： ``` $ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start ``` ## 使用http-server启动本地服务 参考链接：[https://www.jianshu.com/p/54b0901cb9cd](https://www.jianshu.com/p/54b0901cb9cd) 安装http-server ``` npm i -g http-server ``` 启动http服务 ``` http-server -p 3000 ``` ## Server-X 参考链接：[https://juejin.im/post/5dad208ef265da5b7d692340](https://juejin.im/post/5dad208ef265da5b7d692340) ### 创建项目及启动 ``` npm init react-app svrx-example cd svrx-example ``` 不过由于新工程并没有暴露出 `webpack` 配置项，所以我们需要先在根目录创建一个 `webpack.config.js`： ``` // webpack.config.js module.exports = require('react-scripts/config/webpack.config')('development'); ``` 然后我们就可以顺利启动项目了： ``` svrx --webpack ``` ### 配置项 svrx 会在启动时自动开启一些内置的基础插件， 如静态伺服（serve）、转发服务（proxy）、页面自动刷新（livereload）： ``` svrx --port 3000 --https --no-livereload ``` 也可以在你的工程目录下建立`.svrxrc.js`或`svrx.config.js`文件，将上面的命令行参数持久化下来： ``` // .svrxrc.js module.exports = { port: 3000, https: true, livereload: false }; ``` svrx 的全部配置项及描述可以在[官方文档-内置项](https://docs.svrx.io/zh/guide/option.html)中查看。 ### localtunnel插件的使用 svrx 的[localtunnel](https://github.com/localtunnel/localtunnel)插件了！ 它可以将你的本地服务暴露到`localtunnel.me`，从而方便地进行本地代码的测试和分享。 你再也无需为了测试你的一点代码变动就专门部署一次测试服务了。 启动`localtunnel`只需在之前的启动命令后添加声明即可： ``` svrx --webpack --localtunnel ``` 上面的命令将会自动安装 localtunnel 插件并启动 svrx， 其他人（是的，你们甚至不需要在同一个内网）此时访问终端打印的 https://\*.localtunnel.me 也将看到你的本地服务