Building a Simple React Bookmarking App: A Beginner’s Guide

Written by

FixTechToday

in

In today’s digital landscape, we’re constantly bombarded with information. Finding and revisiting valuable content can feel like searching for a needle in a haystack. This is where a bookmarking app comes in handy. It’s a digital librarian, allowing you to save and organize your favorite web pages for easy access. This tutorial will guide you through building a simple bookmarking app using ReactJS, perfect for beginners and those looking to solidify their React skills. We’ll cover the fundamental concepts, from setting up your project to implementing features like adding, deleting, and displaying bookmarks. By the end, you’ll have a functional app and a solid understanding of how React works.

Why Build a Bookmarking App?

Creating a bookmarking app offers several advantages, especially when learning React:

  • Practical Application: It’s a real-world project that solves a common problem, making the learning process more engaging.
  • Component-Based Architecture: You’ll learn to break down your app into reusable components, a core React concept.
  • State Management: You’ll practice managing the state of your bookmarks, understanding how data changes and updates in your app.
  • User Interface (UI) Design: You’ll get experience building a simple and intuitive UI.
  • Local Storage: You can learn how to persist data across sessions using local storage.

This project is ideal for beginners because it’s manageable in scope, allowing you to focus on the core React principles without getting overwhelmed. It also provides a foundation for building more complex applications in the future.

Project Setup and Prerequisites

Before we dive into the code, let’s set up our development environment. You’ll need:

  • Node.js and npm (Node Package Manager): These are essential for managing your project’s dependencies and running React applications. Download and install them from the official Node.js website (nodejs.org).
  • A Code Editor: Choose your preferred code editor (VS Code, Sublime Text, Atom, etc.).
  • Basic HTML, CSS, and JavaScript Knowledge: Familiarity with these languages is helpful, but not strictly required. We’ll explain the concepts as we go.

Creating the React App

We’ll use Create React App, a popular tool that simplifies the setup process. Open your terminal or command prompt and run the following command:

npx create-react-app bookmarking-app

This command creates a new directory called bookmarking-app with all the necessary files. Navigate into the project directory:

cd bookmarking-app

Now, start the development server:

npm start

This will open your app in your web browser, typically at http://localhost:3000. You should see the default React app’s welcome screen. We’re now ready to start building our bookmarking app!

Building the Bookmark Component

The core of our app will be the Bookmark component. This component will be responsible for displaying each individual bookmark, including its title, URL, and a delete button.

Creating the Bookmark Component File

Inside the src directory, create a new file named Bookmark.js. This is where we’ll define our Bookmark component.

Code for Bookmark.js

Here’s the code for the Bookmark component:

import React from 'react';

function Bookmark({ bookmark, onDelete }) {
  return (
    <div className="bookmark">
      <a href={bookmark.url} target="_blank" rel="noopener noreferrer">{bookmark.title}</a>
      <button onClick={() => onDelete(bookmark.id)}>Delete</button>
    </div>
  );
}

export default Bookmark;

Explanation

  • Import React: import React from 'react'; imports the React library, which is essential for creating React components.
  • Component Definition: function Bookmark({ bookmark, onDelete }) { ... } defines a functional component named Bookmark. It receives two props:
    • bookmark: An object containing the bookmark’s data (title, URL, and ID).
    • onDelete: A function to handle deleting the bookmark.
  • JSX (JavaScript XML): The return statement contains JSX, which looks like HTML but is actually JavaScript. JSX is used to describe what the component should render.
  • Link and Button:
    • <a href={bookmark.url} target="_blank" rel="noopener noreferrer">{bookmark.title}</a>: Creates a hyperlink to the bookmark’s URL. The target="_blank" attribute opens the link in a new tab, and rel="noopener noreferrer" is a security best practice.
    • <button onClick={() => onDelete(bookmark.id)}>Delete</button>: Creates a delete button. When clicked, it calls the onDelete function, passing the bookmark’s ID.
  • Exporting the Component: export default Bookmark; makes the Bookmark component available for use in other parts of your app.

Styling (Optional)

To make the bookmarks look better, you can add some basic CSS. Create a file named Bookmark.css in the src directory and add the following:

.bookmark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.bookmark a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.bookmark button {
  background-color: #f00;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

Then, import the CSS file into Bookmark.js:

import './Bookmark.css';

Building the Bookmark List Component

The BookmarkList component will be responsible for displaying a list of bookmarks. It will receive an array of bookmark objects as props and render a Bookmark component for each one.

Creating the BookmarkList Component File

Create a new file named BookmarkList.js in the src directory.

Code for BookmarkList.js

import React from 'react';
import Bookmark from './Bookmark';

function BookmarkList({ bookmarks, onDelete }) {
  return (
    <div className="bookmark-list">
      {bookmarks.map(bookmark => (
        <Bookmark key={bookmark.id} bookmark={bookmark} onDelete={onDelete} />
      ))}
    </div>
  );
}

export default BookmarkList;

Explanation

  • Import Statements: Imports React and the Bookmark component.
  • Component Definition: function BookmarkList({ bookmarks, onDelete }) { ... } defines the BookmarkList component. It receives two props:
    • bookmarks: An array of bookmark objects.
    • onDelete: A function to handle deleting a bookmark.
  • Mapping Bookmarks: {bookmarks.map(bookmark => ( ... ))} iterates over the bookmarks array using the map function. For each bookmark, it renders a Bookmark component.
    • key={bookmark.id}: The key prop is crucial for React’s efficient rendering. It helps React identify which items have changed, been added, or been removed. Use a unique identifier for each bookmark.
    • bookmark={bookmark}: Passes the bookmark data as a prop to the Bookmark component.
    • onDelete={onDelete}: Passes the onDelete function to the Bookmark component.
  • Exporting the Component: export default BookmarkList; makes the BookmarkList component available for use.

Styling (Optional)

You can add CSS to style the bookmark list. Create a file named BookmarkList.css in the src directory and add the following:

.bookmark-list {
  padding: 10px;
}

Then, import the CSS file into BookmarkList.js:

import './BookmarkList.css';

Building the Bookmark Form Component

The BookmarkForm component will allow users to add new bookmarks. It will include input fields for the title and URL, and a button to submit the form.

Creating the BookmarkForm Component File

Create a new file named BookmarkForm.js in the src directory.

Code for BookmarkForm.js

import React, { useState } from 'react';

function BookmarkForm({ onAdd }) {
  const [title, setTitle] = useState('');
  const [url, setUrl] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (title.trim() && url.trim()) {
      onAdd({ title, url });
      setTitle('');
      setUrl('');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="bookmark-form">
      <label htmlFor="title">Title:</label>
      <input
        type="text"
        id="title"
        value={title}
        onChange={e => setTitle(e.target.value)}
      />
      <label htmlFor="url">URL:</label>
      <input
        type="text"
        id="url"
        value={url}
        onChange={e => setUrl(e.target.value)}
      />
      <button type="submit">Add Bookmark</button>
    </form>
  );
}

export default BookmarkForm;

Explanation

  • Import useState: import { useState } from 'react'; imports the useState hook, which allows us to manage the component’s state.
  • Component Definition: function BookmarkForm({ onAdd }) { ... } defines the BookmarkForm component. It receives one prop:
    • onAdd: A function to handle adding a new bookmark.
  • State Variables:
    • const [title, setTitle] = useState('');: Creates a state variable named title and a function setTitle to update it. The initial value is an empty string.
    • const [url, setUrl] = useState('');: Creates a state variable named url and a function setUrl to update it. The initial value is an empty string.
  • handleSubmit Function:
    • const handleSubmit = (e) => { ... }: This function is called when the form is submitted.
    • e.preventDefault();: Prevents the default form submission behavior (page reload).
    • if (title.trim() && url.trim()) { ... }: Checks if both the title and URL fields are not empty after trimming whitespace.
    • onAdd({ title, url });: Calls the onAdd function, passing the title and URL as an object.
    • setTitle(''); and setUrl('');: Resets the input fields to empty strings after adding the bookmark.
  • JSX (Form Elements):
    • <form onSubmit={handleSubmit} className="bookmark-form"> ... </form>: Creates a form that calls the handleSubmit function when submitted.
    • <label> and <input>: Creates input fields for the title and URL.
    • value={title} and value={url}: Bind the input fields to the state variables.
    • onChange={e => setTitle(e.target.value)} and onChange={e => setUrl(e.target.value)}: Update the state variables when the input fields change.
    • <button type="submit">Add Bookmark</button>: Creates a submit button.
  • Exporting the Component: export default BookmarkForm; makes the BookmarkForm component available for use.

Styling (Optional)

You can add CSS to style the bookmark form. Create a file named BookmarkForm.css in the src directory and add the following:

.bookmark-form {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.bookmark-form label {
  margin-bottom: 5px;
  font-weight: bold;
}

.bookmark-form input {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.bookmark-form button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

Then, import the CSS file into BookmarkForm.js:

import './BookmarkForm.css';

Building the Main App Component (App.js)

The App component will be the main component of our application. It will manage the overall state of the bookmarks and render the other components.

Modifying App.js

Open src/App.js and replace the existing code with the following:

import React, { useState, useEffect } from 'react';
import BookmarkList from './BookmarkList';
import BookmarkForm from './BookmarkForm';
import './App.css';

function App() {
  const [bookmarks, setBookmarks] = useState(() => {
    const savedBookmarks = localStorage.getItem('bookmarks');
    return savedBookmarks ? JSON.parse(savedBookmarks) : [];
  });

  useEffect(() => {
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }, [bookmarks]);

  const handleAddBookmark = (newBookmark) => {
    const id = Math.random().toString(36).substring(2, 15);
    setBookmarks([...bookmarks, { ...newBookmark, id }]);
  };

  const handleDeleteBookmark = (id) => {
    setBookmarks(bookmarks.filter(bookmark => bookmark.id !== id));
  };

  return (
    <div className="app">
      <h1>My Bookmarks</h1>
      <BookmarkForm onAdd={handleAddBookmark} />
      <BookmarkList bookmarks={bookmarks} onDelete={handleDeleteBookmark} />
    </div>
  );
}

export default App;

Explanation

  • Import Statements: Imports React, useState, useEffect, BookmarkList, BookmarkForm, and App.css.
  • State Variables:
    • const [bookmarks, setBookmarks] = useState(() => { ... });: This line initializes the bookmarks state variable using the useState hook. The initial value is set using a function that checks for saved bookmarks in local storage.
      • localStorage.getItem('bookmarks') retrieves the bookmarks from local storage.
      • If bookmarks exist in local storage, JSON.parse(savedBookmarks) converts the JSON string back into a JavaScript array.
      • If there are no bookmarks in local storage, the initial value is an empty array ([]).
  • useEffect Hook:
    • useEffect(() => { ... }, [bookmarks]);: This hook is used to save the bookmarks to local storage whenever the bookmarks state changes.
    • localStorage.setItem('bookmarks', JSON.stringify(bookmarks));: This line saves the bookmarks to local storage as a JSON string.
  • handleAddBookmark Function:
    • const handleAddBookmark = (newBookmark) => { ... }: This function is called when a new bookmark is added through the BookmarkForm.
    • const id = Math.random().toString(36).substring(2, 15);: Generates a unique ID for the new bookmark.
    • setBookmarks([...bookmarks, { ...newBookmark, id }]);: Updates the bookmarks state by adding the new bookmark to the existing array.
  • handleDeleteBookmark Function:
    • const handleDeleteBookmark = (id) => { ... }: This function is called when a bookmark is deleted.
    • setBookmarks(bookmarks.filter(bookmark => bookmark.id !== id));: Updates the bookmarks state by filtering out the bookmark with the matching ID.
  • JSX (Rendering Components):
    • <h1>My Bookmarks</h1>: Displays the app’s title.
    • <BookmarkForm onAdd={handleAddBookmark} />: Renders the BookmarkForm component and passes the handleAddBookmark function as a prop.
    • <BookmarkList bookmarks={bookmarks} onDelete={handleDeleteBookmark} />: Renders the BookmarkList component and passes the bookmarks array and the handleDeleteBookmark function as props.
  • Exporting the Component: export default App; makes the App component available.

Styling (Optional)

You can add CSS to style the main app component. Create a file named App.css in the src directory and add the following:

.app {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.app h1 {
  text-align: center;
  margin-bottom: 20px;
}

Connecting the Components

Now that we’ve created all the components, let’s connect them in App.js. The App component will act as the parent component, managing the state of the bookmarks and passing data and functions to its child components (BookmarkList and BookmarkForm).

Inside App.js, we have already connected the components. The App component:

  • Imports BookmarkList and BookmarkForm.
  • Manages the bookmarks state.
  • Passes the bookmarks data and the handleDeleteBookmark function to the BookmarkList component.
  • Passes the handleAddBookmark function to the BookmarkForm component.

Testing and Running the App

With the code in place, it’s time to test and run our bookmarking app. Make sure your development server is still running (npm start). If not, start it in your terminal. You should see the following:

  • A form with fields for Title and URL.
  • A list of bookmarks (initially empty).

Adding Bookmarks

  1. Enter a title and URL into the form fields.
  2. Click the “Add Bookmark” button.
  3. The new bookmark should appear in the list below.

Deleting Bookmarks

  1. Click the “Delete” button next to a bookmark.
  2. The bookmark should be removed from the list.

Persistence with Local Storage

To verify that the bookmarks are saved and loaded correctly:

  1. Add a few bookmarks.
  2. Refresh the page in your browser.
  3. The bookmarks should still be there!

Common Mistakes and How to Fix Them

As you build your bookmarking app, you might encounter some common mistakes. Here’s a guide to help you troubleshoot and resolve them:

1. Incorrect Import Paths

Problem: You might encounter errors like “Module not found” or “Cannot find module.”

Solution: Double-check your import statements. Make sure you’re using the correct relative paths to import your components and CSS files. For example:

import Bookmark from './Bookmark'; // Correct
import Bookmark from '../components/Bookmark'; // Incorrect if Bookmark.js is in the same directory

2. Missing or Incorrect Keys in map

Problem: You might see a warning in the console: “Each child in a list should have a unique ‘key’ prop.” This can lead to unexpected behavior when adding, deleting, or reordering bookmarks.

Solution: When rendering a list of items using .map(), always provide a unique key prop to each element. In our case, we used key={bookmark.id}. Make sure your bookmark objects have unique IDs.

3. State Not Updating Correctly

Problem: The UI doesn’t update when you add or delete bookmarks.

Solution: Make sure you are correctly updating the state using the setBookmarks function. Remember to use the spread operator (...) when updating arrays or objects to create new instances of the data, rather than modifying the original ones directly. For example:

setBookmarks([...bookmarks, { ...newBookmark, id }]); // Correct
// Incorrect:  This might not trigger a re-render
bookmarks.push(newBookmark);
setBookmarks(bookmarks);

4. Form Not Resetting After Submission

Problem: The input fields in the form don’t clear after you add a bookmark.

Solution: In your handleSubmit function, make sure you’re resetting the state variables (title and url) to empty strings after you’ve successfully added the bookmark:

setTitle('');
setUrl('');

5. Data Not Persisting in Local Storage

Problem: Bookmarks disappear when you refresh the page.

Solution: Double-check that you’re correctly using useEffect to save bookmarks to local storage whenever the bookmarks state changes. Make sure you are also retrieving the bookmarks from local storage when the component first mounts. Verify that you are stringifying the data before saving it, and parsing it when retrieving it.

Key Takeaways and Next Steps

Congratulations! You’ve successfully built a simple bookmarking app using React. Here’s a summary of what you’ve learned:

  • Component-Based Architecture: You’ve learned to break down your app into reusable components (Bookmark, BookmarkList, BookmarkForm, and App).
  • State Management: You’ve used the useState hook to manage the state of your bookmarks.
  • Event Handling: You’ve handled user interactions (form submission, button clicks).
  • Rendering Lists: You’ve used the .map() function to render lists of data.
  • Local Storage: You’ve learned how to persist data across sessions using local storage.

This project is a solid foundation for your React journey. Here are some ideas for next steps to enhance your bookmarking app and further your React skills:

  • Implement Editing: Add functionality to edit existing bookmarks.
  • Add Search/Filtering: Allow users to search for bookmarks by title or URL.
  • Improve UI/UX: Enhance the visual design and user experience of your app. Consider using a UI library like Material UI or Bootstrap.
  • Implement Categories/Tags: Allow users to categorize their bookmarks.
  • Deploy Your App: Deploy your app to a platform like Netlify or Vercel so you can share it with others.
  • Explore Advanced State Management: For more complex applications, consider using a state management library like Redux or Zustand.

Remember that the best way to learn is by doing. Experiment with different features, explore the React documentation, and don’t be afraid to make mistakes. Each error is an opportunity to learn and grow as a developer. Keep building, keep coding, and enjoy the process of creating!

More posts