react 单页面 nginx_React最快速上手教程

不使用webpack或其他任何编译打包工具，但使用React的JSX混合语法，直接在浏览器中运行React的元件component，十分钟最快速上手。

image

为什么用React？

• 数据绑定假定我们需要在网页上呈现一个按钮和一个数字，每点击一次按钮，数字就会增加1，类似于购物车里面商品数量增加的情况。这个要怎么实现？传统的办法是给按钮添加一个onClick事件函数，函数里面获取数字元素的html内容，增加1，然后再修改数字元素的html内容。但现代化的网页开发就很不同，它会用数据把界面元素分隔开，即按钮修改数据，然后所有绑定到这个数据的文字都会自动同步，不需要去获取页面元素也不需要去修改页面元素。界面A->修改->数据->自动同步->界面B。数据模型Model、界面View、以及事件控制器Controller，就形成了MVC的结构模式。
• 模块复用。每个网站都有很多页面，大部分页面都有着同样的顶部导航栏。把导航栏代码复制到多个页面并不麻烦，但麻烦的是每次修改都要重新复制整理一遍。有没有办法能够重复使用一个导航栏元件，每个页面只要引入这个元件就可以？解决各个模块的复用与整合问题，是现代化网页开发技术的初衷。在以往，我们可以依赖JQuery的ajax读取外部文件(比如顶部导航栏)，然后把这个内容再填充到网页中合适的位置。这样做不仅代码麻烦，而且功能有限，更无法实现各个元件之间的结构嵌套和数据交互。现代化网页开发技术依赖于component元件技术，让我们可以自己定制任何新的标签，比如顶部导航栏可以是一个...，它自身就是一个MVC结构，能够独立实现各种功能，也可以和父层、子层元素嵌套或者传递数据和功能。
• 单页面应用既然我们可以利用component元素把页面各个模块划分成独立的部分，那么我们是否可以放弃页面的概念，而直接使用模块module来拼接各种功能呢？当然是可以的，当我们迁移到模块式组装开发之后，由于各个模块实际上都运行在同一个页面内，互相交换和数据传递就变得自然而且直接，——不再受到页面切换只能依赖地址栏、Cookies或本地存储才能实现交互和数据传递。单页面应用的优势是明显的，但缺点也很明显，那就是如果项目模块分隔的不好，或者项目文件组织管理混乱，那就很容易造成各个模块之间关系错综复杂，无法梳理。另外，缺乏了页面地址栏的变化，也需要重建新的路由模式，这也是个不小的挑战，比较原本基于页面地址栏跳转返回和历史记录的模式是如此成熟好用。其实传统的页面也是一种模块划分的方法，它强制把不同的功能放入相互隔离的各个页面，以此来避免各种功能互相交织导致的项目复杂化。SPA即Single-Page-Application，单页面应用。只是一种建议，并不是现代化网页开发的目标。
• 完全JS开发现代化网页开发越来越倾向于完全依赖JS进行网页编写，即弱化或替代Html代码，VueJS和ReactJS都在这么做。对于

  Hello！

  这样的html元素，完全等同于js中的对象数据{tagname:'h1',content:'Hello!',id:'a',class:'b'}，也就是说我们可以用js把后者完美的翻译成前者，然后插入到页面html中去。当然，如果我们能够在JS中直接使用html标签的话，那就太好了，可以同时享受JS模块化开发和熟悉的html传统语法。React很早就这么做了，那就是它的JSX语法。但JSX语法显然不是浏览器支持的原生格式，所以需要使用Babel工具进行转换。

综上所述，所谓的现代化网页开发的变革，更像是朝着面向对象编程模式的进化，对象也好，模块也好，其实是一种应对复杂情况的功能组织管理模式，要应对更庞大更复杂的网站项目，就必须使用现代化的网页开发模式。

目前行业最主流的现代化网站开发框架就是VueJS、ReactJS和AngularJS。虽然VueJS最简单好用，但我还是选择了React，因为它更松散自由，可玩性更强，还有它那太好用的JSX语法！

基础模板

先看一下index.html的代码：