React是由ReactJS与React Native组成，其中ReactJS是Facebook开源的一个前端框架，React Native

是ReactJS思想在native上的体现！

JSX并不是一门新的语言，仅仅是个语法糖，允许开发者在JavaScript中书写HTML语法。，最后每个

HTML标签都转化为JavaScript代码来运行

1.环境

2.载入方式

3.标签 HTML标签与 ReactJS创建的组件类标签(首字母一定要大写)

4.转换解析器

输入

转换成：
React.createElement(“h3”,null,”输入”) 返回一个ReactElement对象

5.执行JavaScript表达式

var msg=”我是东方耀”;

{msg}

React.createElement(“h1”,null,msg)

6.注释单行：// 多行：/注释文本/

7.属性

var msg=

我是东方耀

React.createElement(“h1”,{width:”10px”},”我是东方耀”)

8.延展属性
使用ES6的语法
var props={}; props.foo=”1”; props.bar=”1”;

ReactJS

ReactJS核心思想：组件化维护自己的状态和UI 自动重新渲染

多个组件组成了一个ReactJS应用

React是全局对象顶层API与组件API
React.createClass创建组件类的方法
React.render渲染，将指定组件渲染到指定DOM节点
render:组件级API,返回组件的内部结构
React.render被ReactDOM.render替代

ReactJS组件生命周期

1.创建阶段

getDefaultProps：处理props的默认值在React.createClass调用

2.实例化阶段

