您的位置：首页 > Web前端 > React

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

2017-05-29 12:01 453 查看
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服务器)进行创建一个页面，如下面代码所示：

<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var MessageBox = React.createClass({
alertMe: function(){
alert('你刚才点了我一下。。。。');
},
render:function(){
return ( <h1 onClick={this.alertMe}>你好世界！！！</h1> )
}
});

React.render( <MessageBox/>,
document.getElementById('app'),
function(){
console.log('渲染完成啦！！');
}
)
</script>
<div id="app"></div>

</body>
</html>
我们通过下面三段代码进行了对react的引用

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>


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



上面就是使用了远端服务器提供的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、然后开始进行页面的编写：如下所示：

<html>
<head>
<meta charset="utf-8">
<title>学习React！！</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<!--  注意下面注释掉的的方式是旧版本所使用的编译转换方式，没有注释的是现在使用的-->
<script src="bower_components/babel/browser.js"></script>
<!--<script src="bower_components/react/JSXTransformer.js"></script>-->
<!--<script type="text/jsx">-->
<script type="text/babel">
/*		var MessageBox = React.createClass({
alertMe: function(){
alert('你刚才点了我一下。。。。');
},
render:function(){
return ( <h1 onClick={this.alertMe}>你好世界！！！</h1> )
}
});
React.render( <MessageBox/>,document.getElementById('app'),	function(){
console.log('渲染完成啦！！');
}
)*/
class MessageBox extends React.Component {
alertMe() {
alert('你刚才点了我一下。。。。');
}
render() {
return ( <h1 onClick={this.alertMe}>你好世界！！！</h1> )
}
}
ReactDOM.render( <MessageBox/>,document.getElementById('app'),	function(){
console.log('渲染完成啦！！');
});
</script>
</body>
</html>
其点击后的效果如下图所示：



以上就是在页面中使用react的方法
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航