React-Giphy搜索并收藏GIF工具
搜索 GIF 的神器里，react-giphy算是比较轻巧好用的。界面简单清爽，功能也挺直接：搜索 GIF、点开看大图、保存收藏，全都不费劲。适合做 demo，也适合你快速搭个原型玩玩。
Giphy API的接入也不复杂，先去官网申一个 API key，在项目根目录建个config.js，写上：
module.exports = {
API_KEY: 'YOUR API KEY'
}接下来就顺：npm install装依赖，npm run webpack打包完，直接打开build/index.html就能用。
搜索功能响应也挺快的，默认还会加载当前的趋势 GIF，不用你自己手动搜也有内容可看。点 GIF 还能弹出模态框看原图，蛮适合做“GIF 收藏夹”之类的小工具。
项目结构清晰，用的是React配Webpack，新手上手也没太多门槛。源码在 GitHub 上，克隆下来就是：
git clone git@github.com:bnguyen212/react-giphy.git
cd react-giphy
npm install如果你想了解更多 Webpack 配置，可以顺带看看这篇webpack-react，讲得还蛮清楚的。
，想练练React和 API 对接的操作，或者你刚学完 Webpack 打包流程，react-giphy 挺适合拿来练手。如果你懒得搭 UI、还想玩点图，它就是个不错的开头。
文件大小：457.5KB
评论区