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

In the world of web development, clean and well-formatted code is paramount. It’s not just about making your code look pretty; it’s about readability, maintainability, and collaboration. Imagine trying to decipher a massive block of code with inconsistent indentation, missing semicolons, and confusing spacing. Nightmare, right? This is where a code formatter comes to the rescue. In this tutorial, we’ll build a simple, interactive code formatter using ReactJS, designed to take messy code and transform it into a beautifully structured, easy-to-understand masterpiece. This project is perfect for beginners and intermediate developers looking to hone their React skills and understand how to manipulate text-based content.

Why Build a Code Formatter?

As developers, we spend a significant amount of time reading and writing code. A well-formatted codebase is a developer’s best friend. It reduces debugging time, makes collaboration smoother, and prevents silly errors caused by overlooked syntax issues. A code formatter automatically corrects these issues, saving you time and frustration. By building your own, you’ll gain practical experience with:

• React component structure and state management.
• Event handling and user input.
• String manipulation and regular expressions (for more advanced formatting).
• Working with external libraries (like a code formatting library).

Setting Up the Project

Let’s get started! We’ll use Create React App to quickly set up our development environment. If you don’t have it installed, open your terminal and run:

npx create-react-app code-formatter-app

Navigate into your newly created project directory:

cd code-formatter-app

Next, install a code formatting library. We’ll use Prettier for this tutorial. In your terminal, run:

npm install prettier --save-dev

This will install Prettier as a development dependency. Prettier will handle the actual formatting of the code. Now, open your project in your preferred code editor.

Building the Code Formatter Component

We’ll create a main component, `CodeFormatter.js`, which will house our code editor, formatting logic, and display the formatted output. Let’s start by creating the basic structure.

// src/CodeFormatter.js
import React, { useState } from 'react';
import prettier from 'prettier';

function CodeFormatter() {
  const [code, setCode] = useState(''); // State to hold the code input
  const [formattedCode, setFormattedCode] = useState(''); // State to hold the formatted code

  const handleInputChange = (event) => {
    setCode(event.target.value); // Update the code state when the input changes
  };

  const formatCode = () => {
    try {
      const formatted = prettier.format(code, {
        parser: 'babel',
        plugins: [], // Add plugins if needed for specific languages
        // Other Prettier options can be set here
      });
      setFormattedCode(formatted); // Update the formatted code state
    } catch (error) {
      setFormattedCode('Error formatting code: ' + error.message); // Handle formatting errors
    }
  };

  return (
    <div>
      <h2>Code Formatter</h2>
      <textarea
        value={code}
        onChange={handleInputChange}
        placeholder="Enter your code here"
        rows="10"
        cols="80"
      />
      <br />
      <button onClick={formatCode}>Format Code</button>
      <br />
      <h3>Formatted Code:</h3>
      <pre><code>{formattedCode}</code></pre>
    </div>
  );
}

export default CodeFormatter;

Let’s break down this code:

• **Import Statements:** We import `React` for creating components, `useState` for managing component state, and `prettier` for code formatting.
• **State Variables:**
  • `code`: Stores the raw code entered by the user. Initialized as an empty string.
  • `formattedCode`: Stores the formatted code. Also initialized as an empty string.
• **`handleInputChange` Function:** This function is triggered whenever the user types in the textarea. It updates the `code` state with the current value of the textarea.
• **`formatCode` Function:** This function is the core of our code formatter. It does the following:
  • Calls `prettier.format()` to format the code. It takes the code and an options object as arguments. The `parser` option specifies the language parser (e.g., ‘babel’ for JavaScript). You might need to adjust this depending on the code you’re formatting (e.g., ‘html’ for HTML, ‘css’ for CSS).
  • Uses a `try…catch` block to handle potential errors during formatting. If an error occurs (e.g., invalid code), the `formattedCode` state is updated with an error message.
  • Updates the `formattedCode` state with the formatted output.
• **JSX Structure:**
  • A `textarea` element for the user to input the code. Its `value` is bound to the `code` state, and its `onChange` event is bound to `handleInputChange`.
  • A button that, when clicked, calls the `formatCode` function.
  • A `pre` and `code` element to display the formatted code. The `formattedCode` state is rendered inside the `code` element.

Integrating the Component into Your App

Now, let’s integrate our `CodeFormatter` component into the main `App.js` file. Replace the contents of `src/App.js` with the following:

// src/App.js
import React from 'react';
import CodeFormatter from './CodeFormatter';
import './App.css'; // Import your CSS file

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

export default App;

Here, we import the `CodeFormatter` component and render it within the main `App` component. Make sure you also import the CSS file to style your application. For now, you can keep the default styles in `App.css` or add your own.

Styling Your Code Formatter

While the basic functionality is in place, let’s add some styling to make our code formatter visually appealing. Open `src/App.css` and add the following styles:

.App {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
}

h2 {
  margin-bottom: 10px;
}

textarea {
  width: 80%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
}

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

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

pre {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto; /* Handle horizontal overflow */
  text-align: left; /* Align code to the left */
}

code {
  font-family: monospace;
  font-size: 14px;
  color: #333;
  white-space: pre-wrap;  /* Preserve whitespace and wrap long lines */
  word-break: break-all; /* Break long words if necessary */
}

These styles provide basic formatting for the app, textarea, button, and formatted code display. Feel free to customize these styles to match your preferences.

Running Your Application

To run your application, open your terminal in the project directory and run:

npm start

This will start the development server, and your code formatter will be accessible in your web browser (usually at `http://localhost:3000`). Now, you can paste some code into the textarea, click the