Notes App with React: A Beginner’s Guide

Notes App with React: A Beginner’s Guide

Share It With Your Firends:

Learn how to build a simple notes app using React in this beginner’s tutorial. You’ll create components like a form, note, header, and display note, and add CRUD functionality to manage notes.

https://youtu.be/X-vB0z3nKaw

index.jsx

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;500&family=Poppins:wght@300&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins";
}

*{
  box-sizing: border-box;
}

header{
  display: flex;
  background-color: rgb(255, 162, 0);
  color: #fff;
  height: 60px;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
}

.container{
  max-width: 1000px;
  margin: auto;
  padding: 10px;
}

form{
  max-width: 500px;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin: 10px auto;
}

form input, textarea{
  outline: none;
  border: none;
  padding: 8px;
  margin: 10px auto;
  width: 100%;
  font-family: "Poppins";
}

form input{
  font-size: 20px;
}

form button{
  background-color: rgb(255, 162, 0);
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
  border: none;
  outline: none;
  padding: 8px 15px;
  margin: auto;
  cursor: pointer;
}

.note-container{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}

.note{
  font-size: 14px;
  background-color: #fff;
  padding: 10px 13px;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
  border-radius: 10px;
  min-height: 70px;
  margin: 10px auto;
  width: 30%;
}

.note .title{
  color: rgb(255, 162, 0);
  font-size: 17px;
}

.note .content{
  color: #555;
}

button{
  background-color: rgb(255, 162, 0);
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
  border: none;
  outline: none;
  padding: 8px 15px;
  cursor: pointer;
}

@media screen and (max-width: 800px){
  .note-container{
    flex-direction: column;
  }

  .note{
    width: 100%;
  }
}

Form.jsx

import React, {useState} from 'react'

const Form = (props) => {
  const [note, setNote] = useState({title: "", content: ""})

  const handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setNote({...note, [name]: value})
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    // console.log(note);
    props.onCreate(note)
    setNote({title: "", content: ""})
  }

  return (
    <form method='post' onSubmit={handleSubmit}>
      <input type="text" name="title" placeholder="Enter Title..." onChange={handleChange} value={note.title} />
      <textarea name="content" placeholder='Type Content Here...' onChange={handleChange} value={note.content} rows="4"></textarea>
      <button type='submit'>submit</button>
    </form>
  )
}

export default Form;

Display Note.jsx:

import React from 'react'

const DisplayNote = (props) => {

  const handleClick = (id) =>{
    props.getId(id)
  }
  return (
    <div className="note">
        <p className="title">{props.title}</p>
        <p className="content">{props.content}</p>
        <button onClick={()=>handleClick(props.id)}>delete</button>
      </div>
  )
}

export default DisplayNote;

Note.jsx

import React from 'react'
import DisplayNote from './DisplayNote';
import Form from './Form';
import { useState } from 'react';

const Note = () => {
  const [notes, setNotes] = useState([])

  const createNote = (note)=>{
    console.log(note);
    setNotes((prevNotes)=>{
      return [...prevNotes, note]
    })
  }

  const deleteNote = (id) =>{
    // console.log(id);
    setNotes((prevNotes)=>{
      return prevNotes.filter((item, index)=>{
        return index !== id;
      })
    })
  }

  return (
    <div className="container">
      <Form onCreate={createNote}/>
      <div className='note-container'>
        {notes && notes.map((note, index)=>(
          <DisplayNote title={note.title} content={note.content} id={index} getId={deleteNote} />
        ))}
      </div>
    </div>
  )
}

export default Note;

Throughout the tutorial, you’ll learn key concepts like how to use React props and state to manage data and update the UI, how to handle user input with forms, and how to add basic styling to your components. You’ll also learn how to implement basic CRUD (Create, Read, Update, Delete) functionality to add, edit, and delete notes.

Share It With Your Friends

Leave a Reply

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python
DIY AI Voice Assistant In Python

September 8, 2023

Build your own AI assistant with Python! Learn to recognize voice commands, generate responses, and more. Create your virtual companion…

share it

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python

Additional Content

CodeWithAM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus.

Products

Automated Chatbot

Data Security

Virtual Reality

Communication

Support

Services

FAQ's

Privacy Policy

Terms & Condition

Team

Contact Us

Company

About Us

Services

Features

Our Pricing

Latest News

ยฉ 2023 Codewitham