Skip to content

Instantly share code, notes, and snippets.

@kevincolten

kevincolten/README.md

Created February 28, 2017 21:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kevincolten/d23a47841b895adc666dbea504d00ba4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kevincolten/d23a47841b895adc666dbea504d00ba4 to your computer and use it in GitHub Desktop.
Download ZIP
React in the DOM
Raw
README.md

In your browser devtools, you can access the React component in the console with window.component

Try typing window.component.setState({ name: 'Kevin' });

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React in the DOM</title>
</head>
<body>
<div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script type="text/babel">
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = { name: "World" };
window.component = this;
}
render() {
return <h1>{this.props.greeting}, {this.state.name}!</h1>;
}
}
ReactDOM.render(
<Welcome greeting="Hello"/>,
document.getElementsByTagName('div')[0]
);
</script>
</body>
</html>
@libersolis-dev

libersolis-dev commented Feb 28, 2017

Copy link
Copy Markdown 
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>React in the DOM</title>
 </head>
 <body>
   <div id="root">
     


   </div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
   <script type="text/babel">
   class Welcome extends React.Component {
     constructor(props) {
       super(props);
       this.state = { firstName: prompt('what is your name?'), lastName: prompt('what is your last name?') };
       window.component = this;
     }


     
     render() {
       return <h1>{this.props.greeting} {this.state.firstName} {this.state.lastName}!</h1>;
     }
   }
   ReactDOM.render(
     <Welcome greeting={prompt('how would you like me to greet you')}/>,
     document.getElementById('root')
   );


   </script>
 </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment