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

React 入门实例教程

2016-12-22 22:06 267 查看
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript
MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的
Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。

下面用到是demo可以从这下载：https://github.com/ruanyf/react-demos/archive/master.zip
一、HTML模板

使用
React 的网页源码，结构大致如下。
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>



上面代码有两个地方需要注意。首先，最后一个 
<script>
 标签的 
type
 属性为 
text/babel
 。这是因为
React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 
type="text/babel"
 。

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

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
运行结果：



三、JSX语法

上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是JSX
的语法，它允许 HTML 与 JavaScript 的混写

下面内容参考网址：http://www.ruanyifeng.com/blog/2015/03/react.html


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航