Build a mini google Keep App with React

21 September, 2022

Contributors

Brian👨‍💻😊

@codebytes

Introduction

I am a big fan of google and its products. The world as we see it today has been largely shaped by the many amazing solutions google has designed, developed, and shipped. One of my personal favorites is google Keep App

I usually prefer to jot down my to-do's however, google keep has made it so undeniably hard for me to avoid its amazing note-taking features.

In this article, we are going to build a minified version of the App using ReactJS.

Let's get started…

Prerequisites

•

React -version 18.

•

Latest versions of NPM and node.

Installing node and NPM

React requires a number of dependencies in order to set up an app development server. You need to install the latest versions of node.

You can obtain node's latest version from the official website. To install NPM's latest version, run this command:

Setting up a react development environment.

Setting up a new react app development environment involves creating a react app and installing the required dependencies. To do this run the following command.

Note: It might take a few minutes to download all the 140MB react dependencies.

npx

yarn

create-react-app is a comfortable build environment supported by react for creating single-page react apps. It setups the development and optimizes your app for production. However, there are other ways to build react apps such as using vite - frontend tool. I found a useful article on this topic.

After creating the react app, run this command to change the directory, open the react app's folder and start the development server.

Running this command, you should see this message on your terminal.

You can view the default app template installed on the browser on localhost:3000.

Let's start building

While building this app, we are going to cover some essential react concepts required in building a production-ready app.

Follow along…

Open the react app folder on your IDE. Initially, the default folder structure looks like this 👇, however, we are going to delete everything and build afresh.

Delete all files from the src folder except for the index.js file. Then create a new folder and name it components. Our new app folder structure should look like this.👇

The public folder has two default files created: the index.html file and the styles.css file. Open the two files and delete the code present and add the following code for our MiniGoogleKeeperApp.

HTML FILE code

The following code has a div with an id of root. This is the default HTML file code structure provided by react. React bundles all the styles and functionality code for your app and then render it on the div with id root.

The CSS file

We are going to use vanilla CSS for a project however feel free to be a little bit creative by using CSS frameworks.

React components.

Components are independent and reusable bits of code. There are the building blocks of react apps. There play the same role as javascript functions however they are isolated and they return HTML code which is then rendered on the div with id root.

There are two types of react components. They are:

•

Class functional components

•

Functional components.

The two have striking differences however we are not going to dive deeper into that. For this tutorial we are going to focus on building functional components for a mini googleKeeper App.

React's specifies that we have a default root component that bundles all other components to be rendered.

Create these files and save them in the components folder:

•

App.js

•

CreateArea.js

•

Header.js

•

Note.js

•

Footer.js

We have divided the mini google keep App into 5 major sections which will serve as our components. Your components should look like these:

You can note that I have saved my files with a .jsx extension. Don't worry whichever extension you choose will work fine.

JSX stands for JavaScript XML. JSX allows us to put HTML into JavaScript. It is simply a syntax extension of React. It allows us to directly write HTML in React.

Our App.js component file represents our root folder which bundles up all the other components and serves them to the index.js file to be rendered.

App.js file Structure.

Write the following code on the app.js file.

What have we done on the code above:

•

We first import the necessary module from react to use in the file.

import React, { useState } from "react";

•

We then import all the other components into a root App component.

import Header from "./Header";

import Footer from "./Footer";

import Note from "./Note";

import CreateArea from "./CreateArea";

•

We created a functional component - App.

Our functional App component carries most of the logic for a google keep App. Let's destructure each section.

We initially start by declaring a component App. The component wraps two major features for our mini google Keep App: **Add note Feature **and Delete note Feature. To implement these two features, we use React's state management functionality to track the state of our note component by creating a const variable that tracks changes in the states of note component.

The App component then returns the other components. In addition, it maps the notes typed on the note component using the array. map function on the creatArea note component. The delete button passes the id, title, and content as props, and they are deleted from the notes array once the button is clicked.

CreateArea component structure.

The createArea component defines the logic in which a user adds bits of notes to the text area of the app. CreateArea component takes in props passed from the note component as inputs. The inputs are values obtained from the react form. See the code below:

Header and footer components define the overall style and design of our note app. Header component code.

Note component file structure

The note component defines the logic behind how an added note is displayed and deleted.

The overall result will look like this:

The cool thing about react's development server is that it automatically saves any changes made on your project and reloads the webpages to reflect the changes made.

Congratulations you made it to the very end. You successfully built your own mini google keep app with react.

Now, let's deploy our project on the internet.

Deploying your react App

First, create an empty git repository on GitHub to host your project

Next, on your terminal, initialize git by running the command below:

Then, add the changes made, commit the changes, and push them to your repository. Run the following commands.

Now, let's add the GitHub Pages dependency package. This package allows us to publish build files into a gh-pages branch on GitHub, where they can then be hosted.

Install gh-pages as a dev dependency via npm by running the following command.

Adding the deploy scripts Now, let’s configure the package.json file so that we can point our GitHub repository to the location where our React app will be deployed.

We’ll also need to add pre-deploy and deploy scripts to the package.json file. The pre-deploy script is used to bundle the React application while the deploy script deploys the bundled file.

In the package.json file, add a homepage property that follows this structure:** https://{github-username}.github.io/{repo-name}**

Now, let’s add the scripts.

In the package.json file, scroll down to the scripts property and add the following commands:

Commit the changes and push your code updates to your GitHub repository.

To deploy the react application, run the command below:

This command will create a bundled version of our React application and push it to a gh-pages branch in our repository on GitHub.

Now, go to your GitHub repo that houses the project, click on the settings tab and then select the pages option. Click on the link provided to view the project online.

Hurray there you go, you have built your own version of the mini google keep App using react.💡😊💖

Here is the link to my completed version:

•

Google mini keeper App.

•

My GitHub repo for the code.

Conclusion

In this tutorial article, you have built a mini google Keep app using react js front-end framework. Please feel free to be creative with it and add your own custom features.

Happy coding. 💡👨‍💻😊