五分鐘學習React(二):我的第一個Hello World
我的第一個React應用
接著我們上一期所講的內容,通過create-react-app
腳手架創建的應用,它是基於ES6的語法生成的。我們清空src目錄下的文件,並分別創建index.js和index.css文件。
cd my-app/src
rm -rf *
touch index.js
touch index.css
現在我們編輯index.js文件,
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
啟動npm start,頁面上顯示:
代碼解釋
Hello World應用雖然簡單,但是已經把react的基本架構包含在內。我們解釋下每行的意義。
第一行:import React from ‘react‘
中的react是React庫的入口文件,React庫的頂級API都在這個文件中定義。包括React組件(components)、創建React元素(createElement)等
第二行:import ReactDOM from ‘react-dom‘
中的react-dom包提供了應用頂層使用的DOM特定方法,如render()、hyrate()、unmountComponentAtNode()、findDOMNode()、createPortal()等
第三行: 引入css文件使index.js中的react-dom能夠被index.css渲染。
第四-七行:
ReactDom.render()方法的定義如下:
ReactDOM.render(
element,
container,
[callback]
)
這段代碼的意思是將<h1>Hello, world!</h1>
這個React元素放入一個id為root的container容器中中。這裏值得註意的是<h1>Hello, world!</h1>
並不是傳統意義上的HTML模板,而是叫JSX的一個React擴展文件。
在這一期我們講了一個基本的React應用,它是基於ES6的語法生成的。它通過render的方法將React元素加載到container中。
下一期我們將介紹下非ES6的React應用。
五分鐘學習React(二):我的第一個Hello World