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

Written by

learnmodernjavascript

in

In the world of web development, clean and readable code is paramount. It’s not just about making your code work; it’s about making it maintainable, understandable, and collaborative. Imagine working on a project with a team, and everyone has their own coding style. It quickly becomes a mess, right? This is where code beautifiers come in. They automatically format and structure your code, making it easier to read and debug. In this tutorial, we’ll build a simple, interactive code beautifier using ReactJS. This project will introduce you to fundamental React concepts while providing a practical tool for improving your coding workflow.

Why Build a Code Beautifier?

As a senior software engineer and technical content writer, I’ve seen firsthand the benefits of clean code. It reduces the time spent on debugging, allows for easier collaboration, and improves overall code quality. A code beautifier automates the process of formatting your code, saving you time and effort. This project will help you understand how to:

  • Work with React components and JSX.
  • Handle user input and state management.
  • Integrate with external libraries or APIs (in this case, a code formatting library).
  • Build a functional and interactive user interface.

This tutorial is designed for beginners to intermediate developers who want to deepen their understanding of ReactJS and build a practical tool. We’ll break down the project into manageable steps, explaining each concept in simple language with clear examples.

Setting Up the Project

Before we start, make sure you have Node.js and npm (Node Package Manager) installed on your system. These are essential for managing project dependencies and running React applications. If you don’t have them, you can download them from the official Node.js website: https://nodejs.org/.

Let’s create a new React project using Create React App. Open your terminal or command prompt and run the following command:

npx create-react-app code-beautifier
cd code-beautifier

This command creates a new React project named “code-beautifier” and navigates into the project directory. Now, let’s install the necessary dependency: a code formatting library. We’ll use “prettier” for this purpose, a popular and versatile code formatter. Run the following command in your terminal:

npm install prettier

This command installs Prettier as a project dependency. Now, you’re ready to start coding.

Building the Code Beautifier Component

Let’s create the main component for our code beautifier. We’ll call it CodeBeautifier.js. Inside the src directory of your project, create a new file named CodeBeautifier.js. This component will handle user input, formatting, and displaying the formatted code.

Here’s the basic structure of the CodeBeautifier.js file:

import React, { useState } from 'react';
import prettier from 'prettier';

function CodeBeautifier() {
  const [code, setCode] = useState('');
  const [formattedCode, setFormattedCode] = useState('');

  const handleInputChange = (event) => {
    setCode(event.target.value);
  };

  const handleFormat = () => {
    try {
      const formatted = prettier.format(code, { parser: 'babel' }); // You can change the parser as needed
      setFormattedCode(formatted);
    } catch (error) {
      setFormattedCode('Error formatting code: ' + error.message);
    }
  };

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

export default CodeBeautifier;

Let’s break down this code:

  • Import Statements: We import React, useState (for state management), and prettier (the code formatting library).
  • State Variables:
    • code: Stores the code entered by the user.
    • formattedCode: Stores the formatted code.
  • handleInputChange Function: This function updates the code state whenever the user types in the textarea.
  • handleFormat Function:
    • This function is triggered when the user clicks the “Format Code” button.
    • It uses the prettier.format() function to format the code. The first argument is the code to be formatted, and the second is an options object. In this case, we specify the parser as ‘babel’, which is suitable for JavaScript and JSX code. You may need to change the parser depending on the code you are formatting (e.g., ‘html’, ‘css’, etc.).
    • It updates the formattedCode state with the formatted code.
    • It includes a try...catch block to handle potential errors during formatting.
  • JSX Structure:
    • We have a heading, a textarea for the user to enter code, a button to trigger formatting, and a section to display the formatted code.
    • The value attribute of the textarea is bound to the code state, and the onChange event is handled by handleInputChange.
    • The formatted code is displayed inside a <pre><code> block to preserve formatting and syntax highlighting (if your browser supports it).

Integrating the Component into Your App

Now that we have our CodeBeautifier component, let’s integrate it into our main application. Open src/App.js and modify it as follows:

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

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

export default App;

Here, we import the CodeBeautifier component and render it within the App component. This will display our code beautifier in the browser.

Running the Application

To run the application, open your terminal or command prompt, navigate to your project directory (code-beautifier), and run the following command:

npm start

This command starts the development server, and your application should open in your default web browser at http://localhost:3000 (or a different port if 3000 is already in use). You should see the code beautifier interface, including a text area, a format button, and a display area for the formatted code.

Testing the Code Beautifier

Now, let’s test our code beautifier. Copy and paste some unformatted JavaScript code into the textarea. For example, you can use the following code:

function  add(a,b){return a+b;}
console.log(add(2,3));

Click the “Format Code” button. The code beautifier should format the code, making it more readable:

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));

