Build a Markdown Previewer

React Project (一)

A Markdown Previewer

目标: 在 CodePen.io 上创建一个这样的应用，它的功能类似于这个 http://codepen.io/FreeCodeCamp/full/obYYqW。

功能：实时预览解析后的Markdown文档。

clock

此项目为freeCodeCamp中React的第一个实践项目，学习过程中主要参考博客。

项目代码：

<!DOCTYPE html>
<html>
  <head>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/bootstrap-theme.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
  </head>

  <body>
  <h1>Markdown Previewer</h1>
    <div class="container" id="container">
    </div>

    <script type="text/babel">
    var DisplayText = React.createClass({
      getInitialState: function() {
        return {
        value:'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](https://freecodecamp.com/hermanfassett)*' }
      },
      handleChange: function(event) {
          this.setState({value: event.target.value});
      },
      rawMarkup: function(value) {
        var rawMarkup = marked(value, {sanitize: true});
        return { __html: rawMarkup };
    },
       render: function() {
       var value = this.state.value;
       return (
      <div className="row">
        <div className="col-md-6">
          <textarea rows="24" type="text" value={value} onChange={this.handleChange} className="form-control"/>
        </div>
        <div className="col-md-6">
            <span dangerouslySetInnerHTML={this.rawMarkup(value)} />
        </div>
      </div>
      );
  }
});

      ReactDOM.render(<DisplayText />, document.getElementById('container'));
    </script>
  </body>
</html>

All Javascript Project

2017-05-05 WEB
React project