From 933f3a46c1c3b94fb04232078a278eaebfc55ee8 Mon Sep 17 00:00:00 2001 From: Yuta Hiroto Date: Wed, 4 Jan 2017 02:47:57 +0900 Subject: [PATCH] Modify the sample code to es2015 syntax in README.md (#295) --- README.md | 41 ++++++++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 3079aa8d..b7a08339 100644 --- a/README.md +++ b/README.md @@ -144,9 +144,9 @@ You can use this to remove scrolling on the the body while the modal is open. Inside an app: ```js -var React = require('react'); -var ReactDOM = require('react-dom'); -var Modal = require('react-modal'); +import React from 'react'; +import ReactDOM from 'react-dom'; +import Modal from 'react-modal'; /* @@ -161,7 +161,7 @@ Modal.setAppElement(appElement); Modal.setAppElement('#your-app-element'); */ -var appElement = document.getElementById('your-app-element'); +const appElement = document.getElementById('your-app-element'); @@ -177,26 +177,33 @@ const customStyles = { }; -var App = React.createClass({ +class App extends React.Component { + constructor() { + super(); - getInitialState: function() { - return { modalIsOpen: false }; - }, + this.state = { + modalIsOpen: false + }; + + this.openModal = this.openModal.bind(this); + this.afterOpenModal = this.afterOpenModal.bind(this); + this.closeModal = this.closeModal.bind(this); + } - openModal: function() { + openModal() { this.setState({modalIsOpen: true}); - }, + } - afterOpenModal: function() { + afterOpenModal() { // references are now sync'd and can be accessed. this.refs.subtitle.style.color = '#f00'; - }, + } - closeModal: function() { + closeModal() { this.setState({modalIsOpen: false}); - }, + } - render: function() { + render() { return (
@@ -222,9 +229,9 @@ var App = React.createClass({
); } -}); +} -ReactDOM.render(, appElement); +ReactDOM.render(, appElement); ``` # Testing