編寫(xiě)第一個(gè)react應(yīng)用程序

將目錄下的文件、src文件夾、public文件夾清空，項(xiàng)目根目錄下新建一個(gè)文件index.js
在文件中寫(xiě)入以下代碼

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>歡迎進(jìn)入React的世界</h1>,document.getElementById('root')
)

react開(kāi)發(fā)需要引入多個(gè)依賴文件：React和ReactDOM.
ReactDOM.render是 React 的最基本方法用于將模板轉(zhuǎn)為 HTML 語(yǔ)言，并插入指定的 DOM 節(jié)點(diǎn)。
該方法接收兩個(gè)參數(shù)：

• 創(chuàng)建的模板，多個(gè)DOM元素外面需要使用一個(gè)標(biāo)簽進(jìn)行包裹，即有且只能有一個(gè)根元素
• 插入該模板的目標(biāo)位置

react添加樣式

若要為創(chuàng)建的某個(gè)元素增加 class 屬性，不能直接定義 class 而要用 className，因?yàn)?class 是 javascript 中的保留字。
例如：

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(//h1_style樣式是引入的<h1 className="h1_style">歡迎進(jìn)入React的世界</h1>,document.getElementById('root')
)

同樣可以定義行內(nèi)樣式

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(//h1_style樣式是引入的<h1 style={{"backgroundColor":"yellow","color":"red"}}>歡迎進(jìn)入React的世界</h1>,document.getElementById('root')
)

另外，也可以直接將樣式賦給一個(gè)變量，然后將變量的值賦給style

import React from 'react'
import ReactDOM from 'react-dom'let h1_style = {"backgroundColor":"yellow","color":"yellow"
}
ReactDOM.render(//h1_style樣式是引入的<h1 style={h1_style}>歡迎進(jìn)入React的世界</h1>,document.getElementById('root')
)

react.js - 2. 第一個(gè)react應(yīng)用程序并添加樣式 - React技術(shù)棧 - SegmentFault 思否?