Basic notebook application in ReactJS

Let’s create a basic notebook application in ReactJS. In this example, we’ll focus on creating a notebook where you can add, edit, and delete notes. We won’t include advanced features like sorting or persistent storage to keep it simple.

1. Setup Environment:

Ensure you have Node.js and npm installed, as mentioned before.

2. Create a New React App:

Open your terminal and navigate to the directory where you want to create your React app. Then, run the following commands:

npx create-react-app react-notebook-app
cd react-notebook-app

3. Create Components:

Inside the src folder, create a components folder. Within that folder, create the following components:

• NoteList.js: Display a list of notes.
• NoteEditor.js: Allow users to create and edit notes.
• NotebookApp.js: The main app component that manages notes and rendering.

Here’s the code for each component:

NoteList.js:

import React from 'react';

const NoteList = ({ notes, onEdit, onDelete }) => {
  return (
    <div>
      <h2>Note List</h2>
      <ul>
        {notes.map((note, index) => (
          <li key={index}>
            <div>
              <h3>{note.title}</h3>
              <p>{note.content}</p>
            </div>
            <button onClick={() => onEdit(index)}>Edit</button>
            <button onClick={() => onDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default NoteList;

NoteEditor.js:

import React from 'react';

const NoteEditor = ({ note, onSave, onCancel }) => {
  const handleSave = () => {
    onSave(note);
  };

  return (
    <div>
      <h2>Note Editor</h2>
      <input
        type="text"
        value={note.title}
        onChange={(e) => onSave({ ...note, title: e.target.value })}
        placeholder="Note Title"
      />
      <textarea
        value={note.content}
        onChange={(e) => onSave({ ...note, content: e.target.value })}
        rows={10}
        cols={50}
        placeholder="Note Content"
      />
      <button onClick={handleSave}>Save</button>
      <button onClick={onCancel}>Cancel</button>
    </div>
  );
};

export default NoteEditor;

NotebookApp.js:

import React, { useState } from 'react';
import './App.css';
import NoteList from './components/NoteList';
import NoteEditor from './components/NoteEditor';

function App() {
  const [notes, setNotes] = useState([]);
  const [editingIndex, setEditingIndex] = useState(null);
  const [currentNote, setCurrentNote] = useState({ title: '', content: '' });

  const handleNoteSave = (note) => {
    if (editingIndex !== null) {
      const updatedNotes = [...notes];
      updatedNotes[editingIndex] = note;
      setNotes(updatedNotes);
      setEditingIndex(null);
    } else {
      setNotes([...notes, note]);
    }
    setCurrentNote({ title: '', content: '' });
  };

  const handleNoteEdit = (index) => {
    setEditingIndex(index);
    setCurrentNote(notes[index]);
  };

  const handleNoteDelete = (index) => {
    const updatedNotes = [...notes];
    updatedNotes.splice(index, 1);
    setNotes(updatedNotes);
  };

  const handleNoteCancel = () => {
    setEditingIndex(null);
    setCurrentNote({ title: '', content: '' });
  };

  return (
    <div className="App">
      <h1>Notebook App</h1>
      <NoteList
        notes={notes}
        onEdit={handleNoteEdit}
        onDelete={handleNoteDelete}
      />
      {editingIndex !== null || currentNote.title !== '' ? (
        <NoteEditor
          note={currentNote}
          onSave={handleNoteSave}
          onCancel={handleNoteCancel}
        />
      ) : null}
    </div>
  );
}

export default App;

4. Styling:

You can add or modify the styling in the src/App.css file as needed.

5. Run the App:

After adding the code, save the files and return to your terminal. Make sure you’re in the react-notebook-app directory. Then, run the following command:

npm start

This will start the development server, and you should be able to see your React Notebook App in your web browser at http://localhost:3000.

In this example, you have a basic notebook application where you can add, edit, and delete notes. The NotebookApp component manages the state of notes and handles editing actions. The NoteList component displays the list of notes, and the NoteEditor component allows users to edit notes or add new ones.

Remember that this is a simplified example, and you can enhance it by adding features like sorting, searching, persistent storage, better styling, and more advanced editing capabilities.