ReactHaven

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.