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标签。

 

如何再jsx里面去编写注释

{/* 注释 */}

这样写，需要通过一个花括号去写。这个只对开发有用，不会在页面上展现的

{
// 单行注释
}

这是单行的注释，大括号需要换行

jsx里面的样式

不能用class，会认为是个类，所以引用样式需要用className来代替class，这样就是react里标准的写法

如果通过输入框里面的标签，不想通过转义怎么弄，比如<h1>hello</h1>

<li
　　key={index}
　　onClick = {this.handleItemDelete.bind(this, index)}
　　dangerouslySetInnerHTML={{__html: item}}
>
</li>

dangerouslySetInnerHTML,危险的设置，可能会被攻击

在html里面label的作用是扩大点击区域

<div>
    <label for='inputSet'>输入内容：</label>
　　<input
　　　　id = 'inputSet'
　　　　className = 'input'
　　　　value = {this.state.inputValue}
　　　　onChange = {this.handleInputChange.bind(this)}/>
　　<button onClick = {this.handleBtnClick.bind(this)}> 提交 </button>
</div>

我们可以看到，点击输入内容的时候，光标会自动的进入input框，虽然没什么问题，但打开控制台会报错，推荐我们使用htmlFor，在react中，这个for会认为是循环的for

<div>
    <label htmlFor='inputSet'>输入内容：</label>
　　<input
　　　　id = 'inputSet'
　　　　className = 'input'
　　　　value = {this.state.inputValue}
　　　　onChange = {this.handleInputChange.bind(this)}/>
　　<button onClick = {this.handleBtnClick.bind(this)}> 提交 </button>
</div>