用 React 整合 LogEntries JavaScript 库

【编者按】本文做者为 David Posin，主要介绍 React 与 LogEntries 间的相互操做。本文系国内 ITOM 管理平台 OneAPM 编译呈现。

众所周知，React.js已经被证明是众多JavaScript架构中的有力竞争者。按理说，它已经成为web开发人员应当考虑的，在当前及将来项目中使用的少数项目库之一。而了解它如何与技术栈中的其余库相集成，是很是重要的一环。若是你目前正在使用LogEntries，或者考虑使用LogEntries，那懂得如何集成React.js和LogEntries就很是关键。本文将阐明他们间的互操做性。

文中引用的代码

本文所引用的代码均可以在GutHub上查看。

构建和编译

写一个React应用程序可能很简单，但对新手来讲，把它加载到Web浏览器中每每很艰难。除了一些特定状况外，在加载前，咱们都须要使用构建工具对React进行预处理，例如grunt、gulp或者webpack。本文的示例使用了webpack。Webpack运行时使用的配置文件也如示例中所示。

Webpack内部使用了Node.js，因此咱们能够访问Node的标准模块。第一行加载的模块，即Path，是用来模糊不一样平台的路径差别的。使用了Path模块，就能够在任何Node支持的文件系统（Windows、Unix、Mac）中进行构建。

该配置文件通知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预置程序包的模块具体设置。

以上就是本示例的构建和编译过程。如今，咱们来看一看代码。

代码

Indexes

若是一切构建正常的话，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.jsx

大多数用例程序都存在于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事件处理器能够被转换为以下伪代码：

onClick={Logger.error('error message')}>Submit Error 
onClick={Logger.warning('warning message')}>Submit Warning 
onClick={Logger.info('info message')}>Submit Info 
onClick={Logger.log('log message')}>Submit Log

若是你熟悉控制台API或者Logentries JavaScript API，你就会对它很熟悉。

Logger.jsx

Logger.jsx是Logentries对象的接口。在写本文时，Logentries对象针对window对象是全局实例化的。把Logentries对象加入到window意味着使用它再也不须要接口。

不过，也有很好的理由来维护接口模式。倘若未来Logentries从全局范围中删除了，使用接口能够为咱们提供保障。其次，使用全局变量会使将来的维护和开发变得混乱。让一个对象在接口身后模糊化，并经过引用来使用一个对象实例，总比假设存在一个全局对象要思路清晰得多。

代码以下：

第一行调出Logentries库。请求声明容许咱们在模块内部构建Logentries对象。此外，声明行告诉编译器在哪里找这个库，并把它捆绑入代码。

module.exports行被其余模块用做构造器。因此其余库，包括咱们在上一节中的库，能够同时声明和建立Logger对象。 本例使用此行的目的是：

根据Logentries文档，Logentries对象经过init命令初始化自身。一旦初始化完成，LogEntries对象就能够返回给调用者使用。这里使用的方法和属性均可以在此文档中找到。

结论

使用React的最大挑战多是其构建过程，这也正是本文的用处所在。使用LogEntries库正确构建代码的基本流程，以及库的使用方法，都包含在本文的示例中以供参考了。祝使用愉快！

本文中所涉及代码都可在Github上找到。

OneAPM Browser Insight 是一个基于真实用户的 Web 前端性能监控平台，能帮助你们定位网站性能瓶颈，实现网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。

本文转自 OneAPM 官方博客

原文地址：https://dzone.com/articles/integrating-the-logentries-javascript-library-with