Build a React JS Interactive Simple Interactive Component: A Basic Blog Post Editor

Written by

javascriptfundamentals

in

In the digital landscape, content is king, and the ability to create and manage that content efficiently is crucial. Imagine a scenario: you’re a blogger, a journalist, or even a student, and you need to quickly draft, edit, and publish blog posts. Traditional methods can be cumbersome, involving separate text editors, formatting tools, and content management systems. This is where a React JS-based blog post editor comes into play. It streamlines the content creation process, offering a user-friendly interface with real-time formatting, and immediate feedback.

Why Build a Blog Post Editor with React JS?

React JS is a powerful JavaScript library for building user interfaces. Its component-based architecture allows for the creation of reusable UI elements, making development more efficient. React’s virtual DOM and efficient update mechanisms ensure a smooth and responsive user experience. Building a blog post editor with React offers several advantages:

  • Component Reusability: Create reusable components for text input, formatting buttons, and preview sections.
  • Real-time Updates: The virtual DOM updates the UI efficiently, providing instant feedback as users type and format their content.
  • User-Friendly Interface: React makes it easy to design an intuitive and engaging user interface.
  • Single-Page Application (SPA) Capabilities: React facilitates the creation of a seamless, single-page application experience, enhancing user engagement.

Prerequisites

Before we dive in, you’ll need the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server.
  • Basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to grasp the concepts and code.
  • A code editor: Visual Studio Code, Sublime Text, or any other code editor of your choice.

Step-by-Step Guide to Building a Basic Blog Post Editor

1. Setting Up the React 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 blog-post-editor
cd blog-post-editor

This command creates a new React project named “blog-post-editor” and navigates you into the project directory.

2. Project Structure

The project structure will look like this:

blog-post-editor/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── ...
├── package.json
└── ...

The `src` directory is where we’ll be writing our React code. `App.js` is the main component of our application.

3. Creating the Basic Components

We’ll create three main components:

  • Editor Component: This component will contain the text area where the user types the blog post and the formatting toolbar.
  • Preview Component: This component will display a live preview of the formatted content.
  • App Component: This will act as the parent component, managing the state and rendering the Editor and Preview components.

App.js

Let’s modify `src/App.js` to set up the basic structure of the app:

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

function App() {
 const [text, setText] = useState('');

 return (
 <div>
 <div>
 {/* Editor Component will go here */}
 </div>
 <div>
 {/* Preview Component will go here */}
 </div>
 </div>
 );
}

export default App;

App.css

Add some basic styling to `src/App.css`:

.app {
 display: flex;
 flex-direction: row;
 width: 100%;
 height: 100vh;
}

.editor-container {
 width: 50%;
 padding: 20px;
}

.preview-container {
 width: 50%;
 padding: 20px;
 background-color: #f0f0f0;
}

textarea {
 width: 100%;
 height: 600px;
 padding: 10px;
 font-size: 16px;
}

Editor Component (Editor.js)

Create a new file `src/Editor.js`:

import React from 'react';

function Editor(props) {
 return (
 <div>
 <textarea
 value={props.text}
 onChange={props.onChange}
 />
 </div>
 );
}

export default Editor;

Here, the Editor component takes `text` and `onChange` props. The `onChange` prop is a function that updates the text state in the parent component.

Preview Component (Preview.js)

Create a new file `src/Preview.js`:

import React from 'react';

function Preview(props) {
 return (
 <div dangerouslySetInnerHTML={{ __html: props.html }} />
 );
}

export default Preview;

The Preview component receives the HTML content as a prop and renders it using `dangerouslySetInnerHTML`. We’ll use a library to convert the markdown to HTML later.

4. Integrating Components and State Management

Now, let’s integrate these components into `App.js` and manage the state:

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import Editor from './Editor';
import Preview from './Preview';
import './App.css';

function App() {
 const [text, setText] = useState('');

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

 return (
 <div>
 <div>
 <h2>Editor</h2>
 
 </div>
 <div>
 <h2>Preview</h2>
 
 </div>
 </div>
 );
}

export default App;

We’ve:

  • Imported `Editor` and `Preview` components.
  • Imported `ReactMarkdown` to handle Markdown conversion.
  • Used `useState` to manage the `text` state, which holds the content of the blog post.
  • Created a `handleChange` function to update the state when the user types in the editor.
  • Passed the `text` state and `handleChange` function as props to the `Editor` component.
  • Passed the `text` state to the `ReactMarkdown` component.

Install the `react-markdown` package:

npm install react-markdown

5. Adding Formatting Features

Let’s add a toolbar with formatting options (bold, italic, headings, links, etc.). We’ll create a `Toolbar` component.

Toolbar Component (Toolbar.js)

Create a new file `src/Toolbar.js`:

import React from 'react';

function Toolbar(props) {
 const handleFormat = (format) => {
 let formattedText = props.text;
 let selectionStart = props.selectionStart;
 let selectionEnd = props.selectionEnd;

 switch (format) {
 case 'bold':
 formattedText = formattedText.substring(0, selectionStart) + '**' + formattedText.substring(selectionStart, selectionEnd) + '**' + formattedText.substring(selectionEnd);
 break;
 case 'italic':
 formattedText = formattedText.substring(0, selectionStart) + '*' + formattedText.substring(selectionStart, selectionEnd) + '*' + formattedText.substring(selectionEnd);
 break;
 case 'heading':
 formattedText = formattedText.substring(0, selectionStart) + '# ' + formattedText.substring(selectionStart);
 break;
 case 'link':
 formattedText = formattedText.substring(0, selectionStart) + '[' + formattedText.substring(selectionStart, selectionEnd) + '](url)' + formattedText.substring(selectionEnd);
 break;
 default:
 break;
 }

 props.onFormat(formattedText);
 };

 return (
 <div className="toolbar">
 <button onClick={() => handleFormat('bold')}>Bold</button>
 <button onClick={() => handleFormat('italic')}>Italic</button>
 <button onClick={() => handleFormat('heading')}>Heading</button>
 <button onClick={() => handleFormat('link')}>Link</button>
 </div>
 );
}

