暂时放弃angularjs 学习React

时间：2016-07-14 02:18:41 阅读：311 评论：0 收藏：0 [点我收藏+]

标签：

视频学习地址：

http://www.jtthink.com/course/play/575

官方地址

https://facebook.github.io/react/

cdn路径

<!DOCTYPE html>
<html>
<meta charset=‘utf-8‘>
<head>
    <title></title>
    <script src="http://cdn.bootcss.com/react/15.0.0/react.min.js"></script>
    <script src="http://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>

</body>
</html>

demo 1

  <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById(‘example‘)
      );
    </script>

demo 2 循环

<div id=‘navbar‘></div> 
</body>
<script type="text/babel">
var nav_li=[
<li><a href=‘#‘>最新电影</a></li>,
<li><a href=‘#‘>最新评论</a></li>
    ];
ReactDOM.render(
         <ul>{nav_li}</ul>,
         document.getElementById(‘navbar‘)
)    
</script>
</html>



<script type="text/babel">
var nav_li=[‘最新电影‘, ‘最新评论‘]; 
ReactDOM.render(
         <ul>
         {
             nav_li.map(function(item){
                 return <li><a href=‘#‘>{item}</a></li>;
             })
         }
         </ul>,
         document.getElementById(‘navbar‘)
)    
</script>

绑定事件{匿名函数、函数表达式}

<script type="text/babel">
var aa = function()
{
alert("123");
}

var nav_li=[‘最新电影‘, ‘最新评论‘]; 
ReactDOM.render(
         <ul>
         {
             nav_li.map(function(item){
                 return <li><a href=‘#‘ onClick={function(){alert(‘123‘)}}>{item}</a></li>;
　　　　　　　　　　return <li><a href=‘#‘ onClick={aa}>{item}</a></li>;
             })
         }
         </ul>,
         document.getElementById(‘navbar‘)
)    
</script>

但在正式环境中，是不使用这种方式编译的，而是使用nodejs + babel + plugin 来编译react

安装nodejs ：http://nodejs.cn/
利用npm 安装 babel ：npm install babel-cli -g
安装react专用插件：npm install babel-plugin-transform-react-jsx
使用插件编译：babel --plugins transform-react-jsx src/myReact.js  --out-file build/myReact.js

配合编译的html：

<!DOCTYPE html>
<html>
<meta charset=‘utf-8‘>
<head>
    <title></title>
    <script src="http://cdn.bootcss.com/react/15.0.0/react.min.js"></script>
    <script src="http://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
    
</head>
<body>
 <div id=‘navbar‘></div> 
 <script type="text/javascript" src="build/myReact.js"></script>
</body>

</html>

src/myReact.js:

var aa = function()
{
    alert("123");
}

var nav_li=[‘最新电影‘, ‘最新评论‘]; 
ReactDOM.render(
         <ul>
         {
             nav_li.map(function(item){
                 return <li><a href=‘#‘ onClick={aa}>{item}</a></li>;
             })
         }
         </ul>,
         document.getElementById(‘navbar‘)
)

编写组件和内部事件、防止函数重命名，记得利用nodejs + babel + plugin插件编译一下

var NavLI = React.createClass({
    myFunc : function(){alert("123")},
    render : function()
    {
        return  <ul>
                    <li><a href=‘#‘ onClick={this.myFunc}>最新电影</a></li>
                    <li><a href=‘#‘>最新评论</a></li>
                </ul>
    }
})

ReactDOM.render(
         <NavLI />,
         document.getElementById(‘navbar‘)
)

嵌套组件和属性

var NavLI = React.createClass({
    myFunc : function(){alert("123")},
    render : function()
    {
        return  <ul>
                    <li><a href=‘#‘ onClick={this.myFunc}>最新电影</a></li>
                    <li><a href=‘#‘>最新评论</a></li>
                    <li><SearchText abc = "Search" /></li>
                </ul>
    }
})

var SearchText = React.createClass({
    render:function()
    {
        return <input type="text" placeholder = "请输入文字" className = {this.props.abc} />
    }
})


ReactDOM.render(
         <NavLI />,
         document.getElementById(‘navbar‘)
)

暂时放弃angularjs 学习React

标签：

原文地址：http://www.cnblogs.com/CyLee/p/5668373.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行