console 命令行工具 X clear

console

const TodoItems = ({ entries }) => (
    <ul>
        {
            entries.map(({ heading, key }) => (
                <li key={key}>{heading}</li>
            ))
        }
    </ul>
);

function Lists(props) {
    const entries = props.entries;
    const listItems = entries.map(({ heading, key }) => (
        <li key={key}>{heading}</li>
    )
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
}

class InputForm extends React.Component {
    state = {
        input: ''
    }

    onInput = (e) => this.setState({
        input: e.target.value
    });

    onSubmit = (e) => {
        e.target.reset();
        e.preventDefault();
        this.props.onSubmit(this.state.input);
    }

    render() {
        return (
            <form onSubmit={this.onSubmit}>
                <input type="text"
                    value={this.state.value}
                    onChange={this.onInput}
                    placehodler="Type your text here" />
                <button type="submit">Add to list</button>
            </form>
        )
    }
}

class App extends React.Component {
    state = {
        items: []
    }

    addTodo = (heading) => heading !== '' && this.setState(({ items }) => ({
        items: items.concat({
            heading,
            key: Date.now()
        })
    }));


    render() {
        return (
            <div>
                <h3 className='title'>Hello React.js</h3>
                <InputForm onSubmit={this.addTodo} />
                <TodoItems entries={this.state.items} />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById("app")
);

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js">
	</script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">
	</script>
	<title>Document</title>
</head>

<body>
	<div id="app"></div>
</body>

</html>

.title{
    color: red;
}