对react的研究0

对react的研究
1.class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, mountNode );

2.class Timer extends React.Component { constructor(props) { super(props); this.state = { seconds: 0 }; } tick() { this.setState(state => ({ seconds: state.seconds + 1 })); } componentDidMount() { this.interval = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this.interval); } render() { return ( <div> Seconds: {this.state.seconds} </div> ); } } ReactDOM.render(<Timer />, mountNode);

3.

class TodoApp extends React.Component { constructor(props) { super(props); this.state = { items: [], text: '' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } render() { return ( <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <label htmlFor="new-todo"> What needs to be done? </label> <input id="new-todo" onChange={this.handleChange} value={this.state.text} /> <button> Add #{this.state.items.length + 1} </button> </form> </div> ); } handleChange(e) { this.setState({ text: e.target.value }); } handleSubmit(e) { e.preventDefault(); if (!this.state.text.length) { return; } const newItem = { text: this.state.text, id: Date.now() }; this.setState(state => ({ items: state.items.concat(newItem), text: '' })); } } class TodoList extends React.Component { render() { return ( <ul> {this.props.items.map(item => ( <li key={item.id}>{item.text}</li> ))} </ul> ); } } ReactDOM.render(<TodoApp />, mountNode);

class MarkdownEditor extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { value: 'Hello, **world**!' }; } 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> <label htmlFor="markdown-content"> Enter some markdown </label> <textarea id="markdown-content" onChange={this.handleChange} defaultValue={this.state.value} /> <h3>Output</h3> <div className="content" dangerouslySetInnerHTML={this.getRawMarkup()} /> </div> ); } } ReactDOM.render(<MarkdownEditor />, mountNode);