Here my take to create a bare-bones markdown editor with real-time preview to make practice with React.js.

1. React Markdown Component
2. Markdown To Jsx
3. Markdown Html Reactjs

There are three components in this example:

• the main Wrapper
• the Editor
• the Render

Building actual projects is a great way to learn React and solidify some of its basic principles. So in this post we will be building a simple Markdown Previewer like what you see in the image.

The Wrapper is responsible to keep the markdown source in a state variable md, in order to let the children components use it as a bridge for our purpose.

1. Marko is a friendly (and fast!) UI library that makes building web apps fun.
2. In this video we are going to build react markdown editor that can convert markdown to html.+ react-markdownrea.

The Wrapper also listens for any source changes from the Editor component, updating the md variable.

React Markdown Component

The Editor textarea looks something like:

The Editor uses an controlledtextarea element that accepts an initial value and dispatches any change back to the Wrapper.

Markdown To Jsx

The Render component is responsible to render from markdown to HTML the source:

Markdown Html Reactjs

In this example I used the library marked to convert the markdown source.

Every time the variable md changes, it does trigger a re-render in the Render component, generating a new HTML code.

Injecting HTML into the DOM in React.js needs to be very explicit: you have to use the attribute dangerouslySetInnerHTML with the object {__html: value} as value to make it to work.

That's all! As I said, very bare-bones.

One of my biggest mistakes with this blog was not finding a WordPress plugin that would allow me to write my posts with markdown; to this day I still need to write posts in 'Visual' mode and then manually convert the post to HTML for 'Text' mode. One of these days I want to convert existing posts to Markdown and then enable a plugin that will convert Markdown to HTML. This painful process made me ask myself: is there a way I can use Node.js JavaScript to convert HTML to Markdown? There is, and it's called Turndown by Dom Christie.

Start by installing Turndown:

Then use Turndown's simple API to convert HTML to markdown:

You can use the interactive Turndown demo to experiment with its capabilities. Turndown has a number of options and allows you to use filters to keep elements you believe could be at risk for improper conversion.

Most developers look for a Markdown to HTML solution so it's rate to find myself in a position to need to convert HTML to Markdown. I look forward to migrating my site's content to Markdown so that writing posts is much less stressful in the future!