React.render(

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>React组件的生命周期</title>

    <script type="text/javascript" src="react.js"></script>

    <script type="text/javascript" src="react-dom.js"></script>

    <script type="text/javascript" src="browser.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

    var HelloMessage=React.createClass(

            {

                //1、创建阶段

                getDefaultProps:function(){

                  //在创建类的时候被调用   this.props该组件的默认属性

                    console.log("getDefaultProps");

                    return {};

                },

                //2、实例化阶段

                getInitialState:function(){

                    //初始化组件的state值，其返回值会赋值给组件的this.state属性

                  //获取this.state的默认值

                    console.log("getInitialState");

                    return {};

                },

                componentWillMount:function(){

                  //在render之前调用此方法

                    //业务逻辑的处理都应该放在这里，如对state的操作等

                    console.log("componentWillMount");

                },

                render:function(){

                    //根据state值，渲染并返回一个虚拟DOM

                    console.log("render");

                    return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是东方耀</h1>;

                    //这是注释  React.createElement

                },

                componentDidMount:function(){

                  //该方便发生在render方法之后

                    //在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构

                    //组件内部可以通过this.getDOMNode()来获取当前组件的节点

                    console.log("componentDidMount");

                },

         //3、更新阶段，主要发生在用户操作之后或父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整

             componentWillReceiveProps:function(){

                 //该方法发生在this.props被修改或父组件调用setProps()方法之后

                 //调用this.setState方法来完成对state的修改

                 console.log("componentWillRecieveProps");

             },

    shouldComponentUpdate:function() {

        //用来拦截新的props或state，根据逻辑来判断

        //是否需要更新

        console.log("shouldComponentUpdate");

        return true;

    },

        componentWillUpdate:function(){

            //shouldComponentUpdate返回true的时候执行

            //组件将更新

            console.log("componentWillUpdate");

        },

          componentDidUpdate:function(){

              //组件更新完毕，我们常在这里做一些DOM操作

              console.log("componentDidUpdate");

          },

    //4、销毁阶段

           componentWillUnmount:function(){

               //销毁时被调用，通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作

               console.log("componentWillUnmount");

           }

            }

    );

    ReactDOM.render(<HelloMessage name="React 语法基础8" /> ,document.getElementById('example'));

</script>

</body>

</html>

组件之间通信实例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>React组件通信</title>

    <script type="text/javascript" src="react.js"></script>

    <script type="text/javascript" src="react-dom.js"></script>

    <script type="text/javascript" src="browser.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

    var Parent=React.createClass(

            {

                click:function(){

                    this.refs.child.getDOMNode().style.color="red";

                },

                render:function(){

                    return (

                            <div onClick={this.click} >Parent is :

                            <Child name={this.props.name}  ref="child"></Child>

            </div>

                    );

                }

            }

    );

    var Child=React.createClass({

        render:function(){

            return <span> {this.props.name} </span>;

        }

    });

    ReactDOM.render(<Parent name="React语法基础" /> ,document.getElementById('example'));

</script>

</body>

</html>

React Native实战之调试与打包发布

http://localhost:8081/index.android.bundle?platform=android；当应用启动运行的时候，会自动拉取这

个bundle文件，该文件里存放的是应用的全部逻辑代码，在目录中并不存在这个文件，事实上，这个

地址只是一个请求地址，而非真正的静态资源文件，是通过包服务器packager通过动态分析

index.android.js中的依赖，并对其进行合并得到的，而且该服务允许代码实时渲染。

1.生成一个签名密钥

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

最后它会生成一个叫做my-release-key.keystore的密钥库文件

2.找到路径/android/app/src/main，并在该目录下新建assets文件夹

3.在工程目录下将index.android.bundle下载并保存到assets资源文件夹中

curl -k “http://localhost:8081/index.android.bundle” > android/app/src/main/assets/index.android.bundle

这句命令是重点，如果assets目录中不存在该文件，则打包的apk在执行时显示空白。

Protocol ‘http not supported or disabled in libcurl

Windows下安装使用curl命令:http://jingyan.baidu.com/article/a681b0dec4c67a3b1943467c.html

4.添加gradle的android keystore配置

打包的apk在未签名的情况下,在手机中（非root）是不允许安装的

在build.gradle文件中

//签名

signingConfigs{ release { storeFile file("/my-release-key.keystore") storePassword "密码" keyAlias "keyAlias的名字" keyPassword "密码" } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' signingConfig signingConfigs.release //添加这句话引用签名配置 } }

5.启用Proguard代码混淆来缩小APK文件的大小

Proguard是一个Java字节码混淆压缩工具，它可以移除掉React Native Java（和它的依赖库中）中没

有被使用到的部分，最终有效的减少APK的大小。

重要：启用Proguard之后，你必须再次全面地测试你的应用。Proguard有时候需要为你引入的每个原

生库做一些额外的配置。参见app/proguard-rules.pro文件。

def enableProguardInReleaseBuilds = true

6.在/android/目录中执行gradle assembleRelease命令，打包后的文件在

android/app/build/outputs/apk目录中，例如app-release.apk。如果打包碰到问题可以先执行 gradle

clean 清理一下。

安装gradle工具（版本与android\gradle\wrapper下的一致），并配置环境变量，配置GRADLEHOME

到你的gradle根目录当中，然后把%GRADLEHOME%/bin（linux或mac的是$GRADLE_HOME/bin）加

到PATH的环境变量。

配置完成之后，运行gradle -v，检查一下是否安装无误

7.将apk发布到各大应用市场（BUILD SUCCESSFUL）

React之JSX入门的更多相关文章

转: React系统的入门系统
评注:React系统的入门系统. 转: http://www.infoq.com/cn/search.action?queryString=%E6%B7%B1%E5%85%A5%E6%B5%85%E ...
React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
React Native 从入门到原理一
React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...
React Native JSX value should be expression or a quoted JSX text.
问题描述: 我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...
React Native基础&入门教程：初步使用Flexbox布局
在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...
React Native小白入门学习路径——五
React Native小白入门学习路径--五序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
React Native小白入门学习路径——二
万万没想到,RN组仅剩的一个学长也走了,刚进实验室没几天就被告知这样的事情,一下子还真的有点接受不了,现在RN组就成了为一个没有前辈带的组了,以后学习就更得靠自己了吧.唉,看来得再努力一点了. 这一周 ...
react基础&JSX基础
一.HTML 标签 vs. React 组件 React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes). 1.要渲染 HTML 标签,只需在 JSX 里使用小 ...
React.js基础入门
本文主要是针对React的一些demo教程.参考了菜鸟教程中的react教程,做了一些总结.Demo的下载链接是 https://github.com/RealAndMe/react-demo 下面要 ...

随机推荐

C#高级编程笔记 Day 2， 2016年8月 31日构造函数
1.构造函数: 实例构造函数(只要创建了对象,就会执行)一般使用 this 关键字区分成员字段和同名的参数.可以把构造函数定义为private 或 protected .这样不相关的类也不能访问他们. ...
java的字体的颜色，型号，大小的方法
jTextPane1.setForeground(Color.green);//设置java字体的颜色设置字体的颜色和型号和大小 jTextPane1.setFont(new Font(&quo ...
MS DOS 命令大全
刚好看到留下来以备用: 一)MD——建立子目录命令 1．功能:创建新的子目录 2．类型:内部命令 3．格式:MD[盘符:][路径名]〈子目录名〉 4．使用说明: (1)“盘符”:指定要建立子目录的磁盘 ...
Python自动化之paramiko
只需要连接一次 import paramiko li = [] ssh = paramiko.SSHClient() ssh.set_missing_host_key_policy(paramiko. ...
Github GUI 托管代码教程
附录:克隆仓库到本地:git clone https://github.com/chzeze/WeiboHomeCrawl.git
flask 链接 url_for()
通常html的文件都放在template里面,那么静态的文件放在哪呢?staitc里面调用 url_for('static', filename='css/styles.css', _externa ...
python wraps
用代码说明问题: def d(f): def _d(*args, **kwargs): print f.__name__, ' is called' f(*args, **kwargs) return ...
django 实战 - eLeave Form
需求: 实现请假单的电子审批 1. 支持国际化 2. 支持模型级别的访问记录 here we go: 这里会写一系列的文章,来记录我实战的过程,由于接触django没多久,难免有疏漏之处,望拍砖不要太 ...
phpcms前台退出登录的时候提示信息'退出成功0'
问题背景: phpcms前台退出登录的时候,提示了一个退出成功0 让我很困惑为啥有个0呢? 问题分析: 进入 ./phpcms/modules/member/index.php 找到logout方法, ...
C#之串口
1.字符发送 string strSend = "00 01 02 03"; serialPort1.Write(strSend); 2.字符接收 ReadDataFromSeri ...

React之JSX入门