01react 之 hello world
Posted yezixuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了01react 之 hello world相关的知识，希望对你有一定的参考价值。
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 javascript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
官网：http://facebook.github.io/react/
1、环境搭建
》》》普通的用法：需要三个文件。react.js核心文件、react-dom就是适应amd 、cmd 等进行的封装、bebel就是es6和jsx转译。上线之后就不用了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/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="example"></div> <script type="text/babel"> 代码。。。。</script> </body> </html>
》》》CommonJS 模式 browserify or webpack
// main.js var React = require(‘react‘); var ReactDOM = require(‘react-dom‘); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘) );
2、hello ， world 例子
重点语法：先创建一个组件 var Hello = React.createClass({}); 组件内定义render 并返回 ，使用组件渲染：ReactDOM.render(,)两个参数，一个是要渲染的组件。
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
render:function(){
return <h1>hello word</h1>
}
})
ReactDOM.render(
<Hello />,
document.getElementById(‘example‘)
);
</script>
3、jsx 组件 单项数据绑定 虚拟DOM
》》》jsx ： HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
》》》组件 ： React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。组件类的第一个字母必须大写，否则会报错。
》》》虚拟DOM ：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。
》》》单项数据绑定：不同于mvc，类似于php和html混写的写法
以上是关于01react 之 hello world的主要内容，如果未能解决你的问题，请参考以下文章