标签：

1、根基观点：

React 使用 JSX 来替代通例的JavaScript。

JSX 是凭据 XML 语规则范 的 JavaScript 语法扩展。

JSX 语法的素质：并不是直接把 JSX 衬着到页面上，而是内部先转换成了 createElement 形式，再衬着的。

2、 JSX 的长处：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化；

它是类型安适的，在编译过程中就能发明错误；

使用 JSX 编写模板越发简单快速。

3、JSX语法根本：

JSX 注释：保举使用 {/* 这是注释 */}；

JSX中添加class类名：需要使用 className 来替代 class ；htmlFor 替代 label 的 for 属性；

在JSX创建DOM的时候，所有节点必需有独一的根元素进行包裹；

在JSX语法中，标签必需成对呈现，如果是单标签，则必需自闭和；

代码示例：

const mydiv = <div>这是一个Div标签</div>; ReactDOM.render(mydiv, document.getElementById(‘root‘));

使用组件化开发代码示例：

App.js 组件文件代码

import React from ‘react‘; class App extends React.Component{ render(){ return ( <div> {1+1} <hr/> Hello，，Reactjs！！ </div> ); } } export default App;

在其他文件中使用 JSX 语法引用组件：

import React from ‘react‘; import ReactDOM from ‘react-dom‘; import App from ‘./App‘; ReactDOM.render(<App />, document.getElementById(‘root‘)); 4、JSX的应用：

衬着数字

import React from ‘react‘; import ReactDOM from ‘react-dom‘; let a = 10; ReactDOM.render( <div>{a}</div> , document.getElementById(‘root‘));

衬着字符串

import React from ‘react‘; import ReactDOM from ‘react-dom‘; let str = ‘hello react‘; ReactDOM.render( <div>{str}</div> , document.getElementById(‘root‘));

衬着布尔类型

import React from ‘react‘; import ReactDOM from ‘react-dom‘; let rel = true; ReactDOM.render( <div>{rel ? ‘功效为真‘ : ‘功效为假‘}</div> , document.getElementById(‘root‘));

衬着属性值

import React from ‘react‘; import ReactDOM from ‘react-dom‘; let title = "this is a div"; ReactDOM.render( <div title={title}>Hello React</div> , document.getElementById(‘root‘));

衬着标签东西

import React from ‘react‘; import ReactDOM from ‘react-dom‘; const h1 = <h1>Hello React!</h1>; ReactDOM.render( <div> {h1} </div> , document.getElementById(‘root‘));

衬着数组

import React from ‘react‘; import ReactDOM from ‘react-dom‘; const arr = [ <h1>第1行</h1>, <h2>第2行</h2>, ]; ReactDOM.render( <div> {arr} </div> , document.getElementById(‘root‘));

将普通数组转为 JSX 数组，并衬着到页面中

解决 Warning: Each child in a list should have a unique "key" prop.

要领一：

import React from ‘react‘; import ReactDOM from ‘react-dom‘; //原数组 const arr = [‘html‘,‘css‘,‘vue‘]; //新数组 const newArr = []; //forEach()要领没有返回值 arr.forEach((item,index) => { const temp = <h2 key={index}>{item}</h2> newArr.push(temp); }); ReactDOM.render( <div> {newArr} </div> , document.getElementById(‘root‘));

要领二：

import React from ‘react‘; import ReactDOM from ‘react-dom‘; import TodoList from ‘./TodoList‘; import ‘./style.css‘; //原数组 const arr = [‘html‘,‘css‘,‘vue‘]; ReactDOM.render( <div> {/* map()要领有返回值 */} {arr.map((item,index) => { return <h2 key={index}>{item}</h2> })} </div> , document.getElementById(‘root‘));

React教程：JSX语法根本