app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {Controlled as CodeMirror} from 'react-codemirror2'

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';

import 'codemirror/mode/markdown/markdown'

class App extends Component {
  constructor(props) {
    super(props);
    // Don't call this.setState() here!
    this.state = {
      value: '# Hello'
    };
  }

  render() {
    const options = {
      mode: 'markdown',
      theme: 'tlon',
      lineNumbers: false,
      lineWrapping: true,
      scrollbarStyle: null,
      cursorHeight: 0.85,
    }

    return (
      <div className="App">

        <CodeMirror
          value={this.state.value}
          options={options}
          onBeforeChange={(editor, data, value) => {
            this.setState({value});
          }}
          onChange={(editor, data, value) => {
          }} />

      </div>
    );
  }

}

export default App;