In this project, we will build the beginnings of a web forum! A forum is an online discussion board where users can exchange their opinions on a variety of topics. The most important component of a forum is the comment section. This is what we’ll work on in this project.
In building this application, you will sharpen your skills in React components by practicing using props as well as defining, rendering, and referencing components.
| import React from 'react'; | |
| import {comments} from './commentData'; | |
| import Card from './Card'; | |
| function App() { | |
| return comments.map(comment => <Card commentObject={comment} />); | |
| } | |
| export default App; |
| import React from 'react'; | |
| function Body({ comment }) { | |
| return ( | |
| <p>{comment}</p> | |
| ); | |
| } | |
| export default Body; |
| import React from 'react'; | |
| import Header from './Header'; | |
| import Body from './Body'; | |
| function Card({ commentObject }) { | |
| const { profileImg, username, comment } = commentObject; | |
| return ( | |
| <> | |
| <Header profileImg={profileImg} username={username} /> | |
| <Body comment={comment} /> | |
| </> | |
| ); | |
| } | |
| export default Card; |
| 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.' | |
| } | |
| ] |
| import React from 'react'; | |
| function Header({ profileImg, username }) { | |
| return ( | |
| <> | |
| <img src={profileImg} alt={username} /> | |
| <h1>{username}</h1> | |
| </> | |
| ); | |
| } | |
| export default Header; |
| import React from 'react'; | |
| import {createRoot} from 'react-dom/client'; | |
| import App from './App'; | |
| createRoot(document.getElementById('app')).render(<App/>); |