Article Feed Component

article-feed.md

Component Structure

Option: pre-render articles via server-side page load & pass them directly into component via props. You'd still need to wait for the JS bundle to load before users would see the list, but it would cut out an extra round-trip to your server

render(
  <ArticleFeed articles={articlesArrayProvidedFromPageLoad} />,
  document.getElementById('#article-feed-root')
);

Otherwise use XHR request in component's componentDidMount lifecycle function. This function's primary task would be to update the component state with the results of the XHR request. (consider loading spinner, etc)

<ArticleFeed>
  <FilterOptions /> 
  <ArticleList>
    <ArticleTeaser />
  </ArticleList>
</ArticleFeed>

^ psudo code for component structure. I left out all "ui" type components

<ArticleFeed />

State would be stored here. This would be your only "stateful" component. All other components would be "stateless functional" components.

You would also add handler functions to this component responsible for updating its own state with this.setState().

The state might look something like:

state = {
  filter: {},
  filterResults: {}
}

<FilterOptions onChange={handleFilterChange}/>

This guy would handle collecting the desired filter values and invoking a function to update state.filter & state.filterResults.

Ui would contain elements to allow users to select filters. Pass the results of those back up through onChange prop or similar & let the parent component handle updating the state

<ArticleList articles={this.state.filterResults}/>

Would recursively render out articles in a list. Something like:

<ul> 
  { articles.map(props => (
    <li>
      <ArticleTeaser {...props}/>
    </li> 
  ))}
</ul>

<ArticleTeaser {...item} />

This guy would handle laying out the article. would receive all props from each item in the list of articles. You could pass along a "primary" boolean prop to conditionally render alternate styles, etc

This component may contain many "ui" type components responsible solely for rendering spacing, type, & images, etc.