React的JSX语言

import React from 'react'; import logo from './logo.svg'; import './App.css';  function App() {   return (     <div className="App">       <header className="App-header">         <img src={logo} className="App-logo" alt="logo" />         <p>           Edit <code>src/App.js</code> and save to reload.         </p>         <a           className="App-link"           href="https://reactjs.org"           target="_blank"           rel="noopener noreferrer"         >           Learn React         </a>       </header>     </div>   ); }  export default App;

在这个文件中，render（）方法可以像在HTML文件中书写HTML代码，这便是jsx语言。jsx语言并不是开发react所必须的，不使用jsx,可以使用React.createElement(）来创建HTML节点，不过这个方法没有jsx语言简明易读，所以在开发中建议使用jsx语言。

使用JSX需要注意的是：class为JavaScript这门语言保留字，应该使用className来代替，同时HTML的for属性也是JavaScript的保留字，应该使用htmlFor来代替。

const div=<div>{1+100}</div>

JSX中的style属性应该作为一个对象，因为对象是JavaScript的语法，因此又应该需要大括号包围。同时，css属性也不再是使用划线连接，而是使用驼峰形式，因此声明一个元素的style可能如下

const div=<div style={{fontSize:'16px',textAlign:'center'}}>{1+100}</div>

例如：实现一段简单的列表，修改App.js

//引入react import React ,{Component} from 'react';  //引入样式文件 import './App.css';  //构建APP类    class App extends Component{               //定义render方法          render(){                  const arr=['react','javascript','java','node','vue'];         const eleArr=arr.map((ele,i) => {                          return <li key={i}>{ele}</li>         });                           return (                          <div className="App">             <ul>             {eleArr}             </ul>             </div>                      );              } }    export default App;