首页 > 代码库 > react1
react1
<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="http://www.mamicode.com/src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="http://www.mamicode.com/src/libs/JSXTransformer.js"></script>
<script src="http://www.mamicode.com/src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
function dateToString(date){
return [
date.getFullYear(),
date.getMonth()+1,
date.getDate()
].join(‘-‘)
};
React.render(
<h2 className="text-c1" style={{color:‘red‘,marginTop:‘20px‘}}>{dateToString(new Date())}</h2>,
document.getElementById("example")
);
</script>
</body>
总结
React 的核心思想是：封装组件，各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。
JSX 并不是一门全新的语言，仅仅是一个语法糖，允许开发者在JavasSript中编写XML语言。
作为React的核心部分，JSX使用XML标记的方式直接声明页面。在JavaScript代码里直接写XML的语法，每一个XML标签都会被JSX转换工具转换成纯JavaScript代码。(学习React的第一个坑)
注意：使用JSX写的代码，需要编译输出成JS代码才能使用。将 JSX 语法转为 JavaScript 语法，这一步很消耗时间。现在前端项目，都会使用前端工程化，不会直接在html页面中直接写js代码，写好的js代码都会使用工具进行编译压缩等。这样的话，我们的JSX也会通过编译直接转化成js语法，让浏览器直接使用。
好消息是你不用使用这个JSX也可以直接创建组件，但是坏消息是，不用JSX你必须使用原声JavaScript通过大段的API来创建。
如此使用JSX
JSX定义属性&&样式使用
在HTML中，可以通过标签上的属性来改变当前元素的样式，当然，这在JSX中也是可以的，只不过JSX在使用行内样式的时候是有缺陷的。使用{{}}而不是引号的方式。
直接在标签上使用style属性时，要写成style={{}}是两个大括号，外层大括号是告知JSX这里是js语法，和真实DOM不同的是，属性值不能是字符串而必须为对象，需要注意的是属性名同样需要驼峰命名法。即margin-top要写成marginTop，属性之间以逗号间隔。
使用变量：
JSX将两个花括号中的内容{...}渲染成动态值，花括号指明了一个JavaScript上下文环境————你在花括号中放置的任何内容都会被求值。
1.最后一个script标签的type属性为text/jsx。这是因为React独有的JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上type=”text/jsx”。
2.React提供两个库：react.js和JSXTransformer.js，它们必须首先加载，其中JSXTransformer.js的作用是将JSX语法转为JavaScript语法。这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
React.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。
react1