這個有趣的標(biāo)簽語法既不是字符串也不是HTML法绵。它被稱為JSX秧骑,它是JavaScript的語法擴展渣淤。我們建議將它與React一起使用來描述UI應(yīng)該是什么樣子均抽。JSX可能會提醒您一種模板語言,但它具有JavaScript的全部功能取具。
上面的引用是 React
官方文檔里對 JSX
語法的描述脖隶,今天就介紹一下 JSX
語法。
使用的還是之前的項目文件和代碼者填,打開程序的入口文件 index.js
文件浩村。
./src/index.js
:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
在最后一行的 rander
方法中,第一個參數(shù)是 <App />
占哟,跟我們平時寫的 html
標(biāo)簽差不多的代碼塊心墅,它的意思是使用 App
這個組件酿矢。
我們打開 App.js
這個文件,這里面是 App
組件的主要內(nèi)容怎燥。這個組件渲染的內(nèi)容瘫筐,是由下面的 rander
函數(shù)返回的結(jié)果所決定的。
./src/App.js
:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
export default App;
上面 rander
函數(shù)返回了一個 h1
標(biāo)簽铐姚,標(biāo)簽里的內(nèi)容是 Hello World
策肝。
正常情況下,我們的標(biāo)簽是寫在 html
文件里的隐绵,現(xiàn)在我們把這種標(biāo)簽寫在了 js
文件里之众。在 React
中, js
文件中寫的這些 html
標(biāo)簽就是我們的 JSX
語法依许。
在 React
中棺禾,我們不僅僅只是可以用 html
現(xiàn)有的標(biāo)簽,還可以使用自己定義的標(biāo)簽峭跳。
在一開是我們看的 index.js
文件中膘婶,有一個 <App />
的語法,這個就是我們自定義的標(biāo)簽蛀醉。在 JSX
語法中悬襟,如果我們要使用自己創(chuàng)建的組件,我們直接通過這種標(biāo)簽形式來使用我們定義的組件名拯刁。
import App from './App';
這句語句中 import
后面的 App
就是我們定義的標(biāo)簽名脊岳。
特別注意,我們定義的標(biāo)簽名是有特定的規(guī)則的筛璧,必須是大寫字母開頭逸绎。
在 React
中,當(dāng)你看到大寫字母開頭的標(biāo)簽夭谤,你就會知道它是一個組件,全是小寫字母的標(biāo)簽就是 html
中所使用的標(biāo)簽巫糙。
JSX
最基礎(chǔ)的語法就這些朗儒,希望對大家有幫助。