一、简介

JSX 是 Javascript 与 XML的结合。利用虚拟DOM来减少对实际DOM操作，从而提升性能。简单的说，在javascript中插入HTML标签，从而使代码更加简洁、易读、减少BUG机率。

我JS的水平仅限使用 jQuery 操作DOM，但JSX非常简单，抓住下面几个特点就能上手试用。

二、JSX与JS、HTML的异同

HTML举例：

<ul class=”my-list”>
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>

JS举例：

var child1 = React.createElement(‘li’, null, ‘First Text Content’);
var child2 = React.createElement(‘li’, null, ‘Second Text Content’);
var root = React.createElement(‘ul’, { className: ‘my-list’ }, child1, child2);

JSX举例：

var root =(
<ul className=”my-list”>
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);

因为class、for 等是 javascript 关键字，要用 className、htmlFor 代替。

三、特点

（1）解析方式

• 在解析时，遇到 < 符号，JSX就当HTML解析
  • <h3>输入</h3>
  • 转换成：React.createElement(“h3″,null,”输入”)
  • 返回一个 ReactElement 对象
• 在解析时，遇到 { ，JSX就当Javascript 解析。
  • var msg=”我是ABC”;
  • <h1>{msg}</h1>
  • 转换成：React.createElement(“h1”,null,msg)

（2）ReactJS 自定义标签

• HTML标签，首字母小写
• 自定义标签，首字母大写。比如：
  • var ShowEditor=React.createClass({ … });
  • React.render(<ShowEditor />,document.getElementById(‘example’))

（3）使用ES6的语法

• var props={}; props.foo=”1″; props.bar=”1″;
• <h1 {…props} foo=”2″ >欢迎</h1>
• 转换成：React.createElement(“h1″,React.__spread({},props,{foo:”2″}),”欢迎”)

（4）自定义标签属性（凡是以 data- 开头的自定义属性，可渲染到页面）

• <h1 data-test=”A” test=”B”>欢迎</h1>
• 网页显示结果：<h1 data-test=”A”>欢迎</h1>
• 用途就比较多了，可以传递参数、作为注释、作为jQuery筛选条件等

（5）_html: 为前缀的字符串，只显示HTML内容，不显示DOM节点。比如：

• alert(“<strong>重要</strong>”)
  • 显示结果是：<strong>重要</strong>
• alert(“_html:‘<strong>重要</strong>'”)
  • 显示结果是：重要

（6）style样式使用

• 用双括号包裹 {{  }}
  • 外层{}按照JSX语法，比如：
    • var myStyle = {
      color: ‘#ff0000′,
      fontSize: ’14px’
      };
    • <h1 style={myStyle}>你好</h1>
  • 内层{}是JavaScript对象，比如：
    • <h1 style={{fontSize:’18px’,color:’#f60′}}>你好</h1>
• css用横线连接的属性，转为驼峰方式连接
• 多属性赋值方式用JSON格式

（7）事件绑定，用onClick 调用bind方法（设定作用域，要传递的参数）

（8）数组递归

• 数组循环,数组的每个元素都返回一个React组件。比如：
• var lis = this.todoList.todos.map(function (todo) { … }
• var ul = (
  <ul>
  {lis}
  </ul>
  );

在我看来JSX更年轻、简洁、优雅、可读，学习这款语言的思想，可以使代码思维的边界明显扩展。

但过于灵活的混杂自然洐生出杂乱和随意，另外技术的高速发展让新人无所适从，比如ES4、5、6写法有很大的不同，相信还需要时间来沉淀和检验。

最后在学习的过程中了解到 Vue + week （阿里前端）也在做同样的事，不过市场占有率太低，不在对口公司工作，很难有机会深入使用，人材、资源、技术升级都是风险，不太看好。

最近几天有种感觉，快要接近配置成功的部分，没想到今天早上就意外调通了。并没有什么惊喜和感慨，因为一直有这样的信心和预期，这一刻只是早晚，而且更难的才刚开始。

整理一下昨天遇到的问题：

• 启动服务  react-native start
• 发现 8081 被启动
• 执行 “netstat -ano|findstr “端口号”” （注意，端口号外面加冒号，显示结果最后一行为此进程，记住【进程号】）
• tasklist|findstr 进程号 （查看具体的程序，记住【文件名】）
• taskkill -f -t -im 文件名（强制、递归 删除本程序及其子进程）
• 我的 8081 端口是 nodejs 占用的，凭感觉不能直接删，想换 nodejs 或 react-native 的端口号
  • 找了一堆方法没成功
  • 放弃，直接杀进程，没什么改变
• 仍然提示   could not install the app on the device（没有安装 app设备错误）
  •  adb devices （查看设备连联情况，连接上了没有问题）
  • 修改Genymotion的SDK不使用自带 SDK。
  • ->Settings->ADB tool connection settings 为Use custom Andrdoid SDK tools
  • 把模拟器和真机都插上，还是问题存在
• 我觉得我的思路错了，可能是其它问题。
• 仔细查看问题提示语句（很长大概30多行），我只注意了最底部红色提示部分，没注留头部的白字问题。
• 有一句引起了我的注意 java.util.zip.ZipException: error in opening zip file
• 我尝试删除了 tomcat 、下载绿色覆盖、删除 react-native 自建的项目，重新初使化。
• 还没来的及检验，一天时间就过去了
• 第二天莫名其妙成功了，我觉得是 jdk 的问题。

虽然遇到的问题非常多，但我觉得现在找答案越来越方便，报错的提示也非常清晰，基本上只要用心都可以花时间解决。

有三个能力非常重要：

• 搜商（针对具体问题，如何去提取关键词，如何去请教别人和发问，如何高效的寻找）
• 英语（计算机英语简单阅读即可，3秒内找到一段文字的关键词，大概是讲什么内容，详细内容可以交给翻译软件）
• 平常心

刚解决完2033、2052、2053问题，把nodejs 和 React-native安装完成 ，初使化项目成功，这只是冰山一角、长征一步。

紧接着运行项目时发现问题。

• react-native run-android
• 报错提示“没有安装app设备……”
• 看教程说要装 android SDK
  • 装 SDK 先要装 JDK
  • 再装 Eclipse
  • 我装的是 myEclipse，和 Eclipse 的区别是（后者是基础、不收费，前者是威力加强版，并且要收费）
  • 装完后破解 myEclipse
• 然后去 google 下载 Android SDK
  • 先翻墙
  • 官网发现现在 google 不支持 SDK 工具下载，用 Android Studio 集成了 SDK，这是个类似 eclipse 的开发工具
  • 当然可以去其它地方找到 SDK，我想了想，Android Studio 可以代替以前4个软件之间的窗口切换，而且是前沿技术不易淘汰
• 决定使用 Android Studio(Native客户端)+WebStorm（RN服务端）
  • 下载安装 Android Studio（大概700M），在公司翻墙速度比较慢，晚上回家下
  • 打开 Android Studio 的 SDK manager
  • 因为工具栏被收起，上网搜到工具栏打开方法：菜单 > View > ToolBar > 打开 SDK manager
  • 下载各个版本的 SDK（翻墙）
  • 听说自带的模拟器不太好，下载 Genymotion
    • 先去Genymotion官网
    • 注册发现要收费，个人版 136美元/年，企业版 412美元/年
    • 去网上找点破解版，听说Genymotion官网有不收费的版本，只是链接藏的比较隐蔽。
    • 我就信了回官网，找了好大一圈，全英文的页面我逐段翻译，每个链接都点开试试。还是没找到，网速又慢。
    • 回头又去找破解版，好心人给了个官网免费版链接 https://www.genymotion.com/fun-zone/
    • 装完了运行报错，要装虚拟工具  VirtualBox，好在以前开发网站要支持 IE6，用过这软件
    • 运行起来后要装手机模拟器，每个模拟器300M（要翻墙）
    • 第二天早上

好了，这就是两天的成果，我就像一个小企业老板，拿着一堆资料跑到各个行政大厅去盖章，这个说你资料填写不对，那个说你手续不全，给了一大堆资料回去慢慢研究，还有许多热心的三姑六婆来出主意，最后大家开心的各回各家，烧饭、看剧、奶孩子，留我一人在风中凌乱！

其中许多的细节，比如JDK环境变量配置、eclipse ADT 插件安装、网上好不容易找到的教程，看完才发现是 liunx 版等等，太多记不清了，这过程痛苦且充实，因为我每前进一步都是发现一片新大陆，这些学费不论是现在还是未来都是要交的。我有一种感觉，虽然路非常艰难，但一直没有走死，不像当年学FLASH的痛苦，一个问题能卡好几天最后无奈放弃，那才是真正的挫折。

我在配置React Native 环境的时候，找到玩解迷游戏的感觉了，我甚至希望不要快点把环境配置完，期待每次解开问题的惊喜！

首先去官网下载 nodejs 最新版本，安装就报 2203错误。然后今天一天我就在解决问题中度过，收益良多。

1. 先在百度上搜 nodejs 和 2203 关键字，没有太帖切的答案
2. 去知乎和CSDN上找了一大圈，试了很多方法也没成功
3. 把环境变量的用户和系统反复配置几遍，正反斜杠都试用一遍还是不行
4. 用管理员命令行启动软件，还是没启动成功
5. 想用administrator超级用户，win10家庭版不支持，想升级win10没成功
6. 给nodejs、系统temp目录、配置了system权限，不管用
7. 翻墙去google上找答案，用翻译软件翻，没太多收获
8. 最后把问题扩大，只搜 2203问题，终于在一个不起眼的角落找到一个方法，把环境变量temp和tmp删除，成功了
9. 然后又弹出2502和2503问题，这就简单了

具体解决方法：

• 官网下载 https://nodejs.org/en/
• 报2203错误时，把环境变量中的 temp和tmp删除
• 报2502/2503错误时，步骤如下：
  • win + x
  • 选择“命令提示符（管理员）”
  • msiexec /package “c:\nodejs\node.msi”
  • 格式一定要写对
• 配好环境路径。path追加 C:\Program Files\nodejs
• win + R，输入cmd
• node -v 看一下版本，npm -v 看一下版本
• 安装环境 npm
  • npm install express -g
  • npm install jade -g
  • npm install mysql -g
  • npm install -g express-generator

想自学一个软件，每个角落都是困难，如果有人点拨一下，会省很多时间。但如果自己解决，会有非常大的成就感和自信心。

我一直有个很幼稚的想法，做一个方案，办一场路演，拉到天使投资后辞职，边给自己开工资边创业。事实这条路非常狭窄，这年头谁都不傻，完全不成型的项目，又没有团队和大牛光环，是不会吸引投资者的眼球，一般草根只有拿出一些雏形后，才能让投资者有信心来投资。

所以，我想自己开发一款app，从零开始。

在研究了思路、方法、路径后，决定放弃 native app（原生开发），因为这条路要非常强的开发功底。和web app、hybrid app（基于网页开发）效率太底，没有扩展。使用 React Native技术来开发，这条路坡度比较平滑，而且是技术前延。

就算如此，这条路还是非常难，我给自已三个月时间，有前景就走下去，不行果断放弃。

真正让我下决心的是看到知乎上一个网友的话，“ReactNative学习成本其实非常低，小项目实际开发中和原生并没有太多关系，无非是打包、加插件的时候会用到一些Native知识。放心去学，遇到Native的问题再看，多做有创造力的事情。”

思前想后，不如前进一步。