初识React之组件

移动端跨平台开发，从零开始学习React Native。

第一个demo：打印Hello React

一、 知识点

1. 需要将react的框架导入到项目中，注意browser.min.js也要导入
2. type="text/babel"
3. ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如
   ；第二个参数是插入该模板的目标位置。
4. 传入变量的话用{}包裹

二、demo代码

第二个demo：定义组件类

一、知识点

1. 定义组件用React.createClass
2. 用this.props来做简单的数据传递
3. 组件第一个字母大写采用驼峰式命名

二、demo代码

第三个demo：组件的样式

一、知识点

1. 三种样式：内联样式、对象样式、选择器样式。内联样式和对象样式类似，选择器样式和html相似
2. 注意react样式和html样式的区别：

• html5以;结尾，React以,结尾
• HTML5中key、value都不加引号；React属于JavaScript对象，key的名字不能出现-，需要使用驼峰式命名。如果value为字符串，需要加引号
• HTML5中，value如果是数字，需要带单位，React中不需要带单位

3. 调用选择器样式，不能直接定义class而要用className，因为class是javascript中的保留字

二、demo代码

第四个demo：复合组件

一、知识点

1. 简单的将两个组件组合在一起。（数据其实还是死的，怎么传活数据需要用props传值，下一篇介绍）

二、demo代码