Build a Simple React JS Interactive Web-Based Bookmarking App: A Beginner’s Guide

Written by

javascriptdebugged

in

In today’s digital age, we’re constantly bombarded with information. Finding and saving valuable resources online is crucial, but managing these links can quickly become overwhelming. This is where a bookmarking app comes in handy. Imagine having a personalized, organized space to store all your favorite websites, articles, and resources, easily accessible whenever you need them. In this tutorial, we’ll build a simple, yet functional, bookmarking application using React JS. This project is perfect for beginners and intermediate developers looking to hone their React skills and create something useful.

Why Build a Bookmarking App?

Beyond the practical benefits of organizing your web resources, building a bookmarking app offers several advantages for your development journey:

  • Practical Application: You’re creating something you can actually use, making the learning process more engaging.
  • Skill Enhancement: You’ll gain hands-on experience with fundamental React concepts like components, state management, event handling, and conditional rendering.
  • Project Portfolio: This project adds a solid piece to your portfolio, showcasing your ability to build interactive web applications.
  • Problem-Solving: You’ll encounter and solve real-world problems, improving your debugging and problem-solving skills.

This tutorial is designed to be a step-by-step guide, breaking down the process into manageable chunks. We’ll start with the basics and gradually build up to a fully functional bookmarking application.

Project Setup: Getting Started

Before diving into the code, let’s set up our development environment. We’ll use Create React App, a popular tool that simplifies the process of setting up a React project. If you don’t have Node.js and npm (Node Package Manager) installed, you’ll need to install them first. You can download them from the official Node.js website.

Once Node.js and npm are installed, open your terminal or command prompt and run the following command to create a new React project:

npx create-react-app bookmarking-app

This command will create a new directory called bookmarking-app with all the necessary files and dependencies. Navigate into the project directory:

cd bookmarking-app

Now, start the development server:

npm start

This will open your app in your default web browser at http://localhost:3000. You should see the default React app’s welcome screen. We’ll be modifying the code within the src directory. Let’s start by cleaning up the default files.

Cleaning Up the Boilerplate

The default Create React App comes with some boilerplate code that we don’t need for our bookmarking app. Let’s clean up the src directory:

  1. Delete the following files: App.test.js, logo.svg, reportWebVitals.js, and setupTests.js.
  2. Open App.js and remove the import for logo.svg and the content inside the <header> tag. Your App.js should now look something like this:
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Bookmarking App</h1>
    </div>
  );
}

export default App;

Open App.css and remove all the default styles. We’ll add our own styles later.

Creating the Bookmark Form Component

The first feature we’ll build is the ability to add new bookmarks. We’ll create a form component to handle user input for the bookmark’s title and URL. Create a new file named BookmarkForm.js inside the src directory. This component will manage the form’s state and handle the submission.

import React, { useState } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (title.trim() === '' || url.trim() === '') {
      alert('Please enter both title and URL.'); // Basic validation
      return;
    }

    const newBookmark = {
      title: title,
      url: url,
      id: Date.now() // Simple unique ID
    };

    onAddBookmark(newBookmark);
    setTitle('');
    setUrl('');
  };

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

export default BookmarkForm;

Let’s break down this code:

  • Import useState: We import the useState hook to manage the form’s input values (title and URL).
  • State Variables: We declare two state variables, title and url, and their corresponding setter functions, setTitle and setUrl.
  • handleSubmit Function: This function is called when the form is submitted. It prevents the default form submission behavior, validates the input, creates a new bookmark object, calls the onAddBookmark prop (we’ll define this later in App.js), and clears the form inputs.
  • JSX Form: The JSX renders a simple form with two input fields (title and URL) and a submit button. The onChange event handlers update the state variables as the user types.
  • onAddBookmark Prop: This prop is how the BookmarkForm component communicates with its parent component (App.js) to add the new bookmark.

Creating the Bookmark List Component

Next, we’ll create a component to display the list of bookmarks. Create a new file named BookmarkList.js in the src directory:

import React from 'react';

