React学习笔记----如何在html页面中使用react

React学习笔记----如何在html页面中使用react

一、ReactJS简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

ReactJS官网地址：http://facebook.github.io/react/

Github地址：https://github.com/facebook/react

二、对ReactJS的认识及ReactJS的优点

首先，对于React，有一些认识误区，这里先总结一下：

• React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；

• React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；

• 有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；

• React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。

三、构建一个最简单的react页面

为了快速的说明效果，我们先使用其他人的服务器(cdn服务器)进行创建一个页面，如下面代码所示：

我们通过下面三段代码进行了对react的引用

也就是说，这样我们就可以直接使用了，效果如下面所示：

上面就是使用了远端服务器提供的js库，那么如何使用我们自己下载到本地的JS库，下面就进行介绍：

需要进行的工作有下面步骤：

   1、安装nodejs,对于nodejs的安装，请参考如下链接：nodejs的安装

   2、全局安装bower：npm install -g bower

   3、使用bower安装react:bower install react,安装过程如下图所示：

  4、使用bower安装能够将JSX 语法转为 JavaScript 语法的工具babel：bower install   babel

  5、然后开始进行页面的编写：如下所示：

其点击后的效果如下图所示：

以上就是在页面中使用react的方法