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.