建立 React Element

在上一章節中，咱們使用 create-react-app 工具搭建了一個基於 react 的開發環境，那麼從這一章起，咱們就正式開始 react 框架的學習。

打開 my-app 項目，找到 src/index.js 文件，咱們在上一章中提到過，這個文件是整個應用的入口，當頁面刷新時，會主動去加載這個文件，那這裏咱們直接刪掉這個目錄下的其餘文件，只保存 index.js 便可。而後刪除這個文件中的默認代碼，並調用console.log("in")方法在控制檯上進行輸出。

使用 yarn start 命令啓動項目，打開瀏覽器開發者工具，能夠看到控制檯成功打印。使用腳手架工具搭建的開發環境中，已經實現了熱加載的功能，也就是說，當咱們完成 js 代碼的修改以後，不在須要頻繁的經過刷新來查看頁面的效果，在每次修改保存以後，瀏覽器會自動的完成頁面的刷新。好比這裏，我把這裏輸出的字符串稍稍改一下，而後保存，能夠看到控制檯已經將剛剛修改的字符串輸出了。

React Element

好，回到 react 框架的知識點上，咱們知道，一個頁面是由不少的節點元素組合在一塊兒的，比方說，h1 元素，div 元素，ul 元素等等。那實際上，在 react 中，最小的組成單元也是元素，只是咱們將它稱之爲 react element。那麼，咱們如何建立一個 react element 呢？

比方說，這裏我須要在頁面中顯示一個 h1 的元素，裏面是一個 Hello World 字符串，那首先我就須要建立這樣的一個 react element。

react 框架中，有兩個核心對象 React 和 ReactDOM。這裏就能夠經過 React 對象來建立一個 h1 元素，首先引入這個對象。

import React from "react";

而後調用 createElement 方法來建立元素。這個方法的第一個參數是咱們須要建立的節點類型，這裏我須要建立一個 h1 元素，那參數就是 h1，第二個參數是這個元素擁有的屬性設置，沒有屬性的時候能夠直接給 null 的值，第三個參數就是該元素的子元素，這裏咱們須要在 h1 元素下顯示 Hello World，那咱們就能夠把這個字符串當成它的子元素傳遞進去。這個方法的返回值就是一個 react element。咱們能夠在控制檯上打印這個對象。

const h1Ele = React.createElement("h1", null, "Hello World");
console.log(h1Ele)

從控制檯上咱們能夠看到，它就是一個普通的 javascript 對象，這個對象擁有一些屬性，用來描述真實的元素。比方說: 這裏的 type 屬性就是用來描述這個元素的類型，也就是說這個對象映射的是一個 h1 元素，同理，這裏的 props.children 指的就是這個元素下面的子元素，也就是的 Hello World 字符串。

如今，咱們完成了 react element 的建立，下一步就須要將這個元素變成真正的 DOM 節點添加到咱們的頁面中去。這時，就須要使用 ReactDOM 對象來完成真實節點的渲染。首先引入這個對象。

import ReactDOM from "react-dom"

在 ReactDOM 對象上，有一個 render 方法，就是專門用來將 react element 渲染成真實 DOM 的。這個方法接收 2 個參數。第一個參數是咱們須要渲染的 react element，這裏咱們就直接使用剛剛建立的那個 h1 元素；第二個參數是須要將這些元素顯示到頁面的哪一個地方。打開 index.html 頁面，咱們能夠發現，在這個頁面中有一個空白的 div 元素，這個元素咱們稱之爲叫容器，專門用來存放由 react 產生的這些元素的。那麼這裏，咱們就能夠把這個元素當成 render 方法的第二個參數。保存以後，查看頁面，咱們就能夠看到在頁面上顯示了一個 Hello World。

ReactDOM.render(h1Ele, document.querySelector("#root"))

下一步，咱們如何給這個節點增長樣式呢？回到剛剛建立節點的那個方法，實際上，咱們能夠在這個方法的第二個參數中，來設置這個節點的樣式，比方說，我如今須要讓這個 h1 的字體顏色變成紅色，那麼直接指定 style color: red 就能夠了。

const h1Ele = React.createElement("h1", {
  style: {
    color: "red"
  }
}, "Hello World");

除了使用 style 屬性之外，咱們依然能夠經過引入外部樣式表來修飾。這裏我新建一個 css 文件，添加一個 class 選擇器，設置字體大小爲 50px，而後在 index.js 中，咱們使用 import 引入這個 css 文件：

// theme.css
.msg {
  font-size: 50px;
}

// index.js
import "./theme.css"

而後在建立這個元素的時候，指定這個元素的 className 爲 msg 就能夠了，這時咱們能夠看到這個樣式表就應用到當前這個元素了。

const h1Ele = React.createElement("h1", {
  style: {
    color: "red"
  },
  className: "msg"
}, "Hello World");

多個子元素的傳遞方式

接下來，我想再渲染一個列表應該如何操做呢？比方說，在這個列表中要顯示 3 個選項，分別是 HTML，CSS 和 JAVASCRIPT。那咱們第一步應該要建立這些節點。

首先引入 React 對象，使用 createElement 方法建立第一個 li 元素，第一個顯示 HTML，而後再建立兩個相同的元素，分別顯示 CSS 和 JAVASCRIPT。

const li_01 = React.createElement("li", null, "HTML")
const li_02 = React.createElement("li", null, "CSS")
const li_03 = React.createElement("li", null, "JAVASCRIPT")

子元素建立完成以後，咱們再來建立一個 ul 元素，由於這個ul元素有多個子元素，所以，這裏有兩種方式能夠來傳遞子元素，第一種，咱們能夠把每個子元素都當成參數傳遞給 createElement 方法

const ulEle = React.createElement("ul", null, li_01, li_02, li_03)

完成以後，將 ulEle 元素經過 render 方法渲染出來。查看頁面，能夠看到列表已經成功顯示。

第二種方法，咱們還能夠將這些子元素變成一個數組交給 createElement 方法完成渲染，查看頁面，咱們能夠看到列表依然正常顯示，可是控制檯給我們拋出了一個警告:

這個警告的緣由是，若是咱們經過數組迭代的方式來建立子元素的話，咱們須要給每個子元素添加一個key的屬性，並且這個屬性的值，在同級元素中必須是惟一且不變的。那這裏，咱們給每個li元素都增長一個key，值得話，讓他們保證惟一就能夠了。再查看頁面，這時警告就消失了。

const li_01 = React.createElement("li", { key: 0 }, "HTML")
const li_02 = React.createElement("li", { key: 1 }, "CSS")
const li_03 = React.createElement("li", { key: 2 }, "JAVASCRIPT")

固然，這裏咱們還能夠定義一個數組，而後經過迭代數組來產生這些li元素，這樣能夠簡化一下咱們的代碼：

const arr = ["HTML", "CSS", "JAVASCRIPT"]

const liEles = arr.map((item, index) => {
  return React.createElement("li", {
    key: index
  }, item)
})

const ulEle = React.createElement("ul", null, liEles)