switter React+Firebase微型推特克隆项目

用 React 搭个 Twitter 出来,听起来是不是有点疯狂?但这个叫的小项目,还真就这么干了。用的还是熟悉的ReactFirebase,功能也比较完整,发推、登录、存储全都安排上了。结构清晰,页面响应也快,整体开发体验还挺顺手的。

项目是用Create React App起手的,脚手架部分基本没魔改。开发时跑npm start就能看到页面,自动刷新也有,前期调试比较轻松。部署用npm run build,打包出来的文件也做了优化,直接扔 CDN 就能上线。

Firebase主要用来认证和数据存储。登录逻辑写得比较清楚,哪怕你第一次用 Firebase,也能看懂流程。像发推功能,其实就是往一个集合里加数据,改动后还能实时同步,挺适合学学 Firestore 的基本用法。

还有一点要提,项目里用到了npm run eject,算是把配置全都暴露出来了。想玩定制 Webpack 配置的,可以趁这个机会摸一摸。但要小心,eject 之后就没法回头了,最好提前做好 Git 提交。

switter比较适合有 React 基础、想进一步熟悉 Firebase 的朋友。也蛮适合作为自己的练手项目,学完说不定你也能整出个“Xwitter”来?

如果你对项目搭建和 React 生态还不熟,可以先看看这篇Create React App 初始化教程,理解起来会更快。

zip
switter-master.zip 预估大小:20个文件
folder
switter-master 文件夹
file
.gitignore 314B
file
README.md 3KB
folder
public 文件夹
file
manifest.json 492B
file
robots.txt 67B
file
logo192.png 5KB
file
logo512.png 9KB
file
index.html 2KB
file
favicon.ico 4KB
file
package.json 870B
folder
src 文件夹
folder
components 文件夹
file
Router.js 1KB
file
Navigation.js 317B
file
App.js 778B
folder
routes 文件夹
file
EditProfile.js 107B
file
Profile.js 360B
file
Home.js 1KB
file
Auth.js 2KB
file
fbase.js 895B
file
index.js 237B
file
jsconfig.json 83B
file
package-lock.json 698KB
zip 文件大小:197.27KB