Build a Simple React JavaScript Interactive Vocabulary Builder: A Beginner’s Guide

Written by

learnmodernjavascript

in

Are you a developer eager to expand your React.js skills? Perhaps you’re looking for a project that blends learning with practical application? This tutorial guides you through building a simple, yet effective, Vocabulary Builder application using React. This project provides a hands-on approach to understanding fundamental React concepts such as components, state management, and event handling. Whether you’re a beginner or an intermediate developer, this guide will provide you with the knowledge and tools needed to create a functional vocabulary tool and boost your React proficiency.

Why Build a Vocabulary Builder?

Learning new vocabulary can be challenging. A digital tool that allows users to create, store, and review vocabulary lists can be incredibly helpful. This project offers a tangible way to apply React principles, making the learning process more engaging and rewarding. Furthermore, building this application will give you a solid foundation for more complex React projects.

Project Overview

Our Vocabulary Builder will allow users to:

  • Add new vocabulary words and their definitions.
  • View a list of all added words.
  • Search for specific words.
  • Edit existing word definitions.
  • Delete words from the list.

This project is designed to be straightforward, making it perfect for beginners. We will break down each step, explaining the ‘why’ behind the ‘how’ to ensure you grasp the underlying concepts.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed on your system.
  • A basic understanding of HTML, CSS, and JavaScript.
  • A code editor (e.g., VS Code, Sublime Text).

Setting Up the React Project

Let’s start by creating a new React application. Open your terminal and run the following command:

npx create-react-app vocabulary-builder
cd vocabulary-builder

This command creates a new React project named “vocabulary-builder.” The `cd` command navigates you into the project directory.

Component Structure

Our application will consist of several components:

  • App.js: The main component that renders all other components.
  • WordForm.js: A component for adding new words and their definitions.
  • WordList.js: A component to display the list of vocabulary words.
  • WordItem.js: A component to represent a single word in the list.
  • WordSearch.js: A component for searching words.

Building the Components

1. WordForm.js

This component will handle the form for adding new words. Create a file named `WordForm.js` inside the `src` directory and add the following code:

import React, { useState } from 'react';

function WordForm({ onAddWord }) {
  const [word, setWord] = useState('');
  const [definition, setDefinition] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (word.trim() && definition.trim()) {
      onAddWord({ word, definition });
      setWord('');
      setDefinition('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="word">Word:</label>
      <input
        type="text"
        id="word"
        value={word}
        onChange={(e) => setWord(e.target.value)}
      />
      <br />
      <label htmlFor="definition">Definition:</label>
      <textarea
        id="definition"
        value={definition}
        onChange={(e) => setDefinition(e.target.value)}
      />
      <br />
      <button type="submit">Add Word</button>
    </form>
  );
}

export default WordForm;

Explanation:

  • We import `useState` to manage the form’s input values.
  • `word` and `definition` are state variables that store the input values.
  • `handleSubmit` function is triggered when the form is submitted. It prevents the default form submission behavior, calls the `onAddWord` function (passed as a prop) with the new word and definition, and resets the input fields.
  • The form includes input fields for the word and definition, and a submit button.

2. WordList.js

This component will display the list of vocabulary words. Create a file named `WordList.js` inside the `src` directory and add the following code:

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

function WordList({ words, onDeleteWord, onEditWord }) {
  return (
    <ul>
      {words.map((wordItem) => (
        <WordItem
          key={wordItem.word}
          word={wordItem.word}
          definition={wordItem.definition}
          onDeleteWord={onDeleteWord}
          onEditWord={onEditWord}
        />
      ))}
    </ul>
  );
}

export default WordList;

Explanation:

  • We import `WordItem` component.
  • The component receives a `words` prop, which is an array of word objects.
  • It maps through the `words` array and renders a `WordItem` component for each word.
  • It passes the word, definition, and the `onDeleteWord` and `onEditWord` functions as props to each `WordItem` component.

3. WordItem.js

This component will represent a single word in the list. Create a file named `WordItem.js` inside the `src` directory and add the following code:

import React, { useState } from 'react';

function WordItem({ word, definition, onDeleteWord, onEditWord }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedDefinition, setEditedDefinition] = useState(definition);

  const handleDelete = () => {
    onDeleteWord(word);
  };

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onEditWord(word, editedDefinition);
    setIsEditing(false);
  };

  const handleCancel = () => {
    setIsEditing(false);
    setEditedDefinition(definition);
  };

  return (
    <li>
      {!isEditing ? (
        <>
          <strong>{word}:</strong> {definition}
          <button onClick={handleEdit}>Edit</button>
          <button onClick={handleDelete}>Delete</button>
        </>
      ) : (
        <>
          <input
            type="text"
            value={editedDefinition}
            onChange={(e) => setEditedDefinition(e.target.value)}
          />
          <button onClick={handleSave}>Save</button>
          <button onClick={handleCancel}>Cancel</button>
        </>
      )}
    </li>
  );
}

export default WordItem;

Explanation:

  • The component receives `word`, `definition`, `onDeleteWord`, and `onEditWord` as props.
  • It manages the editing state using `isEditing`.
  • `handleDelete` calls the `onDeleteWord` function passed from the parent component.
  • `handleEdit` sets `isEditing` to `true`, showing the edit form.
  • `handleSave` calls the `onEditWord` function with the updated definition and sets `isEditing` to `false`.
  • `handleCancel` resets the edit state and the definition to the original value.
  • It conditionally renders the word and definition or an input field for editing, based on `isEditing`.

4. WordSearch.js

This component will handle the search functionality. Create a file named `WordSearch.js` inside the `src` directory and add the following code:

import React from 'react';

function WordSearch({ onSearch }) {
  const handleInputChange = (e) => {
    onSearch(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search words..."
        onChange={handleInputChange}
      />
    </div>
  );
}

export default WordSearch;

Explanation:

  • The component receives an `onSearch` prop, a function to be called when the search input changes.
  • `handleInputChange` calls the `onSearch` function with the current input value.
  • It renders an input field for the user to type in their search query.

5. App.js

This is the main component that orchestrates all other components. Modify your `App.js` file inside the `src` directory with the following code:

import React, { useState } from 'react';
import WordForm from './WordForm';
import WordList from './WordList';
import WordSearch from './WordSearch';

function App() {
  const [words, setWords] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  const addWord = (newWord) => {
    setWords([...words, newWord]);
  };

  const deleteWord = (wordToDelete) => {
    setWords(words.filter((word) => word.word !== wordToDelete));
  };

  const editWord = (wordToEdit, newDefinition) => {
    setWords(
      words.map((word) =>
        word.word === wordToEdit ? { ...word, definition: newDefinition } : word
      )
    );
  };

  const handleSearch = (term) => {
    setSearchTerm(term);
  };

  const filteredWords = words.filter((word) =>
    word.word.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <h2>Vocabulary Builder</h2>
      <WordForm onAddWord={addWord} />
      <WordSearch onSearch={handleSearch} />
      <WordList
        words={filteredWords}
        onDeleteWord={deleteWord}
        onEditWord={editWord}
      />
    </div>
  );
}

export default App;

Explanation:

  • We import the `WordForm`, `WordList`, and `WordSearch` components.
  • `words` is a state variable that stores the array of vocabulary words.
  • `searchTerm` is a state variable that stores the search term.
  • `addWord` adds a new word to the `words` array.
  • `deleteWord` removes a word from the `words` array.
  • `editWord` updates the definition of an existing word.
  • `handleSearch` updates the `searchTerm` state.
  • `filteredWords` filters the words based on the search term.
  • The component renders the `WordForm`, `WordSearch`, and `WordList` components, passing the appropriate props.

Styling the Application (Optional)

To enhance the visual appeal of your application, you can add CSS styles. Create a `style.css` file in the `src` directory and add the following styles:

/* src/style.css */
body {
  font-family: sans-serif;
  margin: 20px;
}

form {
  margin-bottom: 20px;
}

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

input[type="text"], textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

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

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

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

li {
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 4px;
}

To apply these styles, import the CSS file in your `App.js` file:

import './style.css';

Running the Application

To run your application, execute the following command in your terminal:

npm start

This will start the development server, and your application will be accessible in your web browser, typically at `http://localhost:3000`.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect State Updates: When updating state, ensure you are using the correct methods provided by React (e.g., `setState` or the `set…` functions from `useState`). Avoid directly modifying the state variables.
  • Missing or Incorrect Prop Passing: Double-check that you are passing the correct props to your child components. Ensure the prop names match what the child component expects.
  • Incorrect Event Handling: Make sure you are using the correct event handlers (e.g., `onChange`, `onClick`, `onSubmit`) and that they are correctly bound to the appropriate elements.
  • Forgetting to Import Components: Always remember to import the components you are using in your main component file.
  • Not Handling Edge Cases: Consider edge cases, such as empty input fields or invalid data, and handle them appropriately in your code.

Key Takeaways

  • Components: React applications are built with components, which are reusable and modular.
  • State Management: Using `useState` to manage the state of your components is crucial.
  • Props: Props are used to pass data from parent to child components.
  • Event Handling: Handling user interactions is essential for building interactive applications.
  • Component Composition: Building complex user interfaces by composing smaller, reusable components.

FAQ

1. How do I add more features to my Vocabulary Builder?

You can add features like:

  • Import/Export vocabulary lists.
  • Integration with a dictionary API to fetch definitions automatically.
  • Flashcard mode for studying.
  • Categorization of words.

2. How can I improve the performance of my application?

Optimize performance by:

  • Using memoization techniques to prevent unnecessary re-renders.
  • Optimizing the rendering of lists using keys.
  • Lazy loading components.

3. How do I deploy this application?

You can deploy your React application using services like Netlify, Vercel, or GitHub Pages. These services provide easy-to-use deployment options. You will need to build your application first by running `npm run build` in your terminal, and then upload the generated `build` folder to your chosen deployment service.

4. Can I use a different state management library?

Yes, you can use other state management libraries like Redux, Zustand, or MobX for more complex applications. For this simple project, `useState` is sufficient.

5. How can I make the application responsive?

To make the application responsive, you can use CSS media queries to adjust the layout and styling based on the screen size. You can also use responsive design frameworks like Bootstrap or Tailwind CSS.

Building a Vocabulary Builder in React is a rewarding project that allows you to solidify your understanding of React fundamentals. You’ve learned how to create components, manage state, handle user input, and build a functional application. As you continue to build and experiment with more features, you’ll become more proficient in React. Remember, the best way to learn is by doing, so keep building, keep experimenting, and keep exploring the amazing world of React development.

More posts