五分鐘學習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應用。