React 中最基础的 JSX 语法

这个有趣的标签语法既不是字符串也不是HTML。它被称为JSX，它是JavaScript的语法扩展。我们建议将它与React一起使用来描述UI应该是什么样子。JSX可能会提醒您一种模板语言，但它具有JavaScript的全部功能。

上面的引用是 React 官方文档里对 JSX 语法的描述，今天就介绍一下 JSX 语法。

使用的还是之前的项目文件和代码，打开程序的入口文件 index.js 文件。

./src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

在最后一行的 rander 方法中，第一个参数是 <App /> ，跟我们平时写的 html 标签差不多的代码块，它的意思是使用 App 这个组件。

我们打开 App.js 这个文件，这里面是 App 组件的主要内容。这个组件渲染的内容，是由下面的 rander 函数返回的结果所决定的。

./src/App.js:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

上面 rander 函数返回了一个 h1 标签，标签里的内容是 Hello World 。

正常情况下，我们的标签是写在 html 文件里的，现在我们把这种标签写在了 js 文件里。在 React 中， js 文件中写的这些 html 标签就是我们的 JSX 语法。

在 React 中，我们不仅仅只是可以用 html 现有的标签，还可以使用自己定义的标签。

在一开是我们看的 index.js 文件中，有一个 <App /> 的语法，这个就是我们自定义的标签。在 JSX 语法中，如果我们要使用自己创建的组件，我们直接通过这种标签形式来使用我们定义的组件名。

import App from './App'; 这句语句中 import 后面的 App 就是我们定义的标签名。

特别注意，我们定义的标签名是有特定的规则的，必须是大写字母开头。

在 React 中，当你看到大写字母开头的标签，你就会知道它是一个组件，全是小写字母的标签就是 html 中所使用的标签。

JSX 最基础的语法就这些，希望对大家有帮助。