React at CodePen

index.html

<div id="contentAreaDiv"></app>

index.js

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);

react-at-codepen.markdown

React at CodePen

An easy way to get started at CodePen with React 0.13 and ES6.

A Pen by garrettmac on CodePen.

License.

script.babel

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);

scripts

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

style.css

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;
}