React Project (Todo App)

 Todo App (React )

Step 1: First create a project using create project comments -->create-react-app project_name

Step 2: Next Open the live Server Means NPM servers -->npm start

Step 3: Open your editors (ex: VS code)-->code .

Step 3: Create a Firebase Project

           REfer Firebase Documentation

Step 4: Delete the Unuse Files

Step 5: Code For App.js:-

import React, { useState, useEffect } from 'react';

import Todo from './Todo';

import { Button, FormControl, Input, InputLabel } from '@material-ui/core';

import './App.css';

import db from './firebase';

import firebase from 'firebase';

function App() {

  const [todos, setTodos] = useState([]);

  const [input, setInput] = useState('');

  //when the app load, we need to listen to the database and fetch new Todos as 

they get added

  useEffect(() => {

    //this code here..fires when the app.js loades

   db.collection('todos').orderBy('timestamp', 'desc').onSnapshot(snapshot => {

     //console.log(snapshot.docs.map(doc => doc.data().todo));

     setTodos(snapshot.docs.map(doc => doc.data().todo))

   })

  }, []);

  const addTodo = (event) => {

    //this will fire off when we click the button

    event.preventDefault(); //i will stop refrasing

    

    db.collection('todos').add({

      todo: input,

      timestamp: firebase.firestore.FieldValue.serverTimestamp()

    })

     

    

    setTodos([...todos, input]);

    setInput(''); //Click on the add button text will be clear here

  }

  return (

    <div className="App">

     <h1>Hello Web Developer!!<br></br>Welcome to Todo Chat Section</h1>

     <from>

       <FormControl>

         <InputLabel><span>Write A Todo Chat...</span></InputLabel>

         <Input  value={input} onChange={event => setInput(event.target.value)}/>

       </FormControl>

       <Button  disabled={!input} onClick={addTodo} variant="contained" 

color="primary">

        Add Todo

       </Button>

      

     </from>

     

     <h2>Hello Friends!!<br></br>Your Todo Chat Here...</h2> 

     <ul>

       {todos.map(todo => (

         <Todo text={todo}/>

         //<li>{todo}</li>

       ))}

      

     </ul>

    </div>

  );

}

export default App;

Step 6: App.css

.App {

  text-align: center;

}

h1 { 

  font-size: 40px;

  color: rgba(0, 0, 0, 0.705);

}

h2 { 

  padding-top: 20px;

  font-size: 40px;

  color: rgba(0, 0, 0, 0.555);

}

span { 

  font-size: 20px;

  font-weight: bold;

}

Step 7: Todo.js

import React from 'react'

import './Todo.css';

function Todo(props) {

    return (

             <div className="card-container">

               

                 <div className="card">

                        <div className="card-body">

                             <h5 className="card-title">Todo Chat...</h5>

                             <p className="card-text">{props.text}</p>

                         </div>

                 </div>

            </div>         

    )

}

export default Todo

Step 8: Todo.css

.card-container {

  display: inline-block;

  padding: 20px;

}

.card {

    width: 200px;

    height: 200px;

    background: linear-gradient(

        274deg,

        rgba(22, 146, 241, 1) 46%,

        rgba(0, 212, 255, 1) 100%

      );

    border-radius:10px;  

}

.card:hover {

    transform: translateY(-7px);

    box-shadow: 7px 7px 7px 7px rgba(0, 0, 255, 0.39);

    transition:box-shadow .2s ease

}

.card-title {

    text-align: center;

    font-size: 25px;

    padding-top: 30px;

    color: #ccc;

    font-weight: bold;

}

.card-text {

    text-align: center;

    font-size: 18px;

    color: Black;

    font-weight: 600;

}

Step 9: Also Add Firebase.js

import firebase from "firebase";

const firebaseApp = firebase.initializeApp({

  

Add your Firebase Project Config Code

});

const db = firebaseApp.firestore();

export default db;

Step 10: Also Modified the public-->index.html file to change PROJECT NAME and FAVICION 

Deploy Time

Open Commented Promment and Type Comment 

-->npm run build

Then After Deployed The Build folder in Netlify

Note: In React Creating Filename Must Be FIRST LETTER CAPITAL

Final Todo App Structure👇