Posts

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 .
Post a Comment
Read more

How to setup codepen for React js

Image
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
Post a Comment
Read more

Learn React - Day 01

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'
Post a Comment
Read more