1，学习 React Native 的前期准备

2017-03-18 本文已影响60人 SYOL

React 与 React Native 之间的关系
简单来说前者用于WEB开发，后者用于移动端开发:

首先得先了解：React 可到菜鸟教程进行了解http://www.runoob.com/react/react-tutorial.html

React的学习储备(HTML，CSS， JavaScript)，可以到http://www.w3school.com.cn/ 进行学习。

配置React 的开发环境。
新建一个小工程

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
  <script src="js/react.js"></script>//reacr.js是react的核心库
  <script src="js/react-dom.min.js"></script>//react-dom.js 的作用是提供dom的相关功能
  <script src="js/boowser.min.js"></script>// boowser.min.js的作用是将JSX语法转换成Javascipt语法
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
//有三个参数
//第一个：模版渲染内容（HTML形式）
//第二个：需要插入DOM的节点
//第三个： 渲染后的回调（一般不用）
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
  </script>
</body>
</html>

创建组件的注意事项
React中创建的组建类以大写字母开头，遵循驼峰命名法
在React中使用React.createClass方法创建一个组建类
核心代码：每个组件类必须实现自己的render方法。输出定义好的组件模版。返回值：null、false、组件模板
注意：组件类只能包含一个顶层标签

var Demo = React.createlClass({
render:function{
return <h1>Hello Demo<h1>
}
});
React.render (
//插入<Demo />会自动生成一个实例
<Demo />,
document.getElementById("container")
);

组件样式

 组件样式
内联样式
对象样式
选择器样式//选择使用他的时候一定要注意class要写成className,还有不能直接使用for,要使用HTMLFor
注意事项 在React和HTML5中设置样式时shi是有区别的
 HTML5是以;结尾  而React以,结尾
HTML5中的KEY、value 都不加引号,React中属于JavaScript对象，key的名字不能出现“-”，需要使用驼峰命名法。如果value为字符串，需要加引号
HTML5中，value如果是数字的话，需要加单位，React不需要

复合组件：创建多个组件合成一个组件
props 组件
props 是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息（通常是由父层组件向子层组件传递）
注意：props对象中的属性与组件的属性是一一对应的。不要直接去修改props中属性的值
this.props
props提供的语法糖，将父组件中的全部属性都复制给子组件
this.props.children
children是一个例外，不是跟组件的属性对应的，表示组件的所有子节点

B1Y2S~(@C4E5CGY6_E~4EIX.png

Paste_Image.png

属性验证
propTypes
用于验证组件实例的属性是否符合要求

Paste_Image.png

事件绑定

Paste_Image.png

state
也是与props是组件自身的属性
在一个对象中设置的属性，将会存储在state

组件的生命周期
Mounting:组件挂载，已插入真实 DOM

Paste_Image.png

Updating:组件更新，正在被重新渲染

Paste_Image.png

Unmounting:组件移出，已移出真实DOM

Paste_Image.png

组件的生命周期fenwei4个阶段
创建、实例化、更新、销毁

JSX语法的储备(JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。)。网上有很多相关的知识了解。

JSX 必须借助React环境运行
如：

React.render(
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
);

在JSX中运行JavaScript代码

//使用｛｝括起来   ｛表达式｝
var demo = "这是一个demo"；
React.render (
<h1>{demo}</h1>
docunment.getElementById("container")
);

ES6的知识储备

1，学习 React Native 的前期准备

猜你喜欢

热点阅读