简单易懂的React魔法(03):JSX简介

在src文件夹下创建新文件夹命名为pages，pages下创建Detail.js。当开发React的时候有些开发者喜欢用后缀名.jsx有些还是用js，这其实不要紧。想用哪个就用哪个。话虽如此，如果这是你第一次使用react，那你还是用js后缀吧。

在Detail.js里，我们会用react渲染一些简单的东西，让你看看为什么我们早些时候需要配置那些webpack 和 npm。编辑Detail.js使它包含以下代码：

src/pages/Detail.js

import React from 'react';

class Detail extends React.Component {
    render() {
        return <p>This is React rendering HTML!</p>;
    }
}

export default Detail;

这7行es6代码，一句是空的，两句是括号，应该没多大问题。有趣的是这段代码在js中使用了HTML，这样做是合法的，同样也能运行。这是react很多特性中的一个，叫做JSX，当你使用webpack打包的时候，这段代码会自动转换为javascript。

jsx和html很像，不过有几处不同，我们会在用到的时候讲到。下面我们来看一下上面这段代码重要的几句：

*import React from ‘react’加载了react库，这是我们项目的核心。

• class Detail extends React.Component {声明了一个新的react组件。React组件可以像一个页面那么大也可以像一个html标签那么小，很灵活。
• render() {render方法会在组件需要显示出来时被react调用，它需要返回html标签。
• 剩下的只是大括号用来结束render和组件class。
• export default Detail; export关键字使这个组件有一个接口暴露在外以供应用调用，default表示这个接口是这个class唯一会暴露的接口。

这个例子把所有的jsx写在了一行，不过我们很快就会写很多行jsx进去了，多行jsx会有一个特性你需要知道，jsx会自动处理行与行之间的空格，所以如果你按照例子走，但是发现有些行与行中间的空格不见了，你可以试着把空格写在一行。
写完上面的代码后，我们并没有得到什么有意义的结果，下一章我们来写……