React AddList with Firebase deployment

Here is the todolost developed in react and deployed/hosted in firebase

Lets, discuss in detail regarding our code.

Lets create a react app

npx create-react-app todo 

Then it will create a folder name todo, where all the react code are preset. Let do cd todo, to move into it. And in the app.js file, lets copy paste the below code.

1 import React, { useState, useEffect } from "react";
2 import _ from "lodash";
3 import Button from "@material-ui/core/Button";
4 import TextField from "@material-ui/core/TextField";
5 import db from "./config";
6 import Todos from "./Todos";
7 import "./App.css";

8 function App() {
9 const [todos, setTodos] = useState([]);
10 const [input, setInput] = useState("");

11  useEffect(() => {
12   db.collection("todos").onSnapshot((s) => {
13     setTodos(s.docs.map((doc) => doc.data().next));
14    });
15 }, []);

16 const addTodo = (event) => {
17    event.preventDefault(); // will stop refreshing the page
18    db.collection("todos").add({
19      next: input,
20   });
21  // setTodos([...todos, input]); // will add the data
22    setInput(""); // clear the input text
23  };

24  return (
25   <div className="App">
26      <h1> 🏃‍♀️ Add List 👩‍🎤</h1>
27      <form>
28       <TextField
29          id="outlined-basic"
30          label="Write a Todo"
31          // variant="outlined"
32       value={input}
33          onChange={(e) => setInput(e.target.value)}
34        />
35        <Button
36         type="submit"
37          onClick={addTodo}
38          variant="contained"
39         color="primary"
40          disabled={!input}
41       >
42          Add Todo
43      </Button>
44      </form>
45

46      <ul>
47       {_.map(todos, (i) => (
48          <Todos todo={i} key={i} />
49       ))}
50      </ul>
51   </div>
52  );
53 }

54 export default App;

From line 1- 7, we have done all the imports, we have installed the dependencies like lodash, @material-ui

In line 8 we have a function name App,

In line 9, we have set the initial value using useState, which is react hooks (you can refer my useState article for it

In line 11, we have use useEffect function, which does the work of componentdidMount in class based component. In this useEffect, we have called the db function of firebase, and set the values into our setTodos(useState)

In line 16, we have created a function name addTodo, which does the work of adding the todos to the list, when click on a button.

From line 24- 51, we have the return function, where we have map all the todos, to display.

And in line 54, we have exported it.

Now, lets create a new file name config.js , where we setup the firebase credentials.

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
import firebase from "firebase";

firebase.initializeApp({
  apiKey: "AIzaSyAdBQt7PtUQF83N881S5Ds08pcxvxLMYZ4",
  authDomain: "todo-app-8f2f9.firebaseapp.com",
  projectId: "todo-app-8f2f9",
  storageBucket: "todo-app-8f2f9.appspot.com",
  messagingSenderId: "25557613771",
  appId: "1:25557613771:web:26b497942b834fd3c42f4e",
  measurementId: "G-S1TGR47Y0N",
});

var db = firebase.firestore();

export default db;

Lets create a new file name called todos.js, where the design for todo is give and listed.

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

export default function Todos({ todo }) {
  return (
    <List>
      <ListItem>
        <ListItemText
          primary={todo}
          //  secondary="Jan 9, 2014"
        />
      </ListItem>
    </List>
  );
}

This is the web browser todolist , which is hosted in firebase.

https://todo-app-8f2f9.web.app/

And this is the giuthub link.

https://github.com/TriptiPant01/todoInReact

Please feel, free to comment it out.