If you see the formatted code, congratulations! Your code beautifier is working. You can try different code snippets and experiment with different code types (HTML, CSS, etc.) by changing the parser option in the prettier.format() function. For example, to format HTML, you would use { parser: 'html' }.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Import of Prettier: Make sure you have correctly imported prettier at the top of your CodeBeautifier.js file: import prettier from 'prettier';.
  • Parser Errors: If you get an error that the parser is not recognized, ensure you have the correct parser specified in the prettier.format() options. For example, use { parser: 'babel' } for JavaScript, { parser: 'html' } for HTML, and { parser: 'css' } for CSS.
  • Typos in JSX: Double-check your JSX for any typos or syntax errors. Common mistakes include missing closing tags or incorrect attribute names.
  • Console Errors: Open your browser’s developer console (usually by pressing F12) to check for any error messages. These messages can provide valuable clues about what’s going wrong.
  • Prettier Not Formatting: If Prettier doesn’t seem to be formatting, check the Prettier configuration. By default, Prettier uses its own set of rules. You can customize these rules by creating a .prettierrc.js file in the root of your project.

Customizing the Code Beautifier

You can customize the code beautifier to meet your specific needs. Here are some ideas:

  • Add Syntax Highlighting: Implement syntax highlighting to make the formatted code even more readable. You can use libraries like Prism.js or highlight.js.
  • Add Options for Prettier: Allow users to customize Prettier options like tab width, print width, and more. You can add a settings panel where users can select their preferred formatting options.
  • Support Different Languages: Extend the code beautifier to support multiple programming languages by allowing users to select a language from a dropdown menu, which then changes the parser used by Prettier.
  • Implement a Theme Switcher: Allow users to switch between light and dark themes for better readability.
  • Add Error Handling: Improve error handling to provide more informative error messages to the user.

Key Takeaways

In this tutorial, you’ve learned how to build a simple, yet functional, code beautifier using ReactJS and Prettier. You’ve gained experience with:

  • Creating React components.
  • Managing state with useState.
  • Handling user input.
  • Integrating with external libraries.
  • Building a basic user interface.

This project is a great starting point for exploring more advanced React concepts and building more complex web applications. Remember, the key to mastering React is practice. Build more projects, experiment with different features, and don’t be afraid to make mistakes. Each project you build will enhance your skills and deepen your understanding of React development.

FAQ

Here are some frequently asked questions about this project:

  1. Can I use this code beautifier for other languages?

    Yes, you can. You’ll need to change the parser option in the prettier.format() function to match the language you’re formatting (e.g., ‘html’, ‘css’, ‘markdown’).

  2. How can I customize the formatting rules?

    You can customize the formatting rules by creating a .prettierrc.js file in the root of your project. This file allows you to specify your preferred formatting options (e.g., tab width, print width).

  3. Why am I getting an error when formatting?

    Make sure you have installed Prettier correctly and that you are using the correct parser option in prettier.format(). Check the browser’s developer console for error messages.

  4. How can I add syntax highlighting to the formatted code?

    You can use a library like Prism.js or highlight.js to add syntax highlighting to your formatted code. You’ll need to include the library in your project and apply it to the <code> element.

  5. What are some other React project ideas for beginners?

    Some other beginner React project ideas include a to-do list app, a simple calculator, a weather app, a currency converter, or a simple e-commerce product filter component.

Building this code beautifier is just the beginning. The skills you’ve acquired—understanding components, managing state, handling user input, and integrating with external libraries—are fundamental to React development. As you continue to build projects, you’ll find yourself becoming more confident and capable. The ability to create tools that enhance your workflow is a valuable skill in any developer’s toolkit. Keep experimenting, keep learning, and keep building. Your journey as a React developer is just starting, and the possibilities are endless.

More posts