Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/App.js Secret

Created April 16, 2023 08:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/e816753a7b14e1aec4dd5d68ed44d2ed to your computer and use it in GitHub Desktop.
Save codecademydev/e816753a7b14e1aec4dd5d68ed44d2ed 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} />
<h1>{props.username}</h1>
</div>
);
};
export default Header;
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="app">
</main>
<script src="https://content.codecademy.com/courses/React/react-18-course-bundle.min.js"></script>
<script src="/index.compiled.js"></script>
</body>
</html>
Raw
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createroot(document.getElementById('app')).render(<App/>);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment