Created
February 28, 2019 15:51
-
-
Save ohong/a2c977570bf5a95bc4ad97a7f72a8e48 to your computer and use it in GitHub Desktop.
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> | |
| <style> | |
| .red { | |
| background-color: red; | |
| } | |
| .green { | |
| background-color: green; | |
| } | |
| </style> | |
| <script | |
| src="https://unpkg.com/react@16/umd/react.development.js" | |
| crossorigin | |
| ></script> | |
| <script | |
| src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" | |
| crossorigin | |
| ></script> | |
| <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> | |
| <title>CS290 Project Teams</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script type="text/babel"> | |
| class ProjectTeam extends React.Component { | |
| render() { | |
| let color; | |
| if (this.props.num < 3) { | |
| color = "red"; | |
| } else { | |
| color = "green"; | |
| } | |
| return ( | |
| <div className={color}> | |
| <h2>{this.props.name}</h2> | |
| <p>Members: {this.props.members || "Elon Musk"}</p> | |
| </div> | |
| ); | |
| } | |
| } | |
| class AllProjects extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| <h1>Teams mentored by Oscar</h1> | |
| <ProjectTeam name="Weekendr" members="Tim, Molly" num={2} /> | |
| <ProjectTeam | |
| name="BXR" | |
| members="Daniel, Will, Christine" | |
| num={5} | |
| /> | |
| <ProjectTeam | |
| name="Fadr" | |
| members="Natalie, Tanvi, Victoria" | |
| num={0} | |
| /> | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render(<AllProjects />, document.querySelector("#app")); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment