React.jsでカレンダーを作ろう 2

さて、React.js + webpack + babelの環境ができたので、カレンダーを作っていきます。

# react-calendar のインストール
$ npm install react-calendar

jsはこうかな。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Calendar from 'react-calendar';
 
class Layout extends Component {
    state = {
        date: new Date(),
    }
 
    onChange = date => this.setState({ date })
 
    render(){
        return (
            <div>
                <Calendar
                    onChange={this.onChange}
                    value={this.state.date}
                />
            </div>
        );
    }
}
 
const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

$ npm start

ERROR in ./js/client.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
SyntaxError: /home/vagrant/react/src/js/client.js: Support for the experimental syntax ‘classProperties’ isn’t currently enabled (6:8):

4 |
5 | class Layout extends React.Component {
> 6 | state = {
| ^
7 | date: new Date(),
8 | }
9 |
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the ‘plugins’ section of your Babel config to enable transformation

ん？　これが必要？