文中引用的代码
写一个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库正确构建代码的基本流程，以及库的使用方法，都包含在本文的示例中以供参考了。祝使用愉快！