Skip to content

Instantly share code, notes, and snippets.

@kevincolten

kevincolten/README.md

Created February 28, 2017 21:11
Show Gist options
  • Save kevincolten/d23a47841b895adc666dbea504d00ba4 to your computer and use it in GitHub Desktop.
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
Copy link 

<!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