Created
October 12, 2019 05:15
-
-
Save vicradon/067e330c6a4f811ec8ed6cc10d46b826 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
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="index.pack.js"></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
| //index.js | |
| import React from "react" | |
| import ReactDOM from "react-dom" | |
| import App from "./App" | |
| ReactDOM.render(<App />, document.getElementById("root")) | |
| //app.js | |
| import React from "react" | |
| import Joke from "./Joke" | |
| function App(){ | |
| return ( | |
| <div> | |
| <Joke question = " How did humans start dieing" punchline = "When they thought of dyeing" /> | |
| <Joke question = " Which came first? The chicken or egg?" punchline = "The frying pan" /> | |
| <Joke punchline = "It’s hard to explain puns to kleptomaniacs because they always take things literally." /> | |
| </div> | |
| ) | |
| } | |
| export default App | |
| //joke.js | |
| import React from "react" | |
| function Joke(props) { | |
| const { question, punchline } = props; | |
| return ( | |
| <div className = "jokeCard"> | |
| { (question)? | |
| <div><p>Question: {question}</p><p>Punchline: {punchline}</p></div> | |
| : | |
| <p>Punchline: {punchline}</p> | |
| } | |
| </div> | |
| ) | |
| } | |
| export default Joke |
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
| body { | |
| background-color: whitesmoke; | |
| } | |
| .jokeCard * { | |
| padding: 0; | |
| margin:0; | |
| } | |
| .jokeCard { | |
| margin: 1rem 0; | |
| padding: 0.4rem; | |
| border-radius: 0.5rem; | |
| line-height: 1.5rem; | |
| background-color: white; | |
| box-shadow: 0 0 0rem 0.1rem #ccc; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment