さて、React.js + webpack + babelの環境ができたので、カレンダーを作っていきます。
# react-calendar のインストール
$ npm install react-calendar
jsはこうかな。
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
ん? これが必要?