Build a Simple React JavaScript Interactive Interactive Text-Based Code Diff Viewer: A Beginner’s Guide

Written by

learnmodernjavascript

in

In the world of software development, comparing code changes is a daily necessity. Whether you’re collaborating with a team, tracking your own progress, or simply trying to understand the evolution of a codebase, the ability to visualize the differences between two versions of text is invaluable. This is where a code diff viewer comes in. In this tutorial, we’ll build a simple, interactive code diff viewer using React.js, a popular JavaScript library for building user interfaces. We’ll break down the process step-by-step, making it easy for beginners to grasp the concepts and build their own tool.

Why Build a Code Diff Viewer?

Code diff viewers are essential tools for:

  • Version Control: Understanding changes made in Git, SVN, or other version control systems.
  • Collaboration: Reviewing code changes proposed by others.
  • Debugging: Identifying the source of bugs by comparing working and broken code.
  • Learning: Studying how code evolves over time.

Building your own diff viewer offers a unique learning experience. You’ll gain a deeper understanding of string manipulation, algorithm design, and React component architecture. Plus, you’ll have a custom tool tailored to your specific needs.

Prerequisites

Before we begin, make sure you have the following:

  • Basic knowledge of HTML, CSS, and JavaScript: You should be familiar with the basics of web development.
  • Node.js and npm (or yarn) installed: These are necessary for managing project dependencies.
  • A code editor: Choose your favorite editor, such as VS Code, Sublime Text, or Atom.
  • A basic understanding of React: While we’ll cover the essentials, some prior experience with React components, state, and props will be helpful.

Setting Up the Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app code-diff-viewer
cd code-diff-viewer

This will create a new React project named `code-diff-viewer`. Navigate into the project directory using `cd code-diff-viewer`.

Project Structure

Our project will have a simple structure:

  • src/App.js: This will be the main component of our application, where we’ll implement the code diff viewer logic.
  • src/App.css: We’ll use this file for basic styling.
  • src/index.js: The entry point of our React application.

Implementing the Code Diff Logic

The core of our application is the code diff algorithm. We’ll use a simple approach to highlight the differences between two strings of text. We’ll identify added, removed, and unchanged lines.

First, create a new file in the `src` directory called `diff.js`. This file will contain our diffing function.

// src/diff.js

export function diff(oldText, newText) {
  const oldLines = oldText.split('n');
  const newLines = newText.split('n');
  const diffs = [];

  let oldIndex = 0;
  let newIndex = 0;

  while (oldIndex < oldLines.length || newIndex < newLines.length) {
    if (oldLines[oldIndex] === newLines[newIndex]) {
      if (oldIndex < oldLines.length) {
          diffs.push({ type: 'unchanged', line: newLines[newIndex] });
      }
      oldIndex++;
      newIndex++;
    } else {
      let oldLine = oldLines[oldIndex];
      let newLine = newLines[newIndex];
      let oldType = 'removed';
      let newType = 'added';

      //Handle edge cases
      if(oldIndex >= oldLines.length){
          oldLine = null;
          oldType = null;
      }
      if(newIndex >= newLines.length){
          newLine = null;
          newType = null;
      }

      if(oldLine !== null && newLine !== null && oldLine.trim() === newLine.trim()) {
          diffs.push({type: 'changed', line: newLine});
          oldIndex++;
          newIndex++;
      } else {
          if(oldType) {
              diffs.push({ type: oldType, line: oldLine });
          }
          if(newType) {
              diffs.push({ type: newType, line: newLine });
          }
          oldIndex++;
          newIndex++;
      }
    }
  }

  return diffs;
}

This `diff` function takes two strings, `oldText` and `newText`, as input and returns an array of objects. Each object represents a line of code and has the following properties:

  • type: The type of change (‘added’, ‘removed’, or ‘unchanged’).
  • line: The line of code itself.

Building the React Component

Now, let’s create the React component that will use this `diff` function. Open `src/App.js` and replace its contents with the following code:

// src/App.js
import React, { useState } from 'react';
import { diff } from './diff';
import './App.css';

