reactjs入门到实战（一）---- 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混写的写法
reactjs入门到实战（一）---- hello world例子的更多相关文章
- reactjs入门到实战（五）---- props详解
1>>>基础的props使用 不可修改父属性 getDefaultProps 对于外界/父组件的属性值,无法直接修改,它是只读的. <script type= ...
- reactjs入门到实战（三）---- 组件详解
owner >>> 传递 props this >>>是默认指向组件本身 key>>>不能没有,在复用的情况下 组件:例子 <!-- 输入 ...
- reactjs入门到实战（二）---- jxs详解
>>>如何转换 JSX transformer Babel 官网:http://babeljs.io/ 里面有一个可以看转换的测试器,es6什么的也可以应用: 注 ...
- reactjs入门到实战（十）----one-first_app
index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- ...
- reactjs入门到实战（七）---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- reactjs入门到实战（九）----ajax的应用
利用外部的jquery: <script type="text/babel"> } }, componentDidMount:function(){ ]['value' ...
- reactjs入门到实战（八）----表单组件的使用
表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...
- reactjs入门到实战（六）---- ReactJS组件API详解
全局的api 1.React.createClass 创建一个组件类,并作出定义.组件实现了 render() 方法,该方法返回一个子级.该子级可能包含很深的子级结构.组件与标准原型类的不同之处在于, ...
- reactjs入门到实战（四）---- state详解
this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性. 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开 ...
随机推荐
- spring day01-go1
1.复制xml到container/ioc下2.B类实现序列化接口,构造函数和f1函数A类实现序列化接口,将B类作为其成员变量,且get/set方法,执行execute方法去调用b.f1()3.修改x ...
- paper 78：sniff抓包程序片段
#define INTERFACE "eth0"#define MAX_SIZE 65535 int init_raw_socket();int open_promisc(char ...
- webpack 无法安装
命令行输入: npm install webpack -g 解决办法:增加环境变量 D:\nine\trunk\node_modules\.bin\ bin目录下有webpack.cmd 如果还是 ...
- visio的简单用法
visio图边缘会自动扩展 将常用工具放到收藏夹中,拖进去就可以用. 基本形状基本能够满足一般的需求. 支持自己定义形状,将定义好的形状右击组合之后,收藏到收藏夹或导出模版. 多用组合,收藏夹,调整图 ...
- 夺命雷公狗—angularjs—23—copy拷贝对象
copy这在angularjs中是一个拷贝对象的方法: <!DOCTYPE html> <html lang="en" ng-app="myapp&qu ...
- 夺命雷公狗—angularjs—20—$watch监听的用法
- android初体验——HelloWord
一．新建项目: 打开 eclipse ,选择File – New – Android Application Project 输入项目名称,程序名称,包名. 包名不能重复,它是项目的唯一标示,我理解为 ...
- 【linux】暂时解决sis m672(神舟F4000 D9) linux驱动 宽屏分辨率的问题?
1. 首先安装包 sudo apt-get install gcc make binutils git xorg-dev mesa-common-dev libdrm-dev libtool buil ...
- NOIP201401珠心算测验
珠心算测验 问题描述] 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及. 某学校的珠心算老师采用 ...
- Oracle DB SQL 性能分析器
• 确定使用SQL 性能分析器的优点 • 描述SQL 性能分析器工作流阶段 • 使用SQL 性能分析器确定数据库更改所带来的性能改进 SQL 性能分析器:概览 • 11g 的新增功能 • 目标用户:D ...