это вызов 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
Всем удачного кодирования, спасибо!