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

ReactJS Examples, Demos, Code - React Rocks. Learn how to render plain markdown into React components using the React Markdown Component. Changes are automatically rendered as you type. Implements GitHub Flavored Markdown; Renders actual, 'native' React DOM elements; Allows you to escape or skip HTML (try toggling the checkboxes above). Markdown for the component era. MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content.

There are three components in this example:

• the main Wrapper
• the Editor
• the Render

React Render Markdown

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.

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

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.

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

React Format Markdown

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.

React Markdown Examples

React-markdown Renderers Example

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

React Markdown Editor