Skip to content

Commit 647d31e

Browse files
committed
Modify the sample code to es2015 syntax in README.md
1 parent e10181d commit 647d31e

File tree

1 file changed

+24
-17
lines changed

1 file changed

+24
-17
lines changed

README.md

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,9 @@ You can use this to remove scrolling on the the body while the modal is open.
122122
Inside an app:
123123

124124
```js
125-
var React = require('react');
126-
var ReactDOM = require('react-dom');
127-
var Modal = require('react-modal');
125+
import React from 'react';
126+
import ReactDOM from 'react-dom';
127+
import Modal from 'react-modal';
128128

129129

130130
/*
@@ -139,7 +139,7 @@ Modal.setAppElement(appElement);
139139
Modal.setAppElement('#your-app-element');
140140
141141
*/
142-
var appElement = document.getElementById('your-app-element');
142+
const appElement = document.getElementById('your-app-element');
143143

144144

145145

@@ -155,26 +155,33 @@ const customStyles = {
155155
};
156156

157157

158-
var App = React.createClass({
158+
class App extends React.Component {
159+
constructor() {
160+
super();
159161

160-
getInitialState: function() {
161-
return { modalIsOpen: false };
162-
},
162+
this.state = {
163+
modalIsOpen: false
164+
};
165+
166+
this.openModal = this.openModal.bind(this);
167+
this.afterOpenModal = this.afterOpenModal.bind(this);
168+
this.closeModal = this.closeModal.bind(this);
169+
}
163170

164-
openModal: function() {
171+
openModal() {
165172
this.setState({modalIsOpen: true});
166-
},
173+
}
167174

168-
afterOpenModal: function() {
175+
afterOpenModal() {
169176
// references are now sync'd and can be accessed.
170177
this.refs.subtitle.style.color = '#f00';
171-
},
178+
}
172179

173-
closeModal: function() {
180+
closeModal() {
174181
this.setState({modalIsOpen: false});
175-
},
182+
}
176183

177-
render: function() {
184+
render() {
178185
return (
179186
<div>
180187
<button onClick={this.openModal}>Open Modal</button>
@@ -200,9 +207,9 @@ var App = React.createClass({
200207
</div>
201208
);
202209
}
203-
});
210+
}
204211

205-
ReactDOM.render(<App/>, appElement);
212+
ReactDOM.render(<App />, appElement);
206213
```
207214
# Testing
208215

0 commit comments

Comments
 (0)