This device is not compatible.

PROJECT


Markdown Editor Application in React Using Context APIs and Hooks

Learn to create a markdown editor application in React framework. This application will allow users to type markdown text and convert it into HTML using Context APIs and Hooks. This application will use the markdown-it library to parse the markdown text into HTML.

Markdown Editor Application in React Using Context APIs and Hooks

You will learn to:

Create applications in the React framework

Use Context APIs and Hooks in React

Skills

React Components

Web Development

Web Frameworks

Prerequisites

Good understanding of JavaScript

Good understanding of React framework

Basic understanding of Context API

Technologies

React

JavaScript

Project Description

In this project, we will create a markdown editor with React that will allow the user to type a plain markdown text as input and convert it to HTML output. We’ll build a single-page application that is divided into two sections, one for markdown input and the other for input converted into HTML.

Our application will have the following main features:

  • Formatting that is displayed at a runtime side by side, which means as the user types something, its output is displayed alongside in the output section.

  • A toggle button on top lets the users decide whether they want the UI layout in a left-right or top-down fashion.

  • A cheat sheet section that helps users write markdown text.

We’ll use React’s markdown-it library to convert markdown text to HTML and render it to the DOM. Also, we’ll use the Context API to share data between components to avoid using props and Hooks to fetch and reuse stateful logic from other components.

Project Tasks

1

Get Started

Task 0: Initial Setup

2

Markdown Cheat Sheet Section

Task 1: Create the MarkdownDocsCard Component

Task 2: Display the Cheat Sheet Component

3

Markdown Editor Section

Task 3: Create the Layout for the Markdown Editor Section

Task 4: Add a Top-Down Layout

Task 5: Create a React Context API

Task 6: Add the Markdown Parsing Functionality

Congratulations!