Skip to content

Commit 933f3a4

Browse files
hiroppydiasbruno
authored andcommitted
Modify the sample code to es2015 syntax in README.md (#295)
1 parent 8059ded commit 933f3a4

File tree

1 file changed

+24
-17
lines changed

1 file changed

+24
-17
lines changed

README.md

+24-17
Original file line numberDiff line numberDiff line change
@@ -144,9 +144,9 @@ You can use this to remove scrolling on the the body while the modal is open.
144144
Inside an app:
145145

146146
```js
147-
var React = require('react');
148-
var ReactDOM = require('react-dom');
149-
var Modal = require('react-modal');
147+
import React from 'react';
148+
import ReactDOM from 'react-dom';
149+
import Modal from 'react-modal';
150150

151151

152152
/*
@@ -161,7 +161,7 @@ Modal.setAppElement(appElement);
161161
Modal.setAppElement('#your-app-element');
162162
163163
*/
164-
var appElement = document.getElementById('your-app-element');
164+
const appElement = document.getElementById('your-app-element');
165165

166166

167167

@@ -177,26 +177,33 @@ const customStyles = {
177177
};
178178

179179

180-
var App = React.createClass({
180+
class App extends React.Component {
181+
constructor() {
182+
super();
181183

182-
getInitialState: function() {
183-
return { modalIsOpen: false };
184-
},
184+
this.state = {
185+
modalIsOpen: false
186+
};
187+
188+
this.openModal = this.openModal.bind(this);
189+
this.afterOpenModal = this.afterOpenModal.bind(this);
190+
this.closeModal = this.closeModal.bind(this);
191+
}
185192

186-
openModal: function() {
193+
openModal() {
187194
this.setState({modalIsOpen: true});
188-
},
195+
}
189196

190-
afterOpenModal: function() {
197+
afterOpenModal() {
191198
// references are now sync'd and can be accessed.
192199
this.refs.subtitle.style.color = '#f00';
193-
},
200+
}
194201

195-
closeModal: function() {
202+
closeModal() {
196203
this.setState({modalIsOpen: false});
197-
},
204+
}
198205

199-
render: function() {
206+
render() {
200207
return (
201208
<div>
202209
<button onClick={this.openModal}>Open Modal</button>
@@ -222,9 +229,9 @@ var App = React.createClass({
222229
</div>
223230
);
224231
}
225-
});
232+
}
226233

227-
ReactDOM.render(<App/>, appElement);
234+
ReactDOM.render(<App />, appElement);
228235
```
229236
# Testing
230237

0 commit comments

Comments
 (0)