Commit de9552d8 authored by Kristian Freeman's avatar Kristian Freeman

Answer key - sfcs

parent 6c013c5a
......@@ -4,72 +4,20 @@ import Header from "./Header";
import Post from "./Post";
import Sidebar from "./Sidebar";
// Make sure to visit src/Provider.js at the beginning
// of this exercise!
//
// Once you've done that, we can come back and rewrite the
// Blog component as a stateless functional component, or
// SFC. SFCs are written as arrow functions, with a single
// argument: a props object. The function should return
// HTML, similar to the render function in a class-based
// component. For instance:
//
// const MyComponent = props => <h1>Hello!</h1>
//
// Remember that a props object is a great opportunity
// to use destructuring. For instance, given a props object
// with a key count:
//
// const MyComponent = ({ count }) =>
// <h1>Count is {count}!</h1>
//
// Given the data passed into the Blog component by its new
// parent Provider, use destructuring to replace any previous
// references to blogTitle, blogAuthor, and posts from state,
// inside of your SFC.
//
// Once you've done this, proceed to each component and update
// it to an SFC as well.
export default class Blog extends React.Component {
constructor() {
super();
this.setState({
blogTitle: null,
blogAuthor: null,
posts: []
});
}
componentDidMount() {
const url = "https://bytesized-training-assets.herokuapp.com/blog.json";
fetch(url).then(resp =>
resp.json().then(json => {
this.setState({
blogTitle: json.blogTitle,
blogAuthor: json.blogAuthor,
posts: json.posts
});
})
);
}
render() {
const { blogTitle, blogAuthor, posts } = this.state;
return (
<div>
<Header blogTitle={blogTitle} blogAuthor={blogAuthor} />
<div style={{ display: "flex" }}>
<div style={{ width: "75%" }}>
{posts.map((item, index) => (
<Post key={index} post={item} />
))}
</div>
<div style={{ height: "100%", width: "25%" }}>
<Sidebar posts={posts} />
</div>
</div>
const Blog = ({ blogTitle, blogAuthor, posts }) => (
<div>
<Header blogTitle={blogTitle} blogAuthor={blogAuthor} />
<div style={{ display: "flex" }}>
<div style={{ width: "75%" }}>
{posts.map((item, index) => (
<Post key={index} post={item} />
))}
</div>
);
}
}
<div style={{ height: "100%", width: "25%" }}>
<Sidebar posts={posts} />
</div>
</div>
</div>
);
export default Blog;
import React from "react";
// This component should be rewritten as an SFC, or
// stateless functional component. Note the
// props being passed in currently, and rewrite
// the component to have these provided as part of
// the "props" function argument for your new SFC.
// If you're stuck, re-read the comments in src/Blog.js!
export default class Comment extends React.Component {
render() {
const {
comment: { commentAuthor, commentBody, postDate }
} = this.props;
const Comment = ({ comment: { commentAuthor, commentBody, postDate } }) => (
<div>
<h5>{commentAuthor}</h5>
<p>{commentBody}</p>
<p>
<small>{postDate}</small>
</p>
</div>
);
return (
<div>
<h5>{commentAuthor}</h5>
<p>{commentBody}</p>
<p>
<small>{postDate}</small>
</p>
</div>
);
}
}
export default Comment;
import React from "react";
// This component should be rewritten as an SFC, or
// stateless functional component. Note the
// props being passed in currently, and rewrite
// the component to have these provided as part of
// the "props" function argument for your new SFC.
// If you're stuck, re-read the comments in src/Blog.js!
export default class Header extends React.Component {
render() {
const { blogTitle, blogAuthor } = this.props;
const Header = ({ blogTitle, blogAuthor }) => (
<div style={{ background: "#eee", padding: "1em 4em" }}>
<h1>{blogTitle}</h1>
<h2>{blogAuthor}</h2>
</div>
);
return (
<div style={{ background: "#eee", padding: "1em 4em" }}>
<h1>{blogTitle}</h1>
<h2>{blogAuthor}</h2>
</div>
);
}
}
export default Header;
import React from "react";
import Comment from "./Comment";
// This component should be rewritten as an SFC, or
// stateless functional component. Note the
// props being passed in currently, and rewrite
// the component to have these provided as part of
// the "props" function argument for your new SFC.
// If you're stuck, re-read the comments in src/Blog.js!
export default class Post extends React.Component {
render() {
const {
post: { postTitle, postContent, comments }
} = this.props;
const Post = ({ post: { postTitle, postContent, comments } }) => (
<div style={{ padding: "2em" }}>
<h1>{postTitle}</h1>
<p>{postContent}</p>
{comments.map((comment, index) => (
<Comment key={index} comment={comment} />
))}
</div>
);
return (
<div style={{ padding: "2em" }}>
<h1>{postTitle}</h1>
<p>{postContent}</p>
{comments.map((comment, index) => (
<Comment key={index} comment={comment} />
))}
</div>
);
}
}
export default Post;
......@@ -2,33 +2,30 @@ import React from "react";
import Blog from "./Blog";
// Consider the idea of "presentational" components
// versus what is commonly referred to as a "container":
// a component that requests or manages data.
//
// For instance, a Provider component, as has begun to
// be defined below, could replace the Blog componentDidMount
// functionality, by storing all the relevant blog data in
// state, and simply passing it down to the Blog component.
//
// In doing so, the Blog component becomes another presentational
// component, like the subcomponents that it renders in its
// component tree.
//
// Let's try it! Move any data retrieving or storage - that is,
// anything related to the Blog component's state - into the
// Provider component. That includes the constructor setup,
// componentDidMount, and the destructuring inside of the
// render function.
//
// Once you've done this, make sure to go into src/index.js and
// define Provider as the "root" component for your application.
// If you don't do this, your whole app will stop working!
//
// Inside of Provider, render the Blog component and pass
// in the relevant data as props - that means everything inside
// of state. Once you've done this, you'll be able to rewrite
// every component inside of the Blog component tree as a
// stateless functional component.
export default class Provider extends React.Component {
constructor() {
super();
this.state = {
blogTitle: null,
blogAuthor: null,
posts: []
};
}
export default class Provider extends React.Component {}
componentDidMount() {
const url = "https://bytesized-training-assets.herokuapp.com/blog.json";
fetch(url).then(resp =>
resp.json().then(json => {
this.setState({
blogTitle: json.blogTitle,
blogAuthor: json.blogAuthor,
posts: json.posts
});
})
);
}
render() {
return <Blog {...this.state} />;
}
}
import React from "react";
// This component should be rewritten as an SFC, or
// stateless functional component. Note the
// props being passed in currently, and rewrite
// the component to have these provided as part of
// the "props" function argument for your new SFC.
// If you're stuck, re-read the comments in src/Blog.js!
export default class Sidebar extends React.Component {
render() {
const { posts } = this.props;
const Sidebar = ({ posts }) => (
<div style={{ background: "#eee", padding: "1em" }}>
<h3>Recent posts</h3>
<ul>
{posts.map(({ postDate, postTitle }, index) => (
<li key={index}>
{postTitle} | {postDate}
</li>
))}
</ul>
</div>
);
return (
<div style={{ background: "#eee", padding: "1em" }}>
<h3>Recent posts</h3>
<ul>
{posts.map(({ postDate, postTitle }, index) => (
<li key={index}>
{postTitle} | {postDate}
</li>
))}
</ul>
</div>
);
}
}
export default Sidebar;
import React from "react";
import ReactDOM from "react-dom";
import Blog from "./Blog";
import Provider from "./Provider";
const root = document.getElementById("root");
if (root) {
ReactDOM.render(<Blog />, root);
ReactDOM.render(<Provider />, root);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment