это вызов freecodecamp с реагирующим приложением

  • Сделаем уценочное приложение
  • У нас есть вводная уценка, и вывод будет отображаться

Сначала нам нужно инициализировать реагирующее приложение, я использую create-react-app для этого проекта, create-react-app встроен в настройку реагирующего приложения из facebook.

Затем я установил нужные мне зависимости, я использую react-bootstrap и marked, поэтому я устанавливаю их как зависимости.

npm install --save react-bootstrap

и

npm install --save marked

вот так выглядит каталог моего проекта

Затем мы можем начать код

давайте создадим интерфейс

Я редактирую свой файл app.js следующим образом:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import FormControl from 'react-bootstrap/lib/FormControl';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
const marked = require('marked');
class App extends Component {
state = {
      markdown: '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)*'
    }
updateMark = function (markdown) {
      this.setState({markdown});
    }
render() {
let {markdown} = this.state;
    console.log(markdown);
return (
      <div className="App container">
        <div>
          <FormGroup>
            <ControlLabel>Markdown Input</ControlLabel>
            <FormControl componentClass="textarea" placeholder="Input" value={markdown} onChange={(event)=> this.updateMark(event.target.value)}></FormControl>
          </FormGroup>
        </div>
        <div>
          <h1>Mardown Output</h1>
          <div dangerouslySetInnerHTML = {{__html: marked(markdown)}} >
</div>
        </div>
      </div>
    );
  }
}
export default App;

и результат моего приложения реакции

Вы можете посмотреть, как я создаю это приложение на YouTube

Всем удачного кодирования, спасибо!