Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/App.js Secret

Created April 18, 2023 06:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save codecademydev/30b09e9d645a2cc103976823d538acb9 to your computer and use it in GitHub Desktop.
Save codecademydev/30b09e9d645a2cc103976823d538acb9 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
App.js
import React from 'react';
import {comments} from './commentData';
import Card from './Card';
function App () {
return (
comments.map(comment => <Card commentObject={comment} />)
)
}
export default App;
Raw
Body.js
import React from 'react';
function Body (props) {
return <p>{props.comment}</p>
}
export default Body;
Raw
Card.js
import React from 'react';
import Header from './Header';
import Body from './Body';
function Card (props) {
return (
<div>
<Header profileImg={props.commentObject.profileImg}
username= {props.commentObject.username}/>
<Body comment={props.commentObject.comment}/>
</div>
)
}
export default Card;
Raw
commentData.js
export const comments = [
{
profileImg: 'https://images.unsplash.com/photo-1609992556706-14a7056ea745?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80',
username: 'ScrungeCat',
comment: 'My favorite types of cats are slightly weird looking ones!'
},
{
profileImg: 'https://images.unsplash.com/photo-1615751072497-5f5169febe17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1335&q=80',
username: 'ChewToy',
comment: 'I don\'t like cats at all.'
},
{
profileImg: 'https://images.unsplash.com/photo-1563482776068-4dac10f9373d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
username: 'BuryHeadInSand',
comment: 'Wild ostriches make the best pets.'
}
]
Raw
Header.js
import React from 'react';
function Header (props) {
return (
<div>
<img src={props.profileImg} alt=''/>
<h1>{props.username}</h1>
</div>
)
}
export default Header;
Raw
index.js
// import {StrictMode} from 'react';
import React from 'react';
// import ReactDOM from 'react-dom/client';
import {createRoot} from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('app')).render(<App/>);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment