React初学体验

发布时间：2020-12-15 07:33:33 所属栏目：百科来源：网络整理

导读：学习主要参考的资料阮一峰 http://www.jb51.cc/article/p-rkowmlmt-bnx.html 视频：React中文站中的视频连接 http://react-china.org/t/reactjs/584 具体的视频的地址为： http://www.tudou.com/plcover/ah20h1-t4V4/?spm=a2h1s.8267934.videoKw.A start

学习主要参考的资料

阮一峰 http://www.52php.cn/article/p-rkowmlmt-bnx.html
视频：React中文站中的视频连接 http://react-china.org/t/reactjs/584
具体的视频的地址为：
http://www.tudou.com/plcover/ah20h1-t4V4/?spm=a2h1s.8267934.videoKw.A

start

使用bower 下载react，首先下载bower，然后下载React

bower install React

React JSX 解析

JSX 语法转为 JavaScript 语法，使用babel

JSX 详细的讲解菜鸟教程中写的还是比较的详细 http://www.runoob.com/react/react-jsx.html

bower install babel

目录的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
    <title>Title</title>
</head>
<body>

react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

第一个简单的React

将H1标签中的内容插入到id 为 test1的目录中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
    <title>Title</title>
</head>
<body>
<div id="test1">
</div>
<script type="text/babel"> ReactDOM.render(<h1>test</h1>,document.getElementById("test1")); </script>
</body>
</html>

简单定义一个组件

将定义的MessageBox这个组件渲染到id为test2的标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
    <title>Title</title>
</head>
<body>
<div id="test2">
</div>

<script type="text/babel"> var MessageBox= React.createClass({ render:function () { return (<h2>wangwang</h2>); } }) ReactDOM.render(<MessageBox/>,document.getElementById("test2")); </script>
</body>
</html>

给组件增加一个点击事件，是不是感觉很简单的

<script type="text/babel"> var MessageBox= React.createClass({ clikme:function () { alert("click me") },render:function () { return (<h2 onClick={this.clikme}>wangwang</h2>); } }) ReactDOM.render(<MessageBox/>,document.getElementById("test2")); </script>

嵌套定义组件

使用两个定义好的组件进行使用哦~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
    <title>Title</title>
</head>
<body>
<div id="test2">
</div>
<script type="text/babel"> var MessageBox = React.createClass({ render:function () { return ( <div> <h1>hello word</h1> <MessageBox2/> </div> ); } }); var MessageBox2= React.createClass({ render:function () { return (<h2>wangwang</h2>); } }) ReactDOM.render(<MessageBox/>,document.getElementById("test2")); </script>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!