下载.jpg
由于个人原因,在这个暑假想接触第一门JS框架,选择React框架,这个框架起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

关于书写最基本的语法有几个注意的点
1.安装react尽量使用bower安装,并且要有git环境,安装成功后引入JS文件即可
2.可以不用命令行安装,也可以直接连接在线引用地址
在这里,我提供jQuery和react的引用库,国内访问速度较快的。
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js";></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js";></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js";></script>

3.准备成功以后我们开始code了!
首先我们准备一个div容器
<div id="main"></div>
4.其次我们开始JS
react是采用组件化的方式的,这极大的方便了后续开发者的优化等等,也避免了同样的东西二次重写代码
var Box=React.createClass({

    render:function () {
        var style={
            height:'100px',
            color:'red'
        }
        return <p style={style}>hello world</p>
    }
});

ps:我们这边定义了一个Box变量,然后调用createClass方法定义一个组件,在组件的render函数中,我们定义了一个
样式,并且返回了一个p标签,这里需要注意的就是我们不要在JS代码前面写text/javascipt,而要写<script type="text/jsx">
如若不然只能报错,jsx格式是js and xml 格式一起的,是react框架中存在的,所以在写js代码前要定义正确
5.渲染到页面
React.render(<Box/>,

    document.getElementById("main"),
    function () {
        console.log("渲染完毕")
    }
)

ps:我们这边调用了render函数渲染,render函数中有三个参数,2个必选一个可选,2个必选分别是选择组件,我们定义的组件是变量Box,在
创建组件的时候变量一定要首字母大写,否则浏览器会把其当成标签处理从而报错或者不显示,所以一定要首字母大写,第二个参数是选择渲染的
容器位置,我们在html中定义了一个容器,可以简单快捷的使用jquery来获取对象,最后一个可选参数是页面渲染后执行的函数,代码中表达
的是渲染完成后再控制台打印一句话,事实证明打印成功了,所以react的第一节课今天还是有所收获的。

标签: none

仅有一条评论

  1. 由于新站未安装高亮插件,明天会更正代码不高亮问题

添加新评论