さて、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
ん? これが必要?