📌 Build a Google Keep Clone with ReactJS (Class-Based Components) - Step by Step Guide 2025

In this tutorial, we will build a Google Keep Clone using ReactJS with Class-Based Components. This will help you understand the concept of state, props, event handling, and component rendering.

🚀 Features of Our Google Keep Clone:

• Add notes with a title and description.
• Delete notes when not needed.
• Notes persist in React state.

🛠️ Step 1: Create a New React Project

Open your terminal and run the following command:

npx create-react-app google-keep-clone

Now, navigate to the project folder:

cd google-keep-clone

📝 Step 2: Setup Basic Folder Structure

Inside the `src` folder, create the following components:

• App.js (Main component)
• Header.js (Top header bar)
• Note.js (Single note component)
• CreateNote.js (Form for adding notes)

📜 Step 3: Implementing the Components

1️⃣ Header Component (Header.js)

The header will display the app title.

import React, { Component } from 'react';

class Navbar extends Component {
    render() {
        return (
            <>
                

                    Hey I am Navbar {this.props.name} and my age is {this.props.age}
                
            
        );
    }
}

export default Navbar;

2️⃣ CreateNote Component (CreateNote.js)

This component allows users to input and add new notes.

import React, { Component } from 'react';

export class NoteAdd extends Component {
    render() {
        return (
            <>
                

                    Title
                    
                
                

                    Notes
                    
                
                Add Note
            
        );
    }
}

export default NoteAdd;

3️⃣ Note Component (Note.js)

This component will display each note and allow deletion.

import React, { Component } from 'react';

export class Card extends Component {
    render() {
        return (
            <>
                

                    

                        

                            
{this.props.title}
                            
{this.props.note}
                             this.props.deleteclick(this.props.i)}>Delete
                        
                    
                
            
        );
    }
}

export default Card;

4️⃣ Main Component (App.js)

This is the root component that manages state.

import React, { Component } from 'react';
import Navbar from "./component/Navbar";
import NoteAdd from './component/NoteAdd';
import Card from './component/Card';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: [],
      title: "",
      note: ""
    };
  }

  componentDidMount() {
    const savedTodos = JSON.parse(localStorage.getItem("todos")) || [];
    this.setState({ todos: savedTodos });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.todos !== this.state.todos) {
      localStorage.setItem("todos", JSON.stringify(this.state.todos));
    }
  }

  handleTitleChange = (e) => {
    this.setState({ title: e.target.value });
  };

  handleNoteChange = (e) => {
    this.setState({ note: e.target.value });
  };

  addTodo = () => {
    if (this.state.title.trim() === "" || this.state.note.trim() === "")
      return;

    const newTodo = { title: this.state.title, note: this.state.note };

    this.setState((prevState) => ({
      todos: [...prevState.todos, newTodo],
      title: "",
      note: "",
    }));
  };

  deleteTodo = (index) => {
    this.setState((prevState) => {
      const updatedTodos = prevState.todos.filter((_, i) => i !== index);
      return { todos: updatedTodos };
    });
  };

  render() {
    return (
      <>
        

          
Google Add Notes 
          
          

            
 Notes List 
            

              {this.state.todos.map((todo, index) => (
                
              ))}
            
          
        
      
    );
  }
}

export default App;

🚀 Step 4: Running the Application

Run the following command to start the React app:

npm start

🎉 Conclusion

Congratulations! 🎊 You have successfully built a Google Keep Clone using ReactJS with Class-Based Components.

Google Keep Note Download GitHub Link below