React中最基础的jsx语法

import React, { Component } from 'react';
class App extends Component {
　　render() {
　　　　return (
　　　　　　<div className="App">
　　　　　　　　hello world
　　　　　　</div>
　　　　);
　　}
}
export default App;

比如App.js这个文件中，之前我们<div></div>一般都是在html文件中写的，现在我们把这样的标签写在了js文件中，所以我们是在js里面去写html标签，在react中，我们把在js文件中写的这种标签就叫做jsx语法，在react之中,jsx语法与普通的js语法有些区别

最直观的感受就是以前如果我们写普通的js语法，想要渲染一段html文本的话，一般会去返回一个字符串，比如

return '<div className="App">hello world</div>'

那如果这么去写，我们去运行我们的代码，发现展现出来的就是<div className="App">hello world</div>。

第二点，在jsx这种标签的写法之中，不仅仅可以用html的一些标签，比如说div,span,p。我们还可以使用自己定义的一些标签，比如<App/>。

在jsx语法中，如果我们要使用自己创建的组件，我们直接通过这种标签的形式使用我们定义的组件名就可以了。

这里有一点要注意，就是不能把开头的写成小写的，要大写。小写在jsx里面是不支持的。在jsx里面，如果要使用自己的组件，组件的开头必须以大写字母开头，所以整体的感觉就是看到大写的标签就是组件，小写的一般就是h5标签。

React中最基础的jsx语法

猜你喜欢