React 入門 02 - JSX

前言

在 React 入門 01 - Hello World中，簡單瞭解了下React基本概念以及如何運用到Html中。現在我們學習一下在React中配合使用最多的JSX相關知識。

JSX

JSX，是一個 JavaScript 的語法擴展。比如如下行語句，它既不是單純Html語句也不是普通Java Script。JSX 可以很好地描述 UI 應該呈現出它應有交互的本質形式，在React中配合使用非常流行。

const element = <h1>Hello, world!</h1>;

JSX 嵌入變量、函數表達式

 我們可以聲明基本變量、數組，然後在JSX中使用它。

var users = ['Ria', 'Ming'];
var arr = ['Let\'s start to learn React!']
ReactDOM.render(
    <div> 
        {
            users.map(function(user) {
                return <div><h1>Hello, {user}! </h1></div>
            })

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

variable.html Git Hub 🔗

👆上面例子是在JSX中應用變量，同理可以聲明函數表達式並完成調用。

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Ria',
    lastName: 'Yang'
};

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

function.html Git Hub 🔗

JSX 作爲表達式賦值

JSX 也是一個表達式。在編譯之後，JSX 表達式會被轉爲普通 JavaScript 函數調用，並且對其取值後得到 JavaScript 對象。也就是說，你可以在 if 語句和 for 循環的代碼塊中使用 JSX，將 JSX 賦值給變量，把 JSX 當作參數傳入，以及從函數中返回 JSX。

function greeting(user) {
    if (user) {
        return <h1> Hello, {formatName(user)}! </h1>;
    }

    return <h1> Hello, Stranger! </h1>;
}

expressions.html Git Hub 🔗