reactjs.orgをただ読んでいくだけ その1
reactjs.org とりあえず、トップページを読みます。
reactを使うメリットはこんな感じらしい
- 宣言的
- コンポーネントベース
- 一度学び、どこにでも書く
JSXはやっぱりいいなあ
一回勉強したことあるから、タイマーの原理くらいはわかる!
最後のマークダウンのやつだけ、コピペしただけだと動かないのか、
$ npm install remarkable --save
import React from 'react'; import ReactDOM,{ render } from 'react-dom'; import Remarkable from 'remarkable'; class MarkdownEditor extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { value: 'Type some *markdown* here!' }; } handleChange(e) { this.setState({ value: e.target.value }); } getRawMarkup() { const md = new Remarkable(); return { __html: md.render(this.state.value) }; } render() { return ( <div className="MarkdownEditor"> <h3>Input</h3> <textarea onChange={this.handleChange} defaultValue={this.state.value} /> <h3>Output</h3> <div className="content" dangerouslySetInnerHTML={this.getRawMarkup()} /> </div> ); } } ReactDOM.render( <MarkdownEditor />, document.getElementById('app') );
動いた!