Setting Up Your Environment
If you haven’t set up a React project yet, you can use Create React App:
bashCopy codenpx create-react-app react-haven
cd react-haven
Step 2: Create Basic Components
We’ll create three main components: NoteList, AddNote, and NoteItem.
1. Create NoteItem.js
In the src folder, create a new file called NoteItem.js:
jsxCopy code// src/NoteItem.js
import React from 'react';
const NoteItem = ({ note, onDelete }) => {
return (
<div style={styles.noteItem}>
<p>{note}</p>
<button onClick={onDelete}>Delete</button>
</div>
);
};
const styles = {
noteItem: {
border: '1px solid #ccc',
borderRadius: '5px',
padding: '10px',
margin: '5px 0',
},
};
export default NoteItem;
2. Create NoteList.js
Now create another file called NoteList.js:
jsxCopy code// src/NoteList.js
import React from 'react';
import NoteItem from './NoteItem';
const NoteList = ({ notes, onDelete }) => {
return (
<div>
{notes.map((note, index) => (
<NoteItem
key={index}
note={note}
onDelete={() => onDelete(index)}
/>
))}
</div>
);
};
export default NoteList;
3. Create AddNote.js
Next, create the AddNote.js component for adding notes:
jsxCopy code// src/AddNote.js
import React, { useState } from 'react';
const AddNote = ({ onAdd }) => {
const [note, setNote] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (note) {
onAdd(note);
setNote('');
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={note}
onChange={(e) => setNote(e.target.value)}
placeholder="Add a new note"
/>
<button type="submit">Add Note</button>
</form>
);
};
export default AddNote;
Step 4: Main Application Component
Now, let’s integrate everything in App.js.
jsxCopy code// src/App.js
import React, { useState } from 'react';
import AddNote from './AddNote';
import NoteList from './NoteList';
const App = () => {
const [notes, setNotes] = useState([]);
const addNote = (note) => {
setNotes([...notes, note]);
};
const deleteNote = (index) => {
const newNotes = notes.filter((_, i) => i !== index);
setNotes(newNotes);
};
return (
<div style={styles.container}>
<h1>ReactHaven: Note Taking App</h1>
<AddNote onAdd={addNote} />
<NoteList notes={notes} onDelete={deleteNote} />
</div>
);
};
const styles = {
container: {
padding: '20px',
textAlign: 'center',
},
};
export default App;
Step 5: Run Your Application
Now you can start your application. In your terminal, run:
bashCopy codenpm start
Step 6: Explore and Enhance
You now have a basic React application called “ReactHaven” that allows you to manage a list of notes. You can enhance it by adding features like:
- Editing notes
- Categorizing notes by color or tag
- Storing notes in local storage for persistence
Summary
In this tutorial, you created a simple note-taking app using React. You learned how to manage state, create reusable components, and handle user interactions.