这个有趣的标签语法既不是字符串也不是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 最基础的语法就这些,希望对大家有帮助。