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.
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.
