Skip to content

Instantly share code, notes, and snippets.

@garrettmac
Last active March 28, 2019 17:04
Show Gist options
  • Save garrettmac/146f115368832add034f5e8911aa1091 to your computer and use it in GitHub Desktop.
Save garrettmac/146f115368832add034f5e8911aa1091 to your computer and use it in GitHub Desktop.
React at CodePen
<div id="contentAreaDiv"></app>
console.log("hi js")
class App extends React.Component {
constructor() {
super();
}
clicky = () => {
alert("clicked the button");
}
render() {
return (
<div id="destination">
<p>
<button
type="button"
className={`button button--light`}
>Hello</button>
</p>
</div>
);
}
}
function run(){
console.log("heelloo")
renderReplace(<App />, document.getElementById('contentAreaDiv'));
console.log(document.body.innerHTML)
}
function renderReplace(component, container){
var temp = document.createElement("div");
ReactDOM.render(component, temp);
container.parentNode.replaceChild(temp.firstElementChild, container);
}
function foo(){
// temporary render target
var temp = document.createElement("div");
// render
React.render(<App />, temp);
// grab the container
var container = document.getElementById("contentAreaDiv");
// and replace the child
container.replaceChild(temp.querySelector("#destination"), document.getElementById("destination"));
container.replaceChild(temp.querySelector("#destination"), document.getElementById("contentAreaDiv"));
}
setInterval(function(){
console.log("Hello");
run()
foo()
}, 3000);
console.log("hi")
class App extends React.Component {
constructor() {
super();
}
clicky = () => {
alert("clicked the button");
}
render() {
return (
<div id="destination">
<p>
<button
type="button"
className={`button button--light`}
>Hello</button>
</p>
</div>
);
}
}
function run(){
console.log("heelloo")
renderReplace(<App />, document.getElementById('contentAreaDiv'));
console.log(document.body.innerHTML)
}
function renderReplace(component, container){
var temp = document.createElement("div");
ReactDOM.render(component, temp);
container.parentNode.replaceChild(temp.firstElementChild, container);
}
function foo(){
// temporary render target
var temp = document.createElement("div");
// render
React.render(<App />, temp);
// grab the container
var container = document.getElementById("contentAreaDiv");
// and replace the child
container.replaceChild(temp.querySelector("#destination"), document.getElementById("destination"));
container.replaceChild(temp.querySelector("#destination"), document.getElementById("contentAreaDiv"));
}
setInterval(function(){
console.log("Hello");
run()
foo()
}, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
p {
margin-bottom: 10px;
}
.button {
background: none;
border: none;
transition: all 0.3s ease;
font-weight: 700;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
letter-spacing: 1.4px;
line-height: 1.4;
font-size: 14px;
padding: 1.42rem 1.4rem 1.2rem;
}
.button--light {
border: 1px solid #000;
background-color: #fff;
}
.button--light:hover {
background: #000;
color: #fff;
border-color: #000;
}
.button--dark {
color: #fff;
border: 1px solid #000;
background-color: #000;
}
.button--dark:hover {
color: #000;
background-color: #fff;
}
.button--secondary {
color: #fff;
border: 1px solid #d22030;
background-color: #d22030;
}
.button--secondary:hover {
background-color: #ea5a67;
}
.button:disabled {
color: #494949;
cursor: not-allowed;
border-color: #dbdbdb;
background-color: #dbdbdb;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment