reactjs.orgをただ読んでいくだけ その1

reactjs.org とりあえず、トップページを読みます。

f:id:okumuraa1:20180218152856p:plain


reactを使うメリットはこんな感じらしい

f:id:okumuraa1:20180218201840p:plain


JSXはやっぱりいいなあ

f:id:okumuraa1:20180218195957g:plain


一回勉強したことあるから、タイマーの原理くらいはわかる!

f:id:okumuraa1:20180218200322p:plain


最後のマークダウンのやつだけ、コピペしただけだと動かないのか、

f:id:okumuraa1:20180218201139p:plain

$ 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')
);

f:id:okumuraa1:20180218201658g:plain

動いた!