Build Your Markdown Editor with React | My Co.Lab Insights

Markdown is becoming increasingly popular due to its simplicity and ease of use while writing content.

React is a native JavaScript library that allows you to create user interfaces. By combining these two technologies, we can develop a Markdown editor that enables users to compose and preview Markdown material in real time.

Markdown is one of the most effective methods of formatting information, and it is extensively used on blogging sites to boost visual appeal.

In this article, we'll learn how to create a Markdown editor with React.

Prerequisites

Before we begin:

• Have a basic understanding of React
• Ensure Node.js is configured on your system.
• A text editor: preferably VScode (I prefer Visual Studio code because of its simplicity)

What is Markdown?

Markdown is a straightforward text format. It presents HTML (Hypertext Markup Language) as a simple, fundamental, and easy-to-write alternative. Users can structure and arrange their content using Markdown.

You can use several formatting syntaxes with markdowns, such as headers, emphasis (bold and italic), lists, links, photos, and more in a markdown.

Why use Markdown?

• Markdown simplifies text formatting without complex HTML tags.
• Markdown prioritizes readability and separates content from presentation.
• Markdown files can be reused across different components or pages.
• Numerous libraries and tools support Markdown rendering.
• Markdown enhances text formatting, readability, and reusability.

1. Setting Up the Project

First, let's create a new React project using the Create React appor theVite tool.

I recommend using the Vite tool to create a React boilerplate, although create react app is also a good option.

The reason for my preference is that Vite is not only faster for development but also easier to configure. Additionally, Vite is more versatile than the create react app.

• Open your terminal and run the following command:

npx create-react-app . or npx create-vite@latest .

I'm using the period because I'm inside the folder. Using the period (.) is just a shortcut when you're sure you're in the folder.

But if you haven't done so, once you've created the project, make sure to navigate into the project directory.

cd markdown-editor

• Installing Dependencies

Next, we need to install a Markdown parser and a React Markdown component. We'll use marked, a fast markdown parser, and react-markdown, a React component, to render Markdown as React components. Install these dependencies by running:

npm install marked react-markdown

Source: react-markdown

2. Creating the Markdown Editor Component

Now, let's create a new file named MarkdownEditor.js inside the src directory. This component will consist of a textarea for inputting Markdown content and a preview section to display the rendered HTML.

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState('');

  const handleChange = (event) => {
    setMarkdown(event.target.value);
  };

  return (
    <div>
      <textarea
        value={markdown}
        onChange={handleChange}
        placeholder="Enter Markdown..."
        rows={10}
        cols={50}
      />
      <div>
        <h2>Preview</h2>
        <ReactMarkdown>{markdown}</ReactMarkdown>
      </div>
    </div>
  );
};

export default MarkdownEditor;

In the code above the useState() hook takes the value of the user. It is simply used to store the variable and set an update whenever there is a change and the onChange event is used when there is an update or change.

3. Integrating the Markdown Editor Component

Now, let's integrate the MarkdownEditor component into our App component. Open src/App.js and replace its contents with the following code:

App.jsx

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

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

export default App;

4. Running the Application

Once you've saved your code, run our React application, and go back to your browser. You should see something similar to the result below.

For Vite, use npm run dev.
For Create React App, run npm start

This command will start the development server, and you should see your Markdown editor running in your default web browser at http://localhost:5173 or http://localhost:3000.

Result

Conclusion

In conclusion, making a Markdown editor using React is a simple yet effective way to create content. While React works well for many projects, it's important to think about what each project needs and consider other options if necessary. But don't worry, React is popular and keeps getting better, so it's a smart choice for web development.

If you're new to React, don't be afraid to learn and try new things. Knowing React is a valuable skill that can open doors to job opportunities. And by working on projects like those in Co.Lab, you'll see how React can solve real problems.

Now that you've learned how to make a Markdown editor, you can try making other cool things too! Maybe a to-do list app, a weather forecast for your area, or a simple game like tic-tac-toe. Just keep practising and trying new ideas. That's how you'll get good at React.

Keep coding, keep learning, and keep challenging yourself. You'll be amazed at what you can do with React!

Frequently Asked Questions | FAQ

1. Q: Was there a time when you used React in your Co.Lab project?

A: Yes, React was important for our Co.Lab project. We had to make a website that showed real-time flight information using React it was easy

1. Q: How did you use React to solve a problem?

A: As a front-end developer at Co.lab, we used React to quickly build the user interface.

3.** Q: Do you think that it is worth learning React for aspiring developers?**

A: Absolutely! React is widely used in the industry for building modern web applications due to its efficiency, scalability, and robust ecosystem.

If you've found value in this tutorial, consider sharing it with fellow developers who might also benefit.
Stay updated with my latest projects by following me on Twitter and LinkedIn or check out my BioDrop.
If you'd like to show your support, you can also Buy me a drink🍷

Thank you for taking the time to read💖