Sticky Notes with React

Hello Everyone, It's been a long time now! Well, I was busy learning React.js and I came up with a React App called Sticky Notes ! Before learning React I had to learn the concepts of Javascripts better. Had to get a better hold of ES6. To do that I went to freecodecamp.org and continued with their javascript course and focused on the ES6 part. When I was done with ES6 I went to one of my favorite web development content creators and a great Teacher, Mr. Tanay Pratap. I saw that React playlist and made an emoji app using React.

Things I had in mind before starting the project:

Had to do something with react hooks, mainly useState and useEffect.
I had read about local storage on Namaste Javascript when I was learning the Javascript concepts. So I wanted to use it to store the data locally.
Had to use CSS grid and CSS flex which I think I mastered in the past few weeks. xD
I wanted to use Figma to design the UI and be sure from the start about what I wanted the end product to be.

This time I used codesandbox.io to write Sticky Notes. CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster.

The CODE :

In React we use the keyword import and from to import a particular module or a named parameter.

import React, { useEffect } from "react";  //used for importing useEffect hook(will be discussed later)      
import "./styles.css";  //used for importing the css that we are going to write
import { useState } from "react";  //used for importing useState hook (will be discussed later)
import { v4 as uuidv4 } from "uuid";  //we use it for key value(Identification)

We write all of our code in the default function app, we have the default function app and the return statement. All our variables, functions, hooks go inside the function app and all our rendering goes in the return statement.

export default function App(){
...
return(
...
)
}

What is a Hook? A Hook is a special function that lets you “hook into” React features.

UseState: useState is a hook that lets you add state to a functional component. So now that we have covered the textbook definition, I will explain you guys what the hook does in the way I learned it. Just read the below lines slowly 1-2 times and it will make sense to you.

const[A, set_A] = useState(0);

We have a variable 'A' and a function 'set_A()' and the value 0 as the initial value for 'A', now as the name says set_A is a function that sets the values for A. So now remember one thing,

THERE IS NO WAY WE CAN CHANGE THE VALUE OF A OTHER THAN USING SET_A()

In the above code, A can be an object, variable, array, string.

So now just replace the A in the above sentence with values and set_A with setValues.

const [values, setValues] = useState([]);

useEffect: I won't go with the textbook definition of this hook as you can refer to it from other sources. Let's say there is a certain something you want to render every time in your app regardless of any other functionality. At such times you will use the useEffect Hook. In our app, we have used it twice:

For rendering the content in the local storage every time we refresh the page.
For adding the values that we obtain from the user into the local storage.

//the first useEffect for rendering the content already in our local storage
useEffect(() => {
    const data = localStorage.getItem("values");
    if (data) {
      setValues(JSON.parse(data));
    }
  }, []); // the [] over here means that we want to render it only once when our app starts.

//the second useEffect for storing the values in our local storage everytime we have user input
  useEffect(() => {
    localStorage.setItem("values", JSON.stringify(values));
  });

So this covers the coding/hooks part of our code. Now comes the rendering part which I will be explaining in Part II.

There are some shortcomings in the project which I will be addressing one by one and improving.

All the information mentioned above is according to my understanding and I have tried to simplify it for the readers. If I am wrong somewhere or if I can explain it better in any way, kindly reach out to me.

STICKY NOTES! 📝Part (I)