JSX介绍与使用

承接自：第一个HelloWorld

JSX 实际上是 DOM 的一个变种

JSX介绍与使用

实例

项目结构创建如下

之后开始编辑 index.js 文件

这里需要注意的是想要编译的话项目中必须得有两个文件，原因是在之前配置时有详解
.babelrc ``` { “presets”: [
```
  "es2015",
  "react",
  "stage-3"
```
], “plugins”: [] }


- package.json

{ “devDependencies”: { “babel-preset-es2015”: “^6.24.1”, “babel-preset-react”: “^6.24.1”, “babel-preset-stage-3”: “^6.24.1” } }


- 在项目新增这两个文件之后再在命令行中进入项目目录下安装所需的依赖包

cd Desktop/jsxtest //安装 package.json 文件中所配置的依赖 npm install


- 之后才可以正常的编译 `ctrl + shift + p` 输入 `Babel Transform`（这里实际上也可以使用命令行 `babel` 命令进行编译的）
3. 
再在项目中新建一个 babel.js 文件 将编译过的代码复制到里面并保持，再在 index.html 中引入 babel.js 文件即可
3. 
在浏览器中打开页面可以看到已经成功了
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-b064b3558b91a671.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5. 源码
- index.html

<!DOCTYPE html>

.babelrc

{ “presets”: [ “es2015”, “react”, “stage-3” ], “plugins”: [] }


- index.js

var HelloMessage = React.createClass({ render: function() { return

{this.props.name}

; } });

ReactDOM.render( , document.getElementById(‘example’) );


- package.json

{ “devDependencies”: { “babel-preset-es2015”: “^6.24.1”, “babel-preset-react”: “^6.24.1”, “babel-preset-stage-3”: “^6.24.1” } }


- babel.js 这个是 index.js 代码编译之后生成的

“use strict”;

var HelloMessage = React.createClass({ displayName: “HelloMessage”,

render: function render() {
    return React.createElement(
        "h1",
        null,
        this.props.name
    );
}

});

ReactDOM.render(React.createElement(HelloMessage, { name: “Xiaochuan” }), document.getElementById(‘example’));

```

项目结构

进一步的介绍

两种写法 ES5 和 ES6

DOM Diff

DOM Diff 是做 React 开发的一个非常牛
的算法，因为 React 是为 View 而生的，所以DOM Diff 这个算法是为了性能、为了更高效的渲染 DOM 的

需要注意的一点是以前都是现在 DOM 都是直接写在 HTML 页面上的，现在是用 JS 虚拟的生成的，这里最重要的就是重绘和重排 React 做到了将重绘和重排做到了最小化的渲染的机制

JSX 注意事项

区分大小写，采用驼峰命名法

添加类名使用 className ，之前在 HTML 中使用的是 class

之后编译，再将编译后的代码在 babel.js 文件中进行代码替换并保存

在 index.html 代码中新增一段样式，再在浏览器中刷新页面

for 属性：之前在 HTML 中使用的是 for 在 JSX 中使用 htmlFor

之后还是之前的编译复制代码的那一套操作，需要注意的是在创建多个标签的时候必须要用一个 div 标签进行包裹不然编译就会失败
刷新浏览器

CSS IN JS

React 他想实现的是在 JS 中写 CSS，他将 CSS 和 JS 都混到一起了

这里需要注意书写的格式 Style 是一个对象，里面的键值对除数字外使用字符串的形式，还是就是间隔符号为逗号，之后将这个 Style 对象在 render 时进行引用即可，之后还是编译的那一套东西
最后刷新浏览器

这个时候会看到控制台是有报错的

因为他不建议我们直接写 ‘font-size’ 因为他有可能是个关键字之类或者是其他的东西，写这个的话可以到官方去看详细的属性写法示例

官网推荐的都是驼峰的写法，所以下面做了修改

之后刷新浏览器可以看到已经没问题了