Last active
August 8, 2018 21:34
-
-
Save clc80/cb874c0cc00409aa4552e785202f2a3f to your computer and use it in GitHub Desktop.
React Course Second Course JSX and Babel
This file contains 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
| class App extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| <h1>Hello JSX and the World!</h1> | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render(<App />, document.getElementById('app')); |
This file contains 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
| class MyComponent extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| <h2>Here is a component!</h2> | |
| <p>Aww yeah.</p> | |
| </div> | |
| ); | |
| } | |
| } | |
| class App extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| <h1>Here is my second React App!</h1> | |
| <MyComponent /> | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render(<App />, document.getElementById('app')); |
This file contains 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
| class App extends React.Component { | |
| render() { | |
| var name = this.props.name; | |
| if (name === 'Tim') { | |
| name = 'favorite instructor'; | |
| } else if (name === 'Matt' || name === 'Elie') { | |
| name = 'very solid instructor'; | |
| } | |
| return ( | |
| <div> | |
| <p>{this.props.name}</p> | |
| <p>{name}</p> | |
| {name === 'student' ? ( | |
| <h1>Good job on the course so far!</h1> | |
| ) : ( | |
| <h1>Hello, {name}!</h1> | |
| )} | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render(<App name="Moxie" />, document.getElementById('app')); |
This file contains 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" type="text/css" href="app.css"> | |
| <title>React + Babel</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/babel-standalone@6/babel.js"></script> | |
| <script type="text/babel" src="app.jsx"></script> | |
| </body> | |
| </html> |
This file contains 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
| class App extends React.Component { | |
| render() { | |
| var style = { color: 'red' }; | |
| return ( | |
| <div> | |
| <h1 style={style}>Hello {this.props.name}!</h1> | |
| <p className="primary-text">This should be large blue text</p> | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render(<App name="student" />, document.getElementById('app')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment