React教程：JSX文法基礎

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 = Hello React!;

ReactDOM.render(
    <div>
        {h1}
    </div>
, document.getElementById('root'));           

渲染數組

import React from 'react';
import ReactDOM from 'react-dom';

const arr = [
    第1行,
    <h2>第2行</h2>,
];

ReactDOM.render(
    <div>
        {arr}
    </div>
, document.getElementById('root'));           

将普通數組轉為

JSX

數組，并渲染到頁面中

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'));