Created
March 2, 2017 17:43
-
-
Save bobfirestone/00f4fa2d257fb5b092d6a0cbf0d3ecd3 to your computer and use it in GitHub Desktop.
This is the html file used to create the examples & code snippets for my presentation on building react.js components to the DTC web & mobile developer group. Presentation given 3/1/17
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>Pure React Example</title> | |
| </head> | |
| <body> | |
| <div id="react-container"> | |
| <!-- This is the div react is binding to --> | |
| </div> | |
| <script src="https://unpkg.com/react@15/dist/react.js"></script> | |
| <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> | |
| <script> | |
| // createElement example | |
| let titleElement = React.createElement("h1", null, "This is my title") | |
| ReactDOM.render(titleElement, document.getElementById('react-container')) | |
| // // createClass example | |
| // const Article = React.createClass({ | |
| // displayName: "Article", | |
| // render() { | |
| // return React.createElement("div", {className: 'article'}, | |
| // React.createElement("h1", null, this.props.title), | |
| // React.createElement("p", null, this.props.body) | |
| // ) | |
| // } | |
| // }) | |
| // // component example | |
| // class Article extends React.Component{ | |
| // renderTitle(title){ | |
| // return React.createElement("h1", null, title) | |
| // } | |
| // | |
| // renderBody(body){ | |
| // return React.createElement("p", null, body) | |
| // } | |
| // | |
| // render(){ | |
| // return React.createElement("div", {className: 'article'}, this.renderTitle(this.props.title), this.renderBody(this.props.body)) | |
| // } | |
| // } | |
| // // stateless functional component example | |
| // const Article = props => React.createElement("div", {className: 'article'}, | |
| // React.createElement("h1", null, props.title), | |
| // React.createElement("p", null, props.body) | |
| // ) | |
| // | |
| // let title = 'Article Title' | |
| // let body = 'Article Body' | |
| // | |
| // ReactDOM.render( | |
| // React.createElement(Article, {title, body}, null), | |
| // document.getElementById('react-container') | |
| // ) | |
| // // destructured stateless functional component example | |
| // const Article = ({title, body}) => React.createElement("div", {className: 'article'}, | |
| // React.createElement("h1", null, title), | |
| // React.createElement("p", null, body) | |
| // ) | |
| // let articleObj = { title: "my title", body: "my article body"} | |
| // | |
| // ReactDOM.render( | |
| // React.createElement(Article, articleObj, null), | |
| // document.getElementById('react-container') | |
| // ) | |
| </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script> | |
| <script type="text/babel"> | |
| // const ArticleJSX = ({title, body}) => | |
| // <div className="article"> | |
| // <h1>{title}</h1> | |
| // <p>{body}</p> | |
| // </div> | |
| // | |
| // let articleObj = { title: "my title babel", body: "my article body babel"} | |
| // | |
| // ReactDOM.render( | |
| // React.createElement(ArticleJSX, articleObj, null), | |
| // document.getElementById('react-container') | |
| // ) | |
| </script> | |
| <script type="text/babel"> | |
| // const Articles = props => | |
| // <div className="articles"> | |
| // {props.articleObj.map((article,i) => Article(article, i))} | |
| // </div> | |
| // | |
| // const Article = ({title, body}, i) => | |
| // <div className="article" key={i}> | |
| // <h1>{title}</h1> | |
| // <p>{body}</p> | |
| // </div> | |
| // | |
| // let articleObj = [ | |
| // { title: "my title 1", body: "my article body 1"}, | |
| // { title: "my title 2", body: "my article body 2"}, | |
| // { title: "my title 3", body: "my article body 3"} | |
| // ] | |
| // | |
| // ReactDOM.render( | |
| // React.createElement(Articles, {articleObj}, null), | |
| // document.getElementById('react-container') | |
| // ) | |
| </script> | |
| <script type="text/babel"> | |
| // // A Bonus code example not in the presentation with bullet points getting iterated over in each article | |
| // const Articles = props => | |
| // <div className="articles"> | |
| // {props.articleObj.map((article,i) => Article(article, i))} | |
| // </div> | |
| // | |
| // const Article = ({title, body, bulletPoints}, i) => | |
| // <div className="article" key={i}> | |
| // <h1>{title}</h1> | |
| // {Summary(bulletPoints)} | |
| // <p>{body}</p> | |
| // </div> | |
| // | |
| // const Summary = (bulletPoints) => | |
| // <ul className="summary"> | |
| // {bulletPoints.map((point,i) => | |
| // <li key={i}> | |
| // {point} | |
| // </li> | |
| // )} | |
| // </ul> | |
| // | |
| // let articleObj = [ | |
| // { title: "my title 1", body: "my article body 1", bulletPoints: ["meow","meow","meow"]}, | |
| // { title: "my title 2", body: "my article body 2", bulletPoints: ["woof","woof","woof"]}, | |
| // { title: "my title 3", body: "my article body 3", bulletPoints: ["moo","moo","moo"]} | |
| // ] | |
| // | |
| // ReactDOM.render( | |
| // React.createElement(Articles, {articleObj}, null), | |
| // document.getElementById('react-container') | |
| // ) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment