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

最新推荐文章于 2024-08-09 07:41:15 发布

suwu150

最新推荐文章于 2024-08-09 07:41:15 发布

阅读量2.2w

点赞数 4

分类专栏： React JavaScript 文章标签： React html javascript es6

本文链接：https://blog.csdn.net/suwu150/article/details/72800534

版权

JavaScript 同时被 2 个专栏收录

56 篇文章 4 订阅

订阅专栏

React

14 篇文章 6 订阅

订阅专栏

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>

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