Skip to content

Commit

Permalink
Modify the sample code to es2015 syntax in README.md (reactjs#295)
Browse files Browse the repository at this point in the history
  • Loading branch information
hiroppy authored and diasbruno committed Jun 15, 2017
1 parent 8059ded commit 933f3a4
Showing 1 changed file with 24 additions and 17 deletions.
41 changes: 24 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';


/*
Expand All @@ -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');



Expand All @@ -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 (
<div>
<button onClick={this.openModal}>Open Modal</button>
Expand All @@ -222,9 +229,9 @@ var App = React.createClass({
</div>
);
}
});
}

ReactDOM.render(<App/>, appElement);
ReactDOM.render(<App />, appElement);
```
# Testing

Expand Down

0 comments on commit 933f3a4

Please sign in to comment.