MKs Notebook

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 .

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

001 Hello World To render/create a react app you need to add these files into your index.html file <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> React Methods: ReactDOM.render(What to print, Where to print); React.createElement('html element', Attributes, child);                                                                Example (001 Hello World) var h1 = React.createElement('h1', null, 'Hello World'); var content = document.getElementById("content"); ReactDOM.render(h1, content); See the Pen 001 Hello World by Mustafa Khan ( @MKs-Notebook ) on CodePen . 002 HTML Attributes Example (002 HTML Attributes) var a = React.createElement('a', {href: 'https://www.google.com/', target: '_blank', title: 'Google Link'