function App() {
  const [oldText, setOldText] = useState('');
  const [newText, setNewText] = useState('');
  const diffResult = diff(oldText, newText);

  return (
    <div className="App">
      <h2>Code Diff Viewer</h2>
      <div className="input-container">
        <div className="input-group">
          <label htmlFor="oldText">Old Text:</label>
          <textarea
            id="oldText"
            value={oldText}
            onChange={(e) => setOldText(e.target.value)}
          />
        </div>
        <div className="input-group">
          <label htmlFor="newText">New Text:</label>
          <textarea
            id="newText"
            value={newText}
            onChange={(e) => setNewText(e.target.value)}
          />
        </div>
      </div>
      <div className="diff-container">
        {diffResult.map((line, index) => (
          <div key={index} className={`line ${line.type}`}>
            {line.line}
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import `useState` from React, our `diff` function, and the `App.css` file for styling.
  • State Variables: We use `useState` to manage two state variables: `oldText` and `newText`. These hold the text from the two textareas.
  • Diff Calculation: We call the `diff` function, passing in `oldText` and `newText`, and store the result in `diffResult`.
  • JSX Structure:
    • We have a main `<div>` with the class `App`.
    • Two `<textarea>` elements allow users to enter the old and new text. The `onChange` event handlers update the `oldText` and `newText` state variables.
    • A `<div>` with the class `diff-container` displays the diff results. We iterate over the `diffResult` array using the `map` function.
    • Each line is rendered as a `<div>` with the class `line` and a class indicating the type of change (`added`, `removed`, or `unchanged`).

Styling the Component

To make the diff viewer visually appealing, we’ll add some CSS styles. Open `src/App.css` and add the following:

/* src/App.css */
.App {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.input-container {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.input-group {
  flex: 1;
  margin: 0 10px;
}

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

textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.diff-container {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  white-space: pre-wrap;
}

.line {
  padding: 2px 0;
}

.added {
  background-color: #e6ffed;
  color: #24292e;
}

.removed {
  background-color: #ffeef0;
  color: #24292e;
}

.unchanged {
  color: #24292e;
}

These styles:

  • Set basic layout and font styles.
  • Style the input textareas and the diff container.
  • Apply different background colors to added and removed lines.

Running the Application

Now, start the development server by running the following command in your terminal:

npm start

This will open your application in your default web browser at `http://localhost:3000`. You should see two textareas and the diff output below them.

Testing the Code Diff Viewer

To test the viewer, copy and paste some text into the “Old Text” and “New Text” textareas. Modify the text in the “New Text” textarea and observe the changes in the diff output. You should see added lines highlighted in green, removed lines highlighted in red, and unchanged lines in the default color.

For example, try the following:

Old Text:


function add(a, b) {
  return a + b;
}

New Text:


function subtract(a, b) {
  return a - b;
}

You should see the `add` function highlighted as removed and the `subtract` function highlighted as added.

Common Mistakes and Solutions

Here are some common mistakes and how to fix them:

  • Incorrect import path for `diff.js`: Double-check that the import path in `src/App.js` is correct. It should be `./diff`.
  • Missing or incorrect CSS styles: Ensure that you’ve added the CSS styles to `src/App.css` and that the class names in `src/App.js` match the CSS selectors.
  • Incorrect handling of line breaks: The `diff` function splits the text into lines using `n`. Make sure your textareas use line breaks correctly.
  • Not updating the state correctly: Make sure you are using the `setOldText` and `setNewText` functions to update the state when the text in the textareas changes.

Advanced Features (Optional)

You can extend this simple code diff viewer with more advanced features:

  • Inline Diffing: Instead of highlighting entire lines, highlight the specific characters that have changed. This requires a more complex diffing algorithm.
  • Syntax Highlighting: Use a library like Prism.js or highlight.js to add syntax highlighting to the code.
  • Collapsible Sections: Allow users to collapse and expand unchanged sections of code to reduce clutter.
  • File Upload: Add the ability to upload files to compare their contents.
  • User Interface Enhancements: Improve the user interface with features like a reset button, the ability to switch between different themes, and responsiveness for mobile devices.

Key Takeaways

  • Component-Based Architecture: React components are the building blocks of your UI.
  • State Management: Use `useState` to manage the dynamic data in your application.
  • Event Handling: React’s event handling system allows you to respond to user interactions.
  • CSS Styling: CSS is essential for creating visually appealing user interfaces.
  • Algorithm Implementation: Code diffing involves implementing algorithms to compare and highlight differences between texts.

FAQ

Q: How can I improve the performance of the diffing algorithm?

A: For large files, consider using a more optimized diffing algorithm, such as the Myers diff algorithm, which is known for its efficiency.

Q: How can I handle special characters in the code?

A: Ensure your code diff algorithm and display handle special characters correctly, such as by escaping them or using a library that handles them. Also, use the `<pre>` tag and `white-space: pre-wrap` in your CSS to preserve formatting.

Q: How can I integrate this viewer into a larger application?

A: You can integrate this viewer into a larger application by importing the `App` component and passing the text to compare as props. You can also add features such as the ability to save the diff output, or to compare the current code with the committed code in a repository.

Q: What are some good resources for learning more about React?

A: The official React documentation is an excellent starting point. Additionally, websites like MDN Web Docs, freeCodeCamp, and Udemy offer comprehensive React tutorials and courses.

Q: How can I deploy this application?

A: You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting and make it easy to deploy your projects.

Building a code diff viewer provides a practical and educational experience. You’ve seen how to structure a React application, manage state, and implement a basic diffing algorithm. The combination of these skills is crucial for any developer. By expanding on this foundation, you can adapt it to more complex scenarios. This project not only equips you with the tools to visualize code changes effectively, but also reinforces the core principles of React development. Embrace the opportunity to refine and customize your viewer, making it a valuable asset in your development workflow.

More posts