在第一篇我們順利的搭建了React專案並簡單的了解了React專案的目錄結構，這裡先不用管其他的檔案我們主要看index.html（該檔案在public目錄中）和index.js（該檔案在src目錄中）這兩個檔案。public中的index.html是我們的html入口，而src目錄中的index.js則是我們JS的入口檔案。

​ 入口檔案

index.html是React提供的標準模板不需要改動。所以我們的專案基本就是從src下面的index.js檔案開始的，這裡我們可以看到React使用了es6語法，引入了React和ReactDOM這倆核心庫，然後引入了css和App元件。下面呼叫了ReactDOM中的render函式對元件App進行渲染，這裡用的是JSX語法支援html標籤；第一個引數指定了要渲染的元素，第二個引數指定了要掛載的dom節點（這個root在index.html檔案中被定義了）。

​ App元件

也就是說我們在啟動React專案看到的內容都來自元件App中，React元件由js定義，這裡的App就是當前目錄下的App.js檔案。該檔案通過export default匯出了一個函式，裡面定義了需要渲染的dom元素。

​建立第一個Hell React頁面

接下來我們先來個簡單的入門例項先體驗下React的魅力，把return中的元素都刪掉然後換上我們的“Hello React”。ctrl+S儲存webpack會自動熱更新，切到瀏覽器就可以看到我們的Hell React了。

這裡需要注意的是由於JSX只是一種語法，因此JavaScript的關鍵字class、 for等不能出現在XML中，要使用className、htmlFor代替。

​自定義React元件

現在我們嘗試自己建立一個React元件顯示“I am learning React” ，在src建立一個study.js檔案。為了區分之前的內容我增加了一個P標籤自動來換行顯示內容，這裡我們同樣通過export default匯出了一個study函式。用JSX語法定義元件時一定要引入react，否則會報錯哦！

引用React元件

接下來我們就來引入我們自定義的React元件，元件必須包含在作用域內才能被呼叫；所以在App.js中先通過import引入study元件（.js字尾可以不寫），然後在需要呼叫的地方插入Study標籤即可將對應的元素掛載到當前元素上。這裡需要注意的是引用React 元件首字母必須大寫，且每個元件預設只能有一個根節點，不然會報錯（這個跟Vue中的定義一樣）。

React元件傳遞資料

如果我們需要向元件傳遞引數，可以在元件中使用props物件作為引數，當呼叫該元件的時候為元件附上對應的屬性值，元件在被呼叫的時候可以通過 “props.屬性名”來獲取對應的值了。

這裡動態引數需要通過使用“{} ” 包裹進行傳遞

總結：

以上內容是小編給大家分享的【React實戰002：一個簡單的快速入門例項“Hello React”】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的，在此也非常感謝大家對小編的支援！