文中引用的代碼
寫一個react應用程式可能很簡單，但對新手來說，把它加載到web浏覽器中往往很艱難。除了一些特定情況外，在加載前，我們都需要使用建構工具對react進行預處理，例如grunt、gulp或者webpack。本文的示例使用了webpack。webpack運作時使用的配置檔案也如示例中所示。
該配置檔案通知webpack應該從哪裡開始建構應用程式，以及把結果輸出到哪裡。entry屬性告訴webpack應用程式從哪裡開始。在本例子中，應用程式在app檔案夾下初始化，并從一個index子產品開始（.js擴充名是預設的）。然後它把結果輸出到app檔案夾下的bundle.js檔案中。
配置檔案的這一部分處理從哪裡開始和在哪裡結束的問題。然而，我們的代碼也需要在建構過程中進行編譯。這就要加載一個編譯子產品。babel子產品加載器就很适合用來做這個。
筆者認為babel是用于處理react的最簡單且常見的工具。babel把你的javascript腳本編譯成能被大多數浏覽器支援的版本，即便不是所有的浏覽器。通過配置babel，我們可以用它編譯react代碼，也可以編譯用更新的javascript類文法寫成的代碼。
我們在配置檔案中增改了如下子產品加載代碼：
我們為編譯設定了如下屬性：
test屬性通知babel運作任何比對測試标準的内容。根據正規表達式，任何以.js或.jsx作為擴充名的檔案，都會進行處理。
include陣列通知babel在哪些檔案夾下遞歸搜尋檔案。在本文的例子中，即為app/js檔案夾中的所有檔案以及app/index.jsx檔案。
loader是加載器子產品的名字。
query中設定了es2015和react預置程式包的子產品具體設定。
以上就是本示例的建構和編譯過程。現在，我們來看一看代碼。
如果一切建構正常的話，app/index.html在浏覽器中的打開結果，就與上圖類似。頁面中的文本提醒使用者在app.jsx代碼中更新令牌，并且在點選一個連結後檢查其logentries賬戶。單擊連結将發送相應類型的日志條目到logentries.com。logentries标志下的一切都是由react插入的。我們來看一下這一頁面是怎樣建構的。
自然起點就在index.html頁面中。對大多數react應用來說，這一頁面非常簡單和單調。唯一值得注意的是id為“app”的div标簽。這是react本身的插入點。
react應用程式從app/index.jsx開始：
react應用程式的頂層設定了文本及其初始渲染。頁面會加載react、react-dom和app.。react-dom是用來渲染網頁的庫。app是我們在頁面中看到的元件。
渲染方法會渲染“”。這個html标記對應于一開始用“const app=”行導入的子產品的名字。作為一個html标記，“app”通知編譯器把app子產品加載到這個程式空間。
index頁面使用了react的jsx文法。jsx旨在通過語義html格式化react代碼。語義html用标簽來描述其功能及所指。使用app作為标簽是符合語義的，因為它告訴開發者這個标簽的用途。在本例中，它就是用來加載app子產品的。
大多數用例程式都存在于app/js檔案夾下的app.jsx檔案中。這個程式會加載文本、連結以及建立連結點選的功能。頂層部分會将之後應用中需要用到的子產品和變量執行個體化。
第一個子產品，react，是唯一一個被調出卻未以明确方式使用的子產品。這是個特殊情況。react是編譯器頂層所需要的。編譯器需要參考react，才能在渲染功能中正确地解析html标記。
下一個調用的是logger。logentries代碼部分就在logger子產品裡。該子產品是logentries對象的一個簡單接口。最後四個引用，設定了我們會在餘下程式裡當作常用使用的變量。
渲染功能大部分是标準的html和react。對react新使用者來說，唯一不同的可能是style标簽。react編譯器需要把style标簽解析為javascript文字，是以屬性會被{{}}框起來。第一組大括号作為一對例外符号，告訴編譯器把其中内容處理成javascript。第二組大括号表示其中内容是javascript文字。這兩對花括号中的所有内容都要使用駝峰式大小寫（即首字母大寫）才能通過javascript格式編譯。
錨标記是設定功能的地方：
每個錨都使用onclick處理器定義click事件。他們援引在類的底部定義的sendlog函數。大括号告訴編譯器，裡面的内容是javascript代碼。每個處理程式的内容都是類，是以這會指向被執行個體化的app對象。綁定它們可以確定被激活的功能對應于合适的連結（“error”、“warn”、“info”、“log”）。
類中最後一個被調用的函數是sendlog，它是這樣的：
sendlog會調用logger對象中一個名字與其類型對應的方法。click事件處理器可以被轉換為如下僞代碼：
如果你熟悉控制台api或者logentries javascript api，你就會對它很熟悉。
logger.jsx是logentries對象的接口。在寫本文時，logentries對象針對window對象是全局執行個體化的。把logentries對象加入到window意味着使用它不再需要接口。
不過，也有很好的理由來維護接口模式。假若将來logentries從全局範圍中删除了，使用接口可以為我們提供保障。其次，使用全局變量會使未來的維護和開發變得混亂。讓一個對象在接口身後模糊化，并通過引用來使用一個對象執行個體，總比假設存在一個全局對象要思路清晰得多。
代碼如下：
第一行調出logentries庫。請求聲明允許我們在子產品内部建構logentries對象。此外，聲明行告訴編譯器在哪裡找這個庫，并把它捆綁入代碼。
module.exports行被其他子產品用作構造器。是以其他庫，包括我們在上一節中的庫，可以同時聲明和建立logger對象。 本例使用此行的目的是：
使用react的最大挑戰可能是其建構過程，這也正是本文的用處所在。使用logentries庫正确建構代碼的基本流程，以及庫的使用方法，都包含在本文的示例中以供參考了。祝使用愉快！