How to setup codepen for React js

codepen is an online code editor and in this article we setup codepen for React JS, so that we can test our React code online on multiple devices. Follow the steps given bellow to Setup codepen for React JS.

1. Create A new Pen.



2. Click on Setting and than click on JavaScript tab.
3. For "JavaScript Preprocessor" choose "Babel".
4. In the "Add External Scripts/Pens" search bar type "react" and from the list choose "react", search again and this time choose "react-dom". or use these links
https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js
respectively
5. Click on "Save and Close" and you are ready



Comments

Post a Comment

Popular posts from this blog

Learn React - Day 02

DAY 02 005 Returning Mulitple Elements If you want to return multiple elements from your costume class, you need to wrap them in a div return ( React.createElement('div', null, h1, p) ); Example (005 Returning Multiple Elements) var h1 = React.createElement('h1', null, 'First Component'); var p = React.createElement('p', null, 'A quick brown fox jumps over the lazy dog.'); class CustomeComponent extends React.Component {                render(){                               return (                                              React.createElement('div', null, h1, p)                               );                } } var firstComponent = React.createElement(CustomeComponent, null); var content = document.getElementById("content"); ReactDOM.render(firstComponent, content); See the Pen 005 Returning Multiple Elements by Mustafa Khan ( @MKs-Notebook ) on CodePen .
Read more