function BookmarkList({ bookmarks, onDeleteBookmark }) {
  return (
    <ul>
      {bookmarks.map((bookmark) => (
        <li key={bookmark.id}>
          <a href={bookmark.url} target="_blank" rel="noopener noreferrer">
            {bookmark.title}
          </a>
          <button onClick={() => onDeleteBookmark(bookmark.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

export default BookmarkList;

Here’s the breakdown:

  • Receives bookmarks Prop: The component receives an array of bookmark objects as a prop named bookmarks.
  • Uses map to Render Bookmarks: It uses the map function to iterate over the bookmarks array and render a list item (<li>) for each bookmark.
  • Renders a Link: Inside each list item, it renders an <a> tag with the bookmark’s URL and title. The target="_blank" rel="noopener noreferrer" attributes open the link in a new tab, which is good practice for external links.
  • Delete Button: Includes a delete button for each bookmark, calling the onDeleteBookmark prop function (passed from the parent component) to handle deletion.

Integrating Components in App.js

Now, let’s bring these components together in App.js. We’ll manage the state of the bookmarks array and pass the necessary props to the child components.

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

function App() {
  const [bookmarks, setBookmarks] = useState([]);

  const addBookmark = (newBookmark) => {
    setBookmarks([...bookmarks, newBookmark]);
  };

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

  return (
    <div className="App">
      <h1>My Bookmarks</h1>
      <BookmarkForm onAddBookmark={addBookmark} />
      <BookmarkList bookmarks={bookmarks} onDeleteBookmark={deleteBookmark} />
    </div>
  );
}

export default App;

Let’s analyze the code:

  • Import Components: We import BookmarkForm and BookmarkList.
  • State Management: We use the useState hook to manage the bookmarks array. Initially, it’s an empty array.
  • addBookmark Function: This function is called from the BookmarkForm component. It takes a newBookmark object as an argument and updates the bookmarks state by adding the new bookmark to the existing array using the spread operator (...bookmarks).
  • deleteBookmark Function: This function is called from the BookmarkList component. It takes the ID of the bookmark to delete as an argument and filters the bookmarks array to remove the bookmark with that ID.
  • Rendering Components: We render the BookmarkForm and BookmarkList components. We pass the addBookmark function as the onAddBookmark prop to BookmarkForm and the bookmarks array and the deleteBookmark function as the bookmarks and onDeleteBookmark props, respectively, to BookmarkList.

Styling the Application (App.css)

To make the application visually appealing, let’s add some basic CSS styles. Open App.css and add the following code:

.App {
  font-family: sans-serif;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h1 {
  text-align: center;
}

form {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Important for width to include padding */
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li:last-child {
  border-bottom: none;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  text-decoration: underline;
}

These styles provide a basic layout, formatting for the form, button, and list items, and some hover effects. Feel free to customize these styles to match your preferences.

Testing and Refining

Now, test your application in the browser. You should be able to:

  • Enter a title and URL in the form.
  • Click the “Add Bookmark” button.
  • See the bookmark appear in the list.
  • Click the bookmark title to open the link in a new tab.
  • Click the “Delete” button to remove a bookmark.

If something isn’t working as expected, check the following:

  • Console Errors: Open your browser’s developer tools (usually by pressing F12) and check the console for any error messages. These messages often provide clues about what’s going wrong.
  • Component Props: Ensure you’re passing the correct props to the components and that the component is correctly receiving and using these props.
  • State Updates: Verify that the state is being updated correctly using the useState hook and that the UI is re-rendering when the state changes.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners often make and how to address them:

  • Incorrect Import Paths: Double-check your import paths. If you’re importing a component from the same directory, use a relative path (e.g., ./BookmarkForm). Incorrect paths will lead to the component not being found and render errors.
  • Missing Key Prop: When rendering lists of elements using map, always include a unique key prop on each element. This helps React efficiently update the DOM. In our case, we’re using the bookmark.id as the key. Without a key, React might not update the list correctly.
  • Incorrect Event Handling: Ensure you’re using the correct syntax for event handling. For example, use onChange={(e) => setTitle(e.target.value)} to update the input’s value. Using the wrong event handler or not referencing the event object correctly is a frequent error.
  • State Not Updating: If the UI isn’t updating after a state change, make sure you’re using the correct setter function (e.g., setBookmarks) to update the state. Also, ensure that the state variable is correctly passed as a prop to the component that needs it.
  • Unnecessary Re-renders: Avoid creating functions inside your render method, as this can lead to unnecessary re-renders. If you need a function, define it outside the render method or use the useCallback hook to memoize it.

Adding Local Storage (Optional Enhancement)

To make the bookmarking app more persistent, we can store the bookmarks in the browser’s local storage. This way, the bookmarks will be saved even if the user closes the browser or refreshes the page. Here’s how you can implement this:

  1. Import useEffect: In App.js, import the useEffect hook:
import React, { useState, useEffect } from 'react';
  1. Load Bookmarks from Local Storage: Inside the App component, use the useEffect hook to load bookmarks from local storage when the component mounts. This will happen only once when the app loads.
  useEffect(() => {
    const storedBookmarks = localStorage.getItem('bookmarks');
    if (storedBookmarks) {
      setBookmarks(JSON.parse(storedBookmarks));
    }
  }, []); // Empty dependency array means this effect runs only once on mount

This code checks if there are any bookmarks stored in local storage under the key 'bookmarks'. If there are, it parses the JSON string and sets the bookmarks state. The empty dependency array ([]) ensures that this useEffect runs only once, when the component mounts.

  1. Save Bookmarks to Local Storage: Use another useEffect to save the bookmarks state to local storage whenever the bookmarks state changes.
  useEffect(() => {
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }, [bookmarks]); // Runs whenever the bookmarks state changes

This code uses useEffect to save the bookmarks array to local storage whenever the bookmarks state changes. It converts the bookmarks array to a JSON string using JSON.stringify() before storing it. The dependency array [bookmarks] ensures that this effect runs whenever the bookmarks state changes.

With these additions, your bookmarking app will now persist the bookmarks across sessions.

Key Takeaways and Next Steps

In this tutorial, we’ve built a simple bookmarking app using React JS. You’ve learned about:

  • Creating and using React components.
  • Managing state with the useState hook.
  • Handling events (form submission, button clicks).
  • Passing props between components.
  • Rendering lists using map.
  • Basic styling with CSS.
  • (Optional) Using local storage for data persistence.

Next Steps:

  • Add More Features: Consider adding more features to your app, such as:
    • Editing bookmarks.
    • Adding categories or tags to organize bookmarks.
    • Implementing search functionality.
    • Importing/exporting bookmarks.
  • Improve Styling: Experiment with different CSS frameworks (e.g., Bootstrap, Material UI) or CSS-in-JS libraries (e.g., styled-components) to enhance the app’s visual appearance.
  • Deploy Your App: Deploy your app to a platform like Netlify or Vercel to share it with others.
  • Explore Advanced React Concepts: Dive deeper into React by learning about:

    • Context API for managing global state.
    • Custom hooks for reusing logic.
    • Routing with React Router.
    • Form validation.

FAQ

  1. How do I run this project? After cloning the repository or creating the project with create-react-app, navigate to the project directory in your terminal and run npm install to install the dependencies. Then, run npm start to start the development server.
  2. Can I use a different CSS framework? Yes, you can use any CSS framework you prefer (e.g., Bootstrap, Tailwind CSS, Material UI). You’ll need to install the framework and import its CSS files into your project. Replace the existing CSS in App.css with the framework’s styles.
  3. How can I deploy this app? You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting and make it easy to deploy your app with just a few clicks. You typically need to build your app using npm run build before deploying.
  4. What if I want to use a database? For a more robust bookmarking app, you could integrate a database like Firebase, MongoDB, or PostgreSQL. You would need to install a library to interact with the database and modify your code to fetch, store, and update the bookmarks in the database instead of local storage or in-memory storage.

Building this bookmarking app is a great starting point for exploring React. By practicing and experimenting with different features and enhancements, you’ll solidify your understanding of React and become more confident in building web applications. The journey of learning is continuous, so keep exploring, keep coding, and have fun!

More posts