Last active
March 13, 2019 16:01
-
-
Save appwebtech/6aff634d7885b3a9a682784eea11feb2 to your computer and use it in GitHub Desktop.
// source https://jsbin.com
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://fb.me/react-with-addons-15.1.0.js"></script> | |
| <script src="https://fb.me/react-dom-15.1.0.js"></script> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| // Function taking in props an spitting out data | |
| const Welcome = ((props) => | |
| React.createElement("div", null, | |
| React.createElement("h4", null, "Welcome to my homepage."), | |
| React.createElement("p", null, "My names are ", React.createElement("b", null, "Mr. ", props.firstName, " ", props.lastName, ".")), | |
| React.createElement("p", null, "I love using React Components and passing in data using props.") | |
| ) | |
| ) | |
| // The convenient way to use React Classes. | |
| class App extends React.Component { | |
| nameMapper(nameArray){ | |
| return nameArray.map((name, i) => | |
| React.createElement("li", {key: i}, name) | |
| ) | |
| } | |
| render() { | |
| const nameArray = ["Joe", "Doe", "Jane", "Katumbi", "JoeJoe", "Nameless", "Namemore", "Lilmore", "Lilless"] | |
| return ( | |
| React.createElement("div", null, | |
| React.createElement(Welcome, {firstName: "Joe", lastName: "Doe"}), | |
| React.createElement("ul", null, | |
| this.nameMapper(nameArray) | |
| ), | |
| React.createElement(Welcome, {firstName: "Foo", lastName: "Bar"}) | |
| ) | |
| ) | |
| } | |
| } | |
| ReactDOM.render( | |
| React.createElement(App, null), | |
| document.getElementById('app') | |
| ); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| // Function taking in props an spitting out data | |
| const Welcome = ((props) => | |
| <div> | |
| <h4>Welcome to my homepage.</h4> | |
| <p>My names are <b>Mr. {props.firstName} {props.lastName}.</b></p> | |
| <p>I love using React Components and passing in data using props.</p> | |
| </div> | |
| ) | |
| // The convenient way to use React Classes. | |
| class App extends React.Component { | |
| nameMapper(nameArray){ | |
| return nameArray.map((name, i) => | |
| <li key={i}>{name}</li> | |
| ) | |
| } | |
| render() { | |
| const nameArray = ["Joe", "Doe", "Jane", "Katumbi", "JoeJoe", "Nameless", "Namemore", "Lilmore", "Lilless"] | |
| return ( | |
| <div> | |
| <Welcome firstName="Joe" lastName="Doe"/> | |
| <ul> | |
| {this.nameMapper(nameArray)} | |
| </ul> | |
| <Welcome firstName="Foo" lastName="Bar"/> | |
| </div> | |
| ) | |
| } | |
| } | |
| ReactDOM.render( | |
| <App/>, | |
| document.getElementById('app') | |
| );</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| // Function taking in props an spitting out data | |
| const Welcome = ((props) => | |
| React.createElement("div", null, | |
| React.createElement("h4", null, "Welcome to my homepage."), | |
| React.createElement("p", null, "My names are ", React.createElement("b", null, "Mr. ", props.firstName, " ", props.lastName, ".")), | |
| React.createElement("p", null, "I love using React Components and passing in data using props.") | |
| ) | |
| ) | |
| // The convenient way to use React Classes. | |
| class App extends React.Component { | |
| nameMapper(nameArray){ | |
| return nameArray.map((name, i) => | |
| React.createElement("li", {key: i}, name) | |
| ) | |
| } | |
| render() { | |
| const nameArray = ["Joe", "Doe", "Jane", "Katumbi", "JoeJoe", "Nameless", "Namemore", "Lilmore", "Lilless"] | |
| return ( | |
| React.createElement("div", null, | |
| React.createElement(Welcome, {firstName: "Joe", lastName: "Doe"}), | |
| React.createElement("ul", null, | |
| this.nameMapper(nameArray) | |
| ), | |
| React.createElement(Welcome, {firstName: "Foo", lastName: "Bar"}) | |
| ) | |
| ) | |
| } | |
| } | |
| ReactDOM.render( | |
| React.createElement(App, null), | |
| document.getElementById('app') | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment