开发库需要与开发应用程序不同的方法。您必须考虑在其他人的应用程序中使用该库并为其进行设计。React非常适合于此目的。如果要创建的库是另一个库的适配器，则可以动态生成组件的属性定义，以确保它们向前兼容。然而，实现同一目标的方法不止一种，有些公约要遵守，有些则要谨慎不遵守。特别是，我选择使用context函数，尽管它是一个实验性的特性，因为它在您不知道或无法指定库组件的使用方式时非常有用。网络研讨会React框架什么是React？React是Facebook开发的一个JavaScript库，专门将数据呈现为HTML，被Netflix、Imgur、Airbnb等网站广泛使用，当然还有Facebook。为什么开发React SDK？SDK或库为开发人员提供了对底层功能的访问，而不会暴露实现的复杂性。当库使用所部署环境的语法、组件和方法公开功能时，它最有用英寸。英寸对于Cloudinary，我们已经提供了一个可以在任何基于JavaScript的应用程序中使用的Cloudinary JavaScript库。然而，为了支持使用React创建快速响应网站的开发人员，我们希望为他们提供一个方便的React库，他们可以使用它从Cloudinary交付媒体。实际上，我们需要提供React组件，开发人员可以直接将这些组件集成到他们的应用程序中。这些组件反过来将利用Cloudinary核心JavaScript库提供的功能。本教程的其余部分将演示如何开发React库。这将不是一个全面的描述我们的图书馆，而是一个指南，将（希望！）帮助你发展自己的反应图书馆。基础RequirementsCoordinary提供基于云的图像和其他媒体内容的存储、操作和交付服务。因此，Cloudinary React库至少需要从Cloudinary交付媒体资源，并定义对这些资源的转换。该库还应允许开发人员配置Cloudinary服务，并配置Cloudinary帐户（由cloud_name表示）以交付资源从。因此我们的库版本1.0的范围是：配置图像标记变换参数我在我们的存储库中为这篇文章添加了代码示例。要查看代码，请发出以下命令命令：复制到剪贴簿克隆https://github.com/cloudinary/cloudinary-reactgit checkout library-how-to-step-1您会在下面每个部分的开头找到一个类似的命令行。使用它来查看部分。获取设置projectJavaScript是ECMAScript规范的实现，支持不同浏览器和浏览器版本的ES的不同版本。作为一个库开发人员，你希望你的库在尽可能多的客户机上得到支持，而现在，这意味着要使用ES5（更多）。然而，虽然可以使用纯ES5编写React程序，但React通常使用ES6语法和JSX，全部用webpack打包。ES6（也称为EcmaScript 6或ES2015）为JavaScript引入了许多新特性，包括类和作用域变量。另一方面，JSX提供了一种在JavaScript中包含HTML代码的便捷方法。当开发一个库时，你不可能总是知道如何利用它。因此，我们需要为开发人员提供可以直接访问的源代码，以及可以直接在浏览器中导入的编译的JavaScript分发文件。为了利用这些功能，项目中必须包含几个库：React库。Babel-将ES6和JSX转换为更广泛支持的ES5。Webpack-打包javascript应用程序，并提供一个开发服务器。云数据库JavaScript库（duh！）。Babel和Webpack都需要一个配置文件。您可以在中查看配置示例https://github.com/cloudinary/cloudinary-react/tree/library-how-to-step-1.Folder结构每个组件将驻留在自己的文件夹中。A包.json文件也包含在每个文件夹中，以允许使用"import"。/folder_name'；"语法，而不是更详细的"import"。/folder_name/filename'；"风格。安另一种方法是每个组件有一个JS文件。使用此方法时，还需要包括索引.js导出组件。那里是每种方法的利弊，但我将把讨论留给另一种方法一天。创造图像组件copy to clipboardgit checkout library-how-to-step-2我们将实现的第一个组件将用于显示图像。图像组件应：接受配置参数。接受转换参数。接受映像公共ID（映像的唯一标识符）。使用构造的URL呈现

标记以显示图像。我们将从定义一个简单的图像组件开始。组件将接受一个云名称、公共ID和维度，然后创建一个

标记来呈现图像。React组件可以定义为函数或类。我们将把所有Cloudinary组件定义为类。讨论了函数法与类法的区别给，收到到剪贴板从"React"导入React，{Component，PropTypes}；从'cloudinary core'导入cloudinary；导出默认类图像扩展反应组分{建造师（道具）{超级（道具）；}渲染（）{设cl=cloudinary.cloudinary.new（{云名称：this.props.cloudName});var{publicId，width，height}=这个。道具;变量url=目录url（publicId，{宽，高，裁剪："scale"}）；返回(

);}}图像.propTypes= {云名称：PropTypes.string.is必需,公共ID：PropTypes.string.is必需,宽度：PropTypes.编号,身高：PropTypes.编号};Image.defaultProps= {};我们的组件非常简单。它声明了4个属性以及它们的类型以及它们是否是必需的。render方法在需要呈现组件时调用，它使用属性值生成Cloudinary URL，并返回一个带有该URL的

标记网址。看到了吗就像应用程序一样，我们不能简单地运行库来查看结果。为了测试它，我们将创建一个名为图像.html在"样品"下面文件夹。复制到剪贴板在