Completed Component Props Mini Project

[cmhorsey]

Built a static blog site in React using components, JSX, and passed down data as props.

[stephenmckeon]

Nice work! Just make sure you take a minute once you're done coding to go back and clean up.

[stephenmckeon]

👀

[cmhorsey]

Eeek yes for sure.

[cmhorsey]

Done!

[stephenmckeon]

Suggested change

	import React from "react"
	// import blogData from "../data/blog"
	function About({image='https://via.placeholder.com/215', about
	}) {
	return (
	<>
	<aside>
	<img src={image} alt='blog logo'></img>
	<p>{about}</p>
	</aside>
	</>
	)
	}
	export default About
	import React from "react"
	function About({ image='https://via.placeholder.com/215', about }) {
	return (
	<aside>
	<img src={image} alt='blog logo'></img>
	<p>{about}</p>
	</aside>
	)
	}
	export default About

[stephenmckeon]

When are fragments needed? Do you need one here?

Suggested change

	import React from "react"
	function Article({title, date ='January 1, 1970', preview}) {
	return (
	<>
	<article>
	<h3>{title}</h3>
	<small>{date}</small>
	<p>{preview}</p>
	</article>
	</>
	)
	}
	export default Article
	import React from "react"
	function Article({ title, date ='January 1, 1970', preview }) {
	return (
	<article>
	<h3>{title}</h3>
	<small>{date}</small>
	<p>{preview}</p>
	</article>
	)
	}
	export default Article

[stephenmckeon]

Suggested change

	import React from "react"
	import Article from "./Article";
	function ArticleList({posts}) {
	return (
	<>
	<main>
	{posts.map((post) => {
	return (
	<Article
	key={post.id}
	title={post.title}
	date={post.date}
	preview={post.preview}
	/>
	)
	})}
	</main>
	</>
	)
	}
	export default ArticleList
	import React from "react"
	import Article from "./Article";
	function ArticleList({ posts }) {
	return (
	<main>
	{posts.map((post) => {
	return (
	<Article
	key={post.id}
	title={post.title}
	date={post.date}
	preview={post.preview}
	/>
	)
	})}
	</main>
	)
	}
	export default ArticleList

[stephenmckeon]

Suggested change

	import React from "react"
	// import blogData from "../data/blog"
	function Header({name}) {
	return (
	<header>
	<h1>{name}</h1>
	</header>
	)
	}
	export default Header
	import React from "react"
	function Header({name}) {
	return (
	<header>
	<h1>{name}</h1>
	</header>
	)
	}
	export default Header