{"id":38187,"date":"2023-09-19T00:53:59","date_gmt":"2023-02-23T14:26:07","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%8f%e9%81%8e%e9%96%8b%e7%99%bc2023%e5%b9%b4%e5%ba%a6%e7%9a%84%e3%80%90react-x-firebase%e3%80%91todo%e6%87%89%e7%94%a8%e7%a8%8b%e5%bc%8f%ef%bc%8c%e4%be%86%e5%ad%b8%e7%bf%92%e3%80%82\/"},"modified":"2024-05-04T00:25:42","modified_gmt":"2024-05-03T16:25:42","slug":"%e9%80%8f%e9%81%8e%e9%96%8b%e7%99%bc2023%e5%b9%b4%e5%ba%a6%e7%9a%84%e3%80%90react-x-firebase%e3%80%91todo%e6%87%89%e7%94%a8%e7%a8%8b%e5%bc%8f%ef%bc%8c%e4%be%86%e5%ad%b8%e7%bf%92%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%8f%e9%81%8e%e9%96%8b%e7%99%bc2023%e5%b9%b4%e5%ba%a6%e7%9a%84%e3%80%90react-x-firebase%e3%80%91todo%e6%87%89%e7%94%a8%e7%a8%8b%e5%bc%8f%ef%bc%8c%e4%be%86%e5%ad%b8%e7%bf%92%e3%80%82\/","title":{"rendered":"\u900f\u904e\u958b\u767c2023\u5e74\u5ea6\u7684\u3010React x Firebase\u3011Todo\u61c9\u7528\u7a0b\u5f0f\uff0c\u4f86\u5b78\u7fd2"},"content":{"rendered":"

\u9996\u5148<\/h1>\n

\u8fd9\u6b21\u4f5c\u4e3a\u5b66\u4e60React\u7684\u7b2c\u4e00\u6b65\uff0c\u6211\u5c1d\u8bd5\u521b\u5efa\u4e86\u4e00\u4e2a”Todo\u5e94\u7528”\u3002\u6211\u4f7f\u7528\u4e86\u4e24\u5e74\u524d\u5728YouTube\u4e0a\u7684\u89c6\u9891\u4e2d\u65e0\u6cd5\u4f7f\u7528\u7684\u4ee3\u7801\u7b49\u3002<\/p>\n

 <\/p>\n

\u6211\u5011\u7684\u76ee\u6a19\u662f\u5be6\u73fe\u300c\u767b\u5165\/\u767b\u51fa\u529f\u80fd\u300d\u4ee5\u53ca\u76f8\u95dc\u7684\u300c\u7528\u6236\u72c0\u614b\u7ba1\u7406\u300d\u3002\u901a\u904e\u4f7f\u7528Firebase Firestore\uff0c\u6211\u5011\u53ef\u4ee5\u5be6\u73fe\u4fdd\u5b58\u300c\u7528\u6236\u4fe1\u606f\u300d\u548c\u300c\u5f85\u8fa6\u4e8b\u9805\u4fe1\u606f\u300d\u7684\u529f\u80fd\u3002<\/p>\n

\u7531\u4e8e\u5c1a\u672a\u7f16\u5199Firestore\u89c4\u5219\uff0c\u6b64\u7f51\u7edc\u5e94\u7528\u7a0b\u5e8f\u5c1a\u4e0d\u5b8c\u5584\uff0c\u4f46\u6700\u7ec8\u4ea7\u54c1\u5982\u4e0b\u6240\u793a\u3002<\/p>\n

\u8fd9\u6b21\u7684\u6210\u54c1
\nhttps:\/\/react-todolist-a2dda.web.app\/<\/p>\n

\"TodoApp<\/div>\n

\u5b9e\u9645\u64cd\u4f5c\u6307\u5357\u7684\u8d44\u6599<\/h1>\n

\u6211\u76f8\u4fe1\u603b\u4f1a\u6709\u4eba\u60f3\u8981\u5b66\u4e60\uff0c\u6240\u4ee5\u6211\u5c06\u5b9e\u8df5\u64cd\u4f5c\u7684\u6b65\u9aa4\u6309\u7167\u6bcf\u4e2a\u9636\u6bb5\u8fdb\u884c\u4e86\u8bf4\u660e\u3002<\/p>\n

\u5982\u679c\u53ea\u662f\u5236\u4f5c\u7684\u8bdd\uff0c\u53ef\u4ee5\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5e76\u4fee\u6539\u6570\u503c\u6765\u5b8c\u6210\uff0c\u4f46\u6211\u4e2a\u4eba\u8ba4\u4e3a\u4e86\u89e3\u5236\u4f5c\u8fc7\u7a0b\u5728\u7f16\u7a0b\u5b66\u4e60\u4e2d\u4e5f\u662f\u91cd\u8981\u7684\uff0c\u6240\u4ee5\u6211\u4f1a\u628a\u5b83\u5199\u4e0a\u3002<\/p>\n

\u7531\u65bc\u9019\u7bc7\u6587\u7ae0\u7684\u89e3\u8aaa\u4e0d\u8db3\uff0c\u6211\u6703\u88dc\u5145\u4e00\u4e9b\u5167\u5bb9\u3002<\/p>\n

\u2191\u2191\u2191\u6211\u5c06\u89e3\u91caCodeLab\u5f62\u5f0f\u7684\u89e3\u91ca\u65b9\u6cd5\u3002<\/p>\n

React\u7684\u53c2\u8003\u8d44\u6599<\/h1>\n

\u5b98\u65b9\u7f51\u7ad9<\/h3>\n

\u5728\u5b66\u4e60React\u7684\u8fc7\u7a0b\u4e2d\uff0c\u6211\u4e5f\u7ecf\u5e38\u8bbf\u95eeReact\u5b98\u65b9\u7f51\u7ad9\u3002\u6211\u8ba4\u4e3a\uff0c\u57fa\u672c\u4e0a\u5728\u8fd9\u91cc\u67e5\u627e\u6240\u9700\u7684\u4fe1\u606f\u662f\u5f88\u597d\u7684\u3002<\/p>\n

 <\/p>\n

\u4e2a\u4eba\u89c2\u70b9\u662f\uff0c\u503c\u5f97\u6ce8\u610f\u7684\u7f51\u7ad9<\/h3>\n

\u5f53\u4f60\u60f3\u76f4\u89c2\u5730\u7406\u89e3React\u662f\u4ec0\u4e48\u65f6\uff0c\u4ee5\u4e0b\u8d44\u6599\u662f\u5f88\u597d\u7684\u53c2\u8003\u3002
\n\u5728\u5f00\u59cb\u5b66\u4e60\u4e4b\u524d\uff0c\u6211\u5efa\u8bae\u5148\u8f7b\u677e\u5730\u6d4f\u89c8\u4e00\u4e0b”#01″\u548c”#02″\uff0c\u6216\u8005\u5c1d\u8bd5\u4e00\u4e9b\u5b9e\u8df5\u3002<\/p>\n

\u8fd9\u4efd\u8d44\u6599\u662f\u5728\u300c2018\u5e74\u300d\u64b0\u5199\u7684\u3002\u5c3d\u7ba1\u6839\u672c\u90e8\u5206\u6ca1\u6709\u592a\u5927\u53d8\u5316\uff0c\u4e0d\u5efa\u8bae\u5b8c\u5168\u6309\u539f\u6837\u7ee7\u7eed\u8fdb\u884c\u3002<\/div>\n

 <\/p>\n

\u5fc5\u987b\u7684\u63a7\u5236\u53f0\u64cd\u4f5c\u548c\u4ee3\u7801\u5b8c\u6210\u54c1<\/h1>\n

\u9700\u8981\u4f5c\u4e3a\u524d\u63d0\u6761\u4ef6\u7684\u4e1c\u897f<\/h2>\n

\u67e5\u770b\u8282\u70b9\u7248\u672c<\/h3>\n
\u8bf7\u5728Windows\u7684cmd\u547d\u4ee4\u63d0\u793a\u7b26\u4e2d\u6267\u884c\u547d\u4ee4\u5e76\u8fdb\u884c\u786e\u8ba4\uff0c<\/div>\n
node -v<\/span>\r\n<\/code><\/pre>\n
\u6211\u8ba4\u4e3a\u5728VScode\u7684cmd\u5185\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u662f\u66f4\u597d\u7684\u9009\u9879\u3002<\/h2>\n
npm create-react-app . = \u4f7f\u7528npm\u521b\u5efa\u4e00\u4e2aReact\u5e94\u7528\u7a0b\u5e8f\u3002
\nnpm create-react-app \u30d5\u30a1\u30a4\u30eb\u540d = \u4f7f\u7528npm\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a\u30d5\u30a1\u30a4\u30eb\u540d\u7684React\u5e94\u7528\u7a0b\u5e8f\u3002<\/h3>\n
\u5b66\u4e60React\u65f6\uff0c\u8bf7\u5148\u6267\u884c\u8fd9\u4e2a\u547d\u4ee4\u3002<\/p>\n
 <\/p>\n
\u5728\u5f53\u524d\u6587\u4ef6\u5939\u4e0b\u521b\u5efa\u2193\u2193\u2193<\/p>\n
npm creat-react-app .<\/span>\r\n<\/code><\/pre>\n
\u5982\u679c\u4f60\u5728\u4f7f\u7528cd\u547d\u4ee4\u7b49\u79fb\u52a8\u5230\u4e00\u4e2a\u6587\u4ef6\u5939\u5185\u90e8\uff0c\u60f3\u8981\u65b0\u5efa\u4e00\u4e2a\u6587\u4ef6\u5939\u7684\u8bdd\u2193\u2193\u2193<\/p>\n
npm creat-react-app <\u30d5\u30a1\u30a4\u30eb\u540d>\r\n<\/code><\/pre>\n
\u4f7f\u7528npm\u5b89\u88c5react-router-dom<\/h3>\n
\u8fd9\u662f\u7f51\u7ad9\u5185\u9875\u9762\u8df3\u8f6c\u6240\u5fc5\u9700\u7684\u4e1c\u897f\u3002<\/p>\n
\u5b89\u88c5bootstrap\u7684npm\u5305<\/h3>\n
\u8fd9\u662f\u7f51\u7ad9\u88c5\u9970\u6240\u9700\u7684\u7269\u54c1\u3002<\/p>\n
\u6570\u636e\u5e93\u8bbe\u8ba1<\/h1>\n
\"React-TodoApp-Firestore.jpg\"<\/div>\n
\u5bf9\u4e8e\u7528\u62371\u6765\u8bf4\uff0c\u4ed6\u6709\u591a\u4e2a\u5f85\u529e\u4e8b\u9879\u7684\u4fe1\u606f\u3002<\/p>\n
\u6587\u4ef6\u7ed3\u6784<\/h1>\n
\u5728\u8fd9\u91cc\u8fd9\u5927\u90e8\u5206\u9700\u8981\u521b\u5efa\u7684\u6587\u4ef6\u90fd\u6709\u4e86\uff0c\u5b9e\u9645\u4e0a\u4f7f\u7528create-react-app\u547d\u4ee4\u4f1a\u751f\u6210\u4e00\u4e9b\u6587\u4ef6\u548c\u6587\u4ef6\u5939\uff0c\u4f46\u4e0d\u9700\u8981\u7684\u53ef\u4ee5\u5220\u9664\u3002<\/p>\n
C:react-todolist\/src\r\n\u2502  App.css\r\n\u2502  App.js\r\n\u2502  index.css\r\n\u2502  index.js\r\n\u2502  reportWebVitals.js\r\n\u2502  setupTests.js\r\n\u2502\r\n\u251c\u2500Components\r\n\u2502      Header.js\r\n\u2502      Home.js\r\n\u2502      IndividualTodo.js\r\n\u2502      Login.js\r\n\u2502      Modal.js\r\n\u2502      NotFound.js\r\n\u2502      Signup.js\r\n\u2502      Todos.js\r\n\u2502\r\n\u251c\u2500images\r\n\u2502      TodoAppicon.png\r\n\u2502\r\n\u2514\u2500services\r\n        firebase.config.js\r\n<\/code><\/pre>\n
\u4ee3\u7801\u7684\u5b8c\u6574\u4ea7\u54c1 (Code’s finished product)<\/h1>\n
\u5982\u679c\u4f60\u6309\u7167\u5b9e\u9645\u64cd\u4f5c\u6307\u5357\u7684\u8d44\u6599\u8fdb\u884c\u64cd\u4f5c\uff0c\u57fa\u672c\u4e0a\u5e94\u8be5\u4e0d\u4f1a\u6709\u95ee\u9898\u3002<\/p>\n
\u53ea\u9700\u8fdb\u884c\u5fc5\u8981\u7684\u5b89\u88c5\uff0c\u521b\u5efa\u6587\u4ef6\u5939\u548c\u6587\u4ef6\uff0c\u7136\u540e\u590d\u5236\u7c98\u8d34\uff0c\u5c31\u53ef\u4ee5\u5b8c\u6210\u4e86\u3002<\/p>\n
\u6e90\u4ee3\u7801 \/ App.js<\/h2>\n
App.jsapp.jsx
\n\u4ece’react’\u4e2d\u5bfc\u5165React\u548cComponent
\n\u4ece’.\/index.css’\u4e2d\u5bfc\u5165’.\/Components\/Home’\u548c’.\/Components\/Login’\u548c’.\/Components\/Signup’\u548c’.\/Components\/NotFound’\u5e76\u547d\u540d\u4e3aHome\u548cLogin\u548cSignup\u548cNotFound
\n\u4ece’.\/services\/firebase.config’\u4e2d\u5bfc\u5165auth\u548cdb
\n\u4ece’firebase\/firestore’\u4e2d\u5bfc\u5165doc\u548cgetDoc\u548cdeleteDoc\u548cquery\u548cwhere\u548ccollection\u548conSnapshot
\n\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aApp\u7684\u7c7b\uff0c\u7ee7\u627fComponent\u7c7b<\/p>\n
\u72b6\u6001 = {
\ncurrentUser: null,
\ntodos: [],
\neditTodoValue: null
\n}<\/p>\n
componentDidMount() {
\nauth.onAuthStateChanged(user => {
\nif (user) {
\ngetDoc(doc(db, ‘users’, user.uid)).then(snapshot => {
\nthis.setState({
\ncurrentUser: snapshot.data().userName
\n})
\n})
\n}
\nelse {
\nconsole.log(“\u672a\u767b\u5f55\u7528\u6237”)
\n}
\n})<\/p>\n
auth.onAuthStateChanged(user => {
\nif (user) {
\nconst todoList = [];
\nconst q = query(
\ncollection(db, ‘todos of’ + user.uid),
\nwhere(‘userId’, ‘==’, user.uid)
\n);
\nconst unsubscribe = onSnapshot(q, (snapshot) => {
\nsnapshot.docChanges().forEach((change) => {
\nif (change.type === ‘added’) {
\ntodoList.push({
\nid: change.doc.id,
\nTodo: change.doc.data().Todo,
\n});
\n}
\nif (change.type === ‘removed’) {
\n\/\/console.log(change.type);
\nfor (let i = 0; i < todoList.length; i++) { if (todoList[i].id === change.doc.id) { todoList.splice(i, 1); } } } }); \/\/ console.log(‘\u5f85\u529e\u4e8b\u9879\u5217\u8868:’, todoList); this.setState({ todos: todoList }); }); return unsubscribe; } else { console.log(‘\u672a\u767b\u5f55\u7528\u6237’); } }); } deleteTodo = (id) => {
\n\/\/ console.log(id);
\nauth.onAuthStateChanged((user) => {
\nif (user) {
\nconst docRef = doc(db, ‘todos of’ + user.uid, id);
\ndeleteDoc(docRef)
\n.then(() => {
\nconsole.log(‘\u6587\u6863\u5220\u9664\u6210\u529f\uff01’);
\n})
\n.catch((error) => {
\nconsole.error(‘\u5220\u9664\u6587\u6863\u65f6\u51fa\u9519: ‘, error);
\n});
\n} else {
\nconsole.log(‘\u672a\u767b\u5f55\u7528\u6237’);
\n}
\n});
\n};<\/p>\n
editModal = (obj) => {
\nthis.setState({
\neditTodoValue: obj
\n})
\n}<\/p>\n
updateTodoHandler = (editTodo, id) => {
\n\/\/ console.log(editTodo, id);
\nconst todoList = this.state.todos;
\nfor(let i=0;i<todoList.length;i++){
\nif(todoList[i].id===id){
\ntodoList.splice(i,1,{id,Todo: editTodo});
\n}
\nthis.setState({
\ntodos:todoList
\n})
\n}
\n}<\/p>\n
render() {
\n\u8fd4\u56de (<\/p>\n
} \/>
\n} \/>
\n} \/>
\n} \/><\/p>\n
)
\n}
\n}<\/p>\n
\u5bfc\u51fa\u9ed8\u8ba4\u7684App<\/p>\n<\/details>\n
\u6e90\u7801\/\u7d22\u5f15.css<\/h2>\n
\u7d22\u5f15.css
\n* {
\n\u8fb9\u8ddd: 0;
\n\u586b\u5145: 0;
\n}div.\u5305\u88c5\u5668 {
\n\u6a2a\u5411\u6ea2\u51fa: \u9690\u85cf;
\n\u7eb5\u5411\u6ea2\u51fa: \u81ea\u52a8;
\n}<\/p>\n
\/* \u5934\u90e8 *\/
\n.\u5934\u90e8-\u76d2\u5b50 {
\n\u5bbd\u5ea6: 100%;
\n\u9ad8\u5ea6: \u81ea\u52a8;
\n\u586b\u5145: 50px;
\n\u663e\u793a: \u5f39\u6027;
\n\u5bf9\u9f50\u5185\u5bb9: \u7a7a\u9699\u5206\u5e03;
\n\u5bf9\u9f50\u9879\u76ee: \u5c45\u4e2d;
\n\u80cc\u666f\u989c\u8272: #0170ad;
\n}<\/p>\n
@media(max-width:768px){
\n.\u5934\u90e8-\u76d2\u5b50{
\n\u5f39\u6027\u65b9\u5411: \u5782\u76f4;
\n\u5bf9\u9f50\u5185\u5bb9: \u5c45\u4e2d;
\n}
\n}<\/p>\n
.\u5934\u90e8-\u76d2\u5b50 .\u5de6\u4fa7 {
\n\u5f39\u6027: 1;
\n\u663e\u793a: \u5f39\u6027;
\n\u5bf9\u9f50\u5185\u5bb9: \u5f39\u6027\u5f00\u59cb;
\n\u5bf9\u9f50\u9879\u76ee: \u5c45\u4e2d;
\n}<\/p>\n
@media(max-width: 768px){
\n.\u5934\u90e8-\u76d2\u5b50 .\u5de6\u4fa7{
\n\u5bbd\u5ea6: 100%;
\n\u5f39\u6027\u65b9\u5411: \u5782\u76f4-\u53cd\u5411;
\n\u5bf9\u9f50\u5185\u5bb9: \u5c45\u4e2d;
\n\u6587\u672c\u5bf9\u9f50: \u4e2d\u5fc3;
\n\u4e0b\u8fb9\u8ddd: 20px;
\n}
\n}<\/p>\n
.\u5934\u90e8-\u76d2\u5b50 .\u5de6\u4fa7 .\u56fe\u50cf {
\n\u5bbd\u5ea6: 170px;
\n\u9ad8\u5ea6: 170px;
\n}<\/p>\n
.\u5934\u90e8-\u76d2\u5b50 .\u5de6\u4fa7 .\u56fe\u50cf \u56fe\u7247 {
\n\u5bbd\u5ea6: 100%;
\n\u9ad8\u5ea6: 100%;
\n}<\/p>\n
.\u5934\u90e8-\u76d2\u5b50 .\u5de6\u4fa7 .\u5185\u5bb9 {
\n\u989c\u8272: #fff;
\n}<\/p>\n
.\u5934\u90e8-\u76d2\u5b50 .\u5de6\u4fa7 .\u5185\u5bb9 .\u5927\u6807\u9898 {
\n\u5b57\u4f53\u5927\u5c0f: 42px;
\n}<\/p>\n
.\u5934\u90e8-\u76d2\u5b50 .\u5de6\u4fa7 .\u5185\u5bb9 .\u5c0f\u6807\u9898 {
\n\u5b57\u4f53\u5927\u5c0f: 24px;
\n}<\/p>\n
.\u5934\u90e8-\u76d2\u5b50 .\u53f3\u4fa7 {
\n\u5f39\u6027: 1;
\n\u663e\u793a: \u5f39\u6027;
\n\u5f39\u6027\u65b9\u5411: \u5782\u76f4;
\n\u5bf9\u9f50\u5185\u5bb9: \u5c45\u4e2d;
\n\u5bf9\u9f50\u9879\u76ee: \u5c45\u4e2d;
\n}<\/p>\n
@media(max-width:768px){
\n.\u5934\u90e8-\u76d2\u5b50 .\u53f3\u4fa7{
\n\u5bbd\u5ea6: 100%;
\n\u6587\u672c\u5bf9\u9f50: \u4e2d\u5fc3;
\n}
\n}<\/p>\n
.\u5934\u90e8-\u76d2\u5b50 .\u53f3\u4fa7 .\u6309\u94ae, .\u5934\u90e8-\u76d2\u5b50 .\u53f3\u4fa7 .\u6309\u94ae:hover{
\n\u5bbd\u5ea6: 100px;
\n\u4e0b\u8fb9\u8ddd: 5px;
\n\u989c\u8272: #fff;
\n\u6587\u672c\u88c5\u9970: \u65e0;
\n}<\/p>\n
.\u65e5\u671f-\u533a\u5757{
\n\u989c\u8272: #fff;
\n}<\/p>\n
.\u65e5\u671f-\u533a\u5757 span{
\n\u5de6\u8fb9\u8ddd: 4px;
\n}<\/p>\n
\/* \u6ce8\u518c *\/
\n@media(max-width:539px){
\n.\u6ce8\u518c{
\n\u5bbd\u5ea6:100%
\n}
\n}<\/p>\n
.\u9519\u8bef-\u6d88\u606f{
\n\u989c\u8272: \u7ea2\u8272;
\n\u5bbd\u5ea6:100%;
\n\u5b57\u4f53\u5927\u5c0f:14px;
\n\u5b57\u4f53\u7c97\u7ec6: 600;
\n}<\/p>\n
.\u6b22\u8fce-\u533a\u5757{
\n\u989c\u8272: #fff;
\n\u5b57\u6bcd\u95f4\u8ddd: 0.09em;
\n}<\/p>\n
\/* \u5f85\u529e\u4e8b\u9879 *\/
\n.\u5f85\u529e\u4e8b\u9879{
\n\u80cc\u666f\u989c\u8272: #e4e4e4;
\n\u5b57\u4f53\u7c97\u7ec6: 600;
\n\u5b57\u4f53\u5927\u5c0f: 16px;
\n\u8fb9\u8ddd: 10px 0px;
\n\u586b\u5145: 10px;
\n\u663e\u793a: \u5f39\u6027;
\n\u5bf9\u9f50\u5185\u5bb9: \u7a7a\u9699\u5206\u5e03;
\n\u5bf9\u9f50\u9879\u76ee: \u5c45\u4e2d;
\n}<\/p>\n
.\u5f85\u529e\u4e8b\u9879 .\u64cd\u4f5c-\u533a\u5757{
\n\u663e\u793a: \u5f39\u6027;
\n\u5bf9\u9f50\u5185\u5bb9: \u5f39\u6027\u5f00\u59cb;
\n\u5bf9\u9f50\u9879\u76ee: \u5c45\u4e2d;
\n}<\/p>\n
.\u5f85\u529e\u4e8b\u9879 .\u64cd\u4f5c-\u533a\u5757 div{
\n\u8fb9\u8ddd: 0px 10px;
\n\u5149\u6807: \u6307\u9488;
\n}<\/p>\n
.\u5220\u9664-\u6309\u94ae{
\n\u989c\u8272: rgb(165, 2, 2);
\n\u5149\u6807: \u6307\u9488;
\n}<\/p>\n
.\u6a21\u6001-\u5bb9\u5668{
\n\u5bbd\u5ea6: 100%;
\n\u9ad8\u5ea6: 100vh;
\n\u4f4d\u7f6e: \u56fa\u5b9a;
\n\u9876\u90e8: 0;
\n\u5de6\u4fa7: 0;
\n\u80cc\u666f\u989c\u8272: rgba(0,0,0,0.7);
\n\u663e\u793a: \u5f39\u6027;
\n\u5bf9\u9f50\u5185\u5bb9: \u5c45\u4e2d;
\n\u5bf9\u9f50\u9879\u76ee: \u5c45\u4e2d;
\n}<\/p>\n
.\u6a21\u6001-\u5bb9\u5668 .\u6a21\u6001{
\n\u663e\u793a: \u5757;
\n\u5bbd\u5ea6: 70%;
\n\u9ad8\u5ea6: 70vh;
\n\u80cc\u666f\u989c\u8272: #fff;
\n\u8fb9\u6846\u534a\u5f84: 20px;
\n\u8fb9\u8ddd: 60px 15%;
\n}<\/p>\n
@media(max-width: 768px){
\n.\u6a21\u6001-\u5bb9\u5668 .\u6a21\u6001{
\n\u5bbd\u5ea6: 100%;
\n\u9ad8\u5ea6: 100vh;
\n\u8fb9\u8ddd: 0;
\n\u8fb9\u6846\u534a\u5f84: 0px;
\n}
\n}<\/p>\n
.\u6a21\u6001-\u5bb9\u5668 .\u6a21\u6001 .\u5934\u90e8{
\n\u5bbd\u5ea6: 100%;
\n\u9ad8\u5ea6: \u81ea\u52a8;
\n\u586b\u5145: 20px;
\n\u663e\u793a: \u5f39\u6027;
\n\u5bf9\u9f50\u5185\u5bb9: \u7a7a\u9699\u5206\u5e03;
\n\u5bf9\u9f50\u9879\u76ee: \u5c45\u4e2d;
\n}<\/p>\n
.\u6a21\u6001-\u5bb9\u5668 .\u6a21\u6001 .\u5934\u90e8 .\u66f4\u65b0-\u6587\u672c{
\n\u5b57\u4f53\u5927\u5c0f: 24px;
\n\u5b57\u4f53\u7c97\u7ec6: 600;
\n\u5bbd\u5ea6: 100%;
\n}<\/p>\n
.\u6a21\u6001-\u5bb9\u5668 .\u6a21\u6001 .\u5934\u90e8 .\u5173\u95ed-\u6309\u94ae{
\n\u989c\u8272: rgb(165, 2, 2);
\n\u5149\u6807: \u6307\u9488;
\n}<\/p>\n<\/details>\n
\u7ec4\u4ef6\/ Header.js<\/h2>\n
Header.jsHeader.jsx
\nimport React, { useEffect, useState } from ‘react’
\nimport { Link } from ‘react-router-dom’<\/p>\n
import todoIcon from ‘..\/images\/TodoAppicon.png’
\nimport ‘bootstrap\/dist\/css\/bootstrap.css’
\nimport ‘..\/index.css’<\/p>\n
import {auth} from ‘..\/services\/firebase.config’<\/p>\n
export const Header = ({ currentUser }) => {<\/p>\n
const [year, setYear] = useState(null);
\nconst [date, setDate] = useState(null);
\nconst [month, setMonth] = useState(null);
\nconst [day, setDay] = useState(null);<\/p>\n
useEffect(() => {
\nconst currentDate = new Date();
\nconst currentYear = currentDate.getFullYear();
\nconst currentDateOfMonth = currentDate.getDate();
\nconst currentMonth = currentDate.toLocaleString(‘ja-JP’, { month: ‘long’ });
\nconst currentDay = currentDate.toLocaleDateString(‘js-JP’, { weekday: ‘long’ });<\/p>\n
setYear(currentYear);
\nsetDate(currentDateOfMonth);
\nsetMonth(currentMonth);
\nsetDay(currentDay);
\n}, [])<\/p>\n
const handleLogout = () => {
\nauth.signOut().then(() => {
\nwindow.location.reload();
\n});
\n}<\/p>\n
return (<\/p>\n
\n
\n
\"todoIcon\"<\/div>\n
\n
\u8fd8\u6709\u4efb\u52a1\u8981\u505a\uff1f<\/div>\n
\u505a\u4e2a\u5217\u8868\u5427\uff01<\/div>\n<\/div>\n<\/div>\n
\n
{!currentUser && <>
\n\u6ce8\u518c
\n\u767b\u5f55<\/p>\n
{year}\u5e74
\n{month}
\n{date}\u65e5
\n{day}<\/div>\n
<\/>}<\/p>\n
{currentUser &&<\/p>\n
\n
\u6b22\u8fce<\/h2>\n
{currentUser}<\/h5>\n
 <\/p>\n
{year}\u5e74
\n{month}
\n{date}\u65e5
\n{day}<\/div>\n