如何解决使用Firebase设置带有功能组件的React App
如何使用Firebase设置React应用程序? 使用功能组件和Material UI库,实现挂钩可以保留auth状态。
解决方法
我设法通过FireUP使用SignUP和SignIN为React Dashboard开发了一个简单的样板项目。路由在App.js文件中维护。为了简化流程,项目使用了React功能组件以及Hooks-useState,useEffect。这对初学者真的很有帮助。
该项目是使用Material UI库构建的。使用以下模板:
- 仪表板(https://material-ui.com/getting-started/templates/dashboard/)
- 登录(https://material-ui.com/getting-started/templates/dashboard/)
- 注册(https://material-ui.com/getting-started/templates/sign-up/)
该项目利用了不同的Material-ui组件,例如:
- 日期选择器
- 切换
- 文本字段
- 选择
- 自定义对话框可重用模式
- 图标
开始,
- 从Github中拉回仓库。
- 使用“ npm install”安装所有节点依赖项。
- 使用您的firebase项目凭据更新src / Components / firebase.js文件。
- 运行“ yarn start”或“ npm start”以启动项目。
您最初将被重定向到SignIN页面。选择选项“没有帐户?注册”,您将被重定向到“注册”页面。输入凭据,您将登录到仪表板。
视频演示链接:https://youtu.be/aWUr3GRbhhs
Github存储库:https://github.com/aaygupta/react-dashboard-boilerplate