在過去的六個(gè)月中，我一直在對(duì)React和Cloudinary進(jìn)行大量試驗(yàn)，這是一個(gè)爆炸式的發(fā)展-我學(xué)到了很多東西，同時(shí)還恢復(fù)了年輕開發(fā)者的野心和渴望。React是一個(gè)啟示：一個(gè)高級(jí)的JavaScript框架，它不會(huì)使事情復(fù)雜化，并鼓勵(lì)我學(xué)習(xí)更多ESNext和Babel。Cloudinary讓我可以通過修改圖像URL對(duì)圖像和媒體進(jìn)行出色的處理，例如創(chuàng)建類似Instagram的濾鏡，轉(zhuǎn)換圖像等。Cloudinary提供了適用于多種不同語言（Node.js，Python，PHP等）的API，但它們又走了一步，現(xiàn)在提供了一 組React組件 供您在React應(yīng)用中使用！

正在安裝 cloudinary-react

Cloudinary的React組件集可通過以下cloudinary-react 名稱獲得：

yarn add cloudinary-react
# or `npm install cloudinary-react`

使用npm install或yarn add 獲取這些組件。

云端組件

Cloudinary提供CloudinaryContext，Image，Video和Transformation組件。它們可在您的應(yīng)用程序中使用require或進(jìn)行使用import：

import { Image, Video, Transformation, CloudinaryContext } from 'cloudinary-react';

讓我們看看每種組件類型！

圖片

該Image 組件是最簡單的組件，允許進(jìn)行所有類型的轉(zhuǎn)換：

<!-- basic usage -->
<Image cloudName="david-wash-blog" publicId="ringo" width="600" crop="scale" alt="Ringo" />

<!-- with a simple effect -->
<Image publicId="ringo" effect="cartoonify:25:50" />

上面的代碼轉(zhuǎn)換為：

<img alt="Ringo" width="600" src="http://res.cloudinary.com/david-wash-blog/image/upload/c_scale,w_600/ringo">

請(qǐng)注意，您可以為每個(gè)圖像添加所有常用屬性，例如alt，title等等。

視頻

該Video 組件也非常簡單，可以按您認(rèn)為的那樣工作：

<Video cloudName="david-wash-blog" publicId="sample-video" width="800" controls />

所有轉(zhuǎn)換也可以應(yīng)用于視頻！

轉(zhuǎn)型

Image 組件可以包含任意數(shù)量的 Transformation 組件以修改傳出圖像：

<!-- Rotate and trim the image, then add text -->
<Image cloudName="david-wash-blog" publicId="ringo">
    <Transformation angle="-45"/>
    <Transformation effect="trim" angle="45" crop="scale" width="600">
        <Transformation overlay="text:Arial_100:Hello" />
    </Transformation>
</Image>

Cloudinary的Transformation文檔是出色的轉(zhuǎn)換廣度的絕佳參考。如果對(duì)如何將轉(zhuǎn)換作為屬性添加有任何疑問，請(qǐng)單擊Node.js Cloudinary文檔示例中的選項(xiàng)卡以查看鍵和值應(yīng)為什么。

Cloudinary上下文

該CloudinaryContext 組件允許的媒體和效果的智能分組被應(yīng)用到其子內(nèi)容，是它Image，Video，Transformation 組件：

<CloudinaryContext cloudName="david-wash-blog" effect="art:aurora" width="300">
   <Image publicId="ringo"></Image>
   <Image publicId="coffee"></Image>
   <!-- ... -->
</CloudinaryContext>

在上面的示例中，所有Image 組件均具有其父級(jí)指定的效果CloudinaryContext，這是一種精簡方法，可減少重復(fù)的代碼并使JSX緊湊而有條理！您甚至可以堆疊CloudinaryContext組件：

<CloudinaryContext cloudName="david-wash-blog">
  <Image publicId="ringo" />
  <Image publicId="coffee" />
  <CloudinaryContext fetchFormat="auto" quality="auto">
    <Image publicId="ringo" />
    <Image publicId="coffee" />
  </CloudinaryContext>
</CloudinaryContext>

創(chuàng)建一個(gè)快速的Instagram風(fēng)格的實(shí)驗(yàn)

我create-react-app之所以喜歡React（尤其是），是因?yàn)樗梢宰屛艺嬲焖俚貥?gòu)建一個(gè)動(dòng)態(tài)應(yīng)用程序。由于Cloudinary提供了幾十個(gè)藝術(shù)濾鏡，我認(rèn)為使用Cloudinary的React庫創(chuàng)建一個(gè)非常簡單的類似Instagram的應(yīng)用程序會(huì)很有趣。幾分鐘后，我有了一些東西：

class App extends Component {

  state = { width: 600, filter: null };

  filters = [
    'al_dente', 'audrey', 'aurora', 'daguerre', 'eucalyptus', 'fes', 'frost',
    'hairspray', 'hokusai', 'incognito', 'linen', 'peacock', 'primavera',
    'quartz', 'red_rock', 'refresh', 'sizzle', 'sonnet', 'ukulele', 'zorro'
  ];

  onPreviewClick(event) {
    this.setState({ filter: event.target.src });
  }

  render() {

    return (
      <div>
        <CloudinaryContext cloudName="david-wash-blog">
          <div className="wrapper">
            <div className="left">
              <Image
                publicId="ringo"
                width="{this.state.width}">
                { this.state.filter && (<Transformation effect={`art:${this.state.filter}`} />) }
              </Image>
            </div>
            <div className="right">
              {this.filters.map(filter => (
                <div className="preview" key={filter}>
                  <Image publicId="ringo" width="{this.state.width}" onClick={this.onPreviewClick}>
                    <Transformation effect={`art:${filter}`} />
                  </Image>
                  <span>{filter}</span>
                </div>
              ))}
            </div>
          </div>
        </CloudinaryContext>
      </div>
    );
  }
}

結(jié)果看起來像：

Cloudinary為每種主要的編程語言提供API和幫助器，現(xiàn)在提供jQuery和React庫資源，使您可以輕松地編寫富含媒體的應(yīng)用程序的代碼。Transformation 和CloudinaryContext 組件特別有用，它們可使您的代碼保持簡潔。  cloudinary-react 這是Cloudinary滿足您所有媒體需求的另一個(gè)絕佳原因！