export default Toolbar;

Add some styling to `App.css`:

.toolbar {
 padding: 10px;
 background-color: #eee;
 margin-bottom: 10px;
}

.toolbar button {
 margin-right: 5px;
 padding: 5px 10px;
 border: 1px solid #ccc;
 background-color: #fff;
 cursor: pointer;
}

Now, modify `src/Editor.js` to include the toolbar and handle the formatting:

import React, { useState, useRef, useEffect } from 'react';
import Toolbar from './Toolbar';

function Editor(props) {
 const textareaRef = useRef(null);
 const [selectionStart, setSelectionStart] = useState(0);
 const [selectionEnd, setSelectionEnd] = useState(0);

 useEffect(() => {
 if (textareaRef.current) {
 textareaRef.current.focus();
 }
 }, []);

 const handleFormat = (formattedText) => {
 props.onChange(formattedText);
 };

 const handleSelectionChange = () => {
 if (textareaRef.current) {
 setSelectionStart(textareaRef.current.selectionStart);
 setSelectionEnd(textareaRef.current.selectionEnd);
 }
 };

 return (
 <div>
 <Toolbar text={props.text} selectionStart={selectionStart} selectionEnd={selectionEnd} onFormat={handleFormat} />
 <textarea
 ref={textareaRef}
 value={props.text}
 onChange={props.onChange}
 onSelect={handleSelectionChange}
 />
 </div>
 );
}

export default Editor;

Modify `src/App.js` to pass the `handleFormat` function to the `Editor` component:

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import Editor from './Editor';
import Preview from './Preview';
import './App.css';

function App() {
 const [text, setText] = useState('');

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

 return (
 <div className="app">
 <div className="editor-container">
 <h2>Editor</h2>
 <Editor text={text} onChange={handleChange} />
 </div>
 <div className="preview-container">
 <h2>Preview</h2>
 <ReactMarkdown children={text} />
 </div>
 </div>
 );
}

export default App;

6. Adding More Features (Optional)

You can enhance the editor with features like:

  • Image Upload: Implement an image upload feature using an input field and server-side handling (e.g., using a library like `react-dropzone`).
  • Code Highlighting: Integrate a code highlighting library (e.g., `prismjs`) in the preview component.
  • Saving and Loading: Use local storage or a backend to save and load the blog post content.
  • Undo/Redo Functionality: Implement undo/redo functionality using the `useReducer` hook or a dedicated library.
  • Spell Check: Integrate a spell check feature using a library or browser APIs.

Common Mistakes and How to Fix Them

  • Incorrect Component Imports: Make sure you import components correctly. Double-check the file paths.
  • State Management Issues: Ensure the state is updated correctly. Use `useState` or `useReducer` appropriately.
  • Markdown Rendering Errors: Use a Markdown parser like `react-markdown` for rendering.
  • Styling Conflicts: Ensure your CSS doesn’t conflict with other CSS. Use CSS modules or styled-components.
  • Performance Issues: Optimize your components by using `React.memo` for functional components and `shouldComponentUpdate` for class components.

Key Takeaways and Summary

We’ve successfully built a basic blog post editor using React JS. We’ve learned how to:

  • Set up a React project.
  • Create reusable components.
  • Manage state effectively.
  • Integrate a Markdown parser.
  • Add basic formatting features.

This tutorial provides a solid foundation for building more advanced content creation tools. You can extend this project by adding features like image uploading, code highlighting, saving, and loading capabilities.

FAQ

Q: How do I handle images in the editor?

A: You can add an image upload feature by using an input field of type “file” and a backend to store the images. You can then insert the image URLs into your Markdown content.

Q: How can I add code highlighting?

A: You can use a code highlighting library like Prism.js. Import the library and use it within your `Preview` component to highlight code blocks.

Q: How do I save the blog post content?

A: You can save the content using local storage (for simpler applications) or a backend server (for more complex applications). For local storage, you can use the `localStorage` API to save and retrieve the content.

Q: Can I use different Markdown libraries?

A: Yes, you can use any Markdown library that suits your needs. Just ensure it integrates well with React and supports the Markdown features you require.

Q: What are some alternative libraries for building a rich text editor?

A: Some popular alternatives include Draft.js, Quill, and Slate.js. These libraries offer more advanced features and customization options.

The journey of building a blog post editor in React is a rewarding one. From the initial setup to the integration of formatting features and the live preview, each step contributes to creating a powerful and user-friendly tool. Remember, the key is to break down the problem into smaller, manageable components. Embrace the iterative process, experiment with different features, and continuously refine your code. As you add more functionalities, such as image uploads, code highlighting, and saving capabilities, you’ll witness your editor evolving into a versatile content creation platform, empowering you and other users to craft compelling narratives with ease and efficiency. The beauty of React lies in its flexibility and its ability to adapt to your specific needs, allowing you to build and customize your editor to perfection.

More posts