Tenho feito muitos experimentos com os dois Reagir e Cloudinary nos últimos seis meses e tem sido incrível: estou aprendendo muito e, ao mesmo tempo, recuperando a ambição e a sede que tinha quando era um jovem desenvolvedor. O React tem sido uma revelação: uma estrutura JavaScript avançada que não complica demais as coisas e me incentivou a aprender mais sobre ESNext e Babel. O Cloudinary me permite fazer coisas incríveis com imagens e mídia, como criar Filtros semelhantes aos do Instagram, transformar imagense muito mais, tudo isso modificando o URL da imagem. O Cloudinary fornece APIs para várias linguagens diferentes (Node.js, Python, PHP, etc.), mas deu um passo adiante e agora oferece um conjunto de componentes React para usar em seu aplicativo React!
Instalando cloudinary-react
O conjunto de componentes React do Cloudinary está disponível por meio do cloudinary-react nome:
yarn add cloudinary-react # or `npm install cloudinary-react`
Use npm install ou yarn add para obter esses componentes.
Componentes do Cloudinary
O Cloudinary fornece CloudinaryContext, Image, Video, e Transformation componentes. Eles estão disponíveis em seu aplicativo usando require ou import:
import { Image, Video, Transformation, CloudinaryContext } from 'cloudinary-react';
Vamos dar uma olhada em cada tipo de componente!
Imagem
O Image é o mais simples dos componentes, permitindo todos os tipos de transformações:
<!-- 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" />
O código acima é transpilado para:
<img alt="Ringo" width="600" src="http://res.cloudinary.com/david-wash-blog/image/upload/c_scale,w_600/ringo">
Observe que o senhor pode adicionar todos os atributos usuais para cada imagem, como alt, title, e assim por diante.
Vídeo
O Video também é muito simples e funciona como o senhor imagina:
<Video cloudName="david-wash-blog" publicId="sample-video" width="800" controls />
Todas as transformações também podem ser aplicadas a vídeos!
Transformação
Image Os componentes podem conter qualquer número de Transformation para modificar a imagem de saída:
<!-- 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>
Documentação de transformação do Cloudinary é uma excelente referência para a incrível variedade de transformações. Se o senhor tiver alguma dúvida sobre como a transformação deve ser adicionada como um atributo, clique no botão Node.js nos exemplos da documentação do Cloudinary para ver quais devem ser suas chaves e valores.
Contexto do Cloudinary
O CloudinaryContext permite o agrupamento inteligente de mídia e efeitos a serem aplicados ao seu conteúdo filho, seja ele Image, Video, Transformation componentes:
<CloudinaryContext cloudName="david-wash-blog" effect="art:aurora" width="300"> <Image publicId="ringo"></Image> <Image publicId="coffee"></Image> <!-- ... --> </CloudinaryContext>
Com o exemplo acima, todos os Image têm o efeito designado por seu pai CloudinaryContextuma maneira incrível de reduzir a repetição de código e manter o JSX organizado! O senhor pode até mesmo empilhar CloudinaryContext componentes:
<CloudinaryContext cloudName="david-wash-blog">
<Image publicId="ringo" />
<Image publicId="coffee" />
<CloudinaryContext fetchFormat="auto" quality="auto">
<Image publicId="ringo" />
<Image publicId="coffee" />
</CloudinaryContext>
</CloudinaryContext>
Criando um experimento rápido no estilo do Instagram
Uma das razões pelas quais eu amo o React (e mais especificamente create-react-app) é que ele me permite criar um aplicativo dinâmico muito rapidamente. Como o Cloudinary oferece algumas dezenas de filtros artísticos, achei que seria divertido criar um aplicativo muito simples, semelhante ao Instagram, usando a biblioteca React do Cloudinary. Então, minutos depois, eu tinha algo:
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>
);
}
}
O resultado é semelhante:
Cloudinary fornece APIs e auxiliares para todas as principais linguagens de programação e agora fornece recursos de biblioteca jQuery e React para facilitar a codificação de seus aplicativos ricos em mídia. Especialmente úteis são as bibliotecas Transformation e CloudinaryContext que permitem que seu código permaneça limpo e breve. cloudinary-react é apenas mais um motivo incrível para procurar o Cloudinary para todas as suas necessidades de mídia!
