The document describes the evolution of React patterns used at Product Hunt over time, from early jQuery implementations to more modern approaches using React, Redux, GraphQL, and other technologies. It discusses the types of components used (generic, utility, domain-specific) and how components are structured, including CSS Modules and TypeScript types. Utility components discussed include ones for window resizing, scrolling, and keyboard handling. Form components are shown using context and functions as children props.

1. React Patterns in
Product Hunt
Radoslav Stankov 08/07/2018

2. Radoslav Stankov
@rstankov
blog.rstankov.com
github.com/rstankov
twitter.com/rstankov

7. early 2014 jQuery spaghetti
October 2014 Backbone
February 2015 React & Rails
May 2015 custom Flux

8. early 2014 jQuery spaghetti
October 2014 Backbone
February 2015 React & Rails
May 2015 custom Flux
December 2015 Redux

9. early 2014 jQuery spaghetti
October 2014 Backbone
February 2015 React & Rails
May 2015 custom Flux
December 2015 Redux
January 2016 React-Router

10. early 2014 jQuery spaghetti
October 2014 Backbone
February 2015 React & Rails
May 2015 custom Flux
December 2015 Redux
January 2016 React-Router
April 2016 Redux Ducks

11. early 2014 jQuery spaghetti
October 2014 Backbone
February 2015 React & Rails
May 2015 custom Flux
December 2015 Redux
January 2016 React-Router
April 2016 Redux Ducks
Febuary 2017 GraphQL

12. October 2014 Backbone
February 2015 React & Rails
May 2015 custom Flux
December 2015 Redux
January 2016 React-Router
April 2016 Redux Ducks
Febuary 2017 GraphQL

13. February 2015 React & Rails
May 2015 custom Flux
December 2015 Redux
January 2016 React-Router
April 2016 Redux Ducks
Febuary 2017 GraphQL

14. December 2015 Redux
January 2016 React-Router
April 2016 Redux Ducks
Febuary 2017 GraphQL

15. early 2014 jQuery spaghetti
October 2014 Backbone
February 2015 React & Rails
May 2015 custom Flux
December 2015 Redux
January 2016 React-Router
April 2016 Redux Ducks
Febuary 2017 GraphQL

16. components/
graphql/
layouts/
lib/
modules/
pages/
styles/
types/
utils/
config.js
entry.js
paths.js
reducers.js
routes.js

17. components/
graphql/
layouts/
lib/
modules/
pages/
styles/
types/
utils/
config.js
entry.js
paths.js
reducers.js
routes.js

18.
https://speakerdeck.com/rstankov/react-at-product-hunt-wad

19. components/
graphql/
layouts/
lib/
modules/
pages/
styles/
types/
utils/
config.js
entry.js
paths.js
reducers.js
routes.js

20.
https://speakerdeck.com/rstankov/graphql-at-product-hunt

21. components/
graphql/
layouts/
lib/
modules/
pages/
styles/
types/
utils/
config.js
entry.js
paths.js
reducers.js
routes.js

22. ! Generic
" Utility
# Domain
$ Pages
Component types

23. ! Generic
" Utility
# Domain
Component types

24. ! Generic
" Utility
# Domain
Component types

25. Generic components

27. components/
Font/
index.js
styles.css
Component as folder

28. components/
Component/
SubComponent/
Fragment.graphql
Mutation.graphql
icon.svg
index.js
styles.css
utils.js
Component as folder

29. components/
Font/
index.js
styles.css
Component as folder

30. import * as React from "react";
import Font from "components/Font";
<Font.Text>{text}</Font.Text>

31. components/Font/index.js
import * as React from "react";
import styles from "./styles.css";
export function Text({ children }) {
return (
<span className={styles.text}>
{children}
</span>
);
}
Functional components

32. components/
Font/
index.js
styles.css
CSS Modules

33. CSS
// style.css
.text {
font-size: 14px;
}
CSS
// component.js
import styles from './styles.css';
<span className={styles.text}>
</span>

34. CSS
// style.css
.text {
font-size: 14px;
}
CSS
// component.js
import styles from './styles.css';
<span className={styles.text}>
</span>

35. CSS
// style.css
.text {
font-size: 14px;
}
CSS
// component.js
import styles from './styles.css';
<span className={styles.text}>
</span>
CSS
// style.css
.text_3mRwv {
font-size: 14px;
}
CSS
// result.js
<span class="text_3mRwv">
</span>

36. import * as React from "react";
import Font from "components/Font";
<Font.Text>text</Font.Text>
// -> <span class="text">text</span>

37. import * as React from "react";
import Font from "components/Font";
<Font.Text>text</Font.Text>
// -> <span class="text">text</span>
<Font.Text component="p">text</Font.Text>
// -> <p class="text">text</p>

38. import * as React from "react";
import Font from "components/Font";
<Font.Text>text</Font.Text>
// -> <span class="text">text</span>
<Font.Text component="p">text</Font.Text>
// -> <p class="text">text</p>
<Font.Text component={Link} to="/page">text</Font.Text>
// -> <a class="text" href="/page">text</a>

39. import * as React from "react";
import Font from "components/Font";
<Font.Text>text</Font.Text>
// -> <span class="text">text</span>
<Font.Text component="p">text</Font.Text>
// -> <p class="text">text</p>
<Font.Text component={Link} to="/page">text</Font.Text>
// -> <a class="text" href="/page">text</a>
Pass custom component as prop

40.
Pass custom component as prop
import * as React from "react";
import styles from "./styles.css";
export function Text({ component, children, ...props }) {
Component = component || "span";
return (
<Component className={styles.text} {...props}>
{children}
</Component>
);
}
components/Font/index.js

41.
Pass custom component as prop
import * as React from "react";
import styles from "./styles.css";
export function Text({ component, children, ...props }) {
Component = component || "span";
return (
<Component className={styles.text} {...props}>
{children}
</Component>
);
}
components/Font/index.js
%

42. import * as React from "react";
import styles from "./styles.css";
export function Text({ component, ...props }) {
Component = component || "span";
return <Component className={styles.text} {...props} />;
}
Pass custom component as prop
&
components/Font/index.js

43. import * as React from "react";
import Font from "components/Font";
<Font.Text>text</Font.Text>
// -> <span class="text">Text</span>

44. import * as React from "react";
import Font from "components/Font";
import styles from "./styles.css";
<Font.Text className={styles.custom}>text</Font.Text>
// -> <span class="text custom">text</span>
Pass extra class name

45. import * as React from "react";
import styles from "./styles.css";
import classNames from "classnames";
export function Text({ component, className, ...props }) {
Component = component || "span";
return <Component className={className(styles.text, className)} {...pro
}
Pass extra class name
components/Font/index.js

46. yarn install "classnames"

47. import * as React from "react";
import styles from "./styles.css";
import classNames from "classnames";
export function Text({ component, className, ...props }) {
Component = component || "span";
return <Component className={className(styles.text, className)} />;
}
components/Font/index.js

48. https://github.com/facebook/flow

49. export type Topic = {
id: number,
image_uuid?: ?string,
name: string,
description?: string,
followers_count: number,
posts_count: number,
slug: string,
};

50. function isFollowing(user: User, topic: Topic): boolean {
return user.followedTopicsIds.indexOf(topic.id) !== -1;
}

51. function isFollowing(user: User, topic: Topic): boolean {
return user.followedTopicsIds.indexOf(topic.id) !== -1;
}
isFollowing(null, topic);
isFollowing(user, null);
isFollowing(user, somethingElse);

52. function isFollowing(user: User, topic: Topic): boolean {
return user.followedTopicsIds.indexOf(topic.id) !== -1;
}
isFollowing(null, topic);
isFollowing(user, null);
isFollowing(user, somethingElse);

53. function isFollowing(user: User, topic: Topic): boolean {
return user.followedTopicsIds.indexOf(topic.id) !== -1;
}
isFollowing(null, topic);
isFollowing(user, null);
isFollowing(user, somethingElse);
const variable: number = isFollowing(user, topic);

54. function isFollowing(user: User, topic: Topic): boolean {
return user.followedTopicsIds.indexOf(topic.id) !== -1;
}
isFollowing(null, topic);
isFollowing(user, null);
isFollowing(user, somethingElse);
const variable: number = isFollowing(user, topic);

55. function isFollowing(user: User, topic: Topic): boolean {
return user.followedTopicsIds.indexOf(topic.id) !== -1;
}
isFollowing(null, topic);
isFollowing(user, null);
isFollowing(user, somethingElse);
const variable: number = isFollowing(user, topic);
const variable: boolean = isFollowing(user, topic);

56. function isFollowing(user: User, topic: Topic): boolean {
return user.followedTopicsIds.indexOf(topic.id) !== -1;
}
isFollowing(null, topic);
isFollowing(user, null);
isFollowing(user, somethingElse);
const variable: number = isFollowing(user, topic);
const variable: boolean = isFollowing(user, topic);
' (

57. <UserImage user={user} width={50} height={30} />
<UserImage user={user} variant="small" />

58. <UserImage user={user} width={50} height={30} />
<UserImage user={user} variant="small" />
<UserImage user={user} width={50} variant="small" />
<UserImage user={user} width={50} height={30} variant="small" />

59. <UserImage user={user} width={50} height={30} />
<UserImage user={user} variant="small" />
<UserImage user={user} width={50} variant="small" />
<UserImage user={user} width={50} height={30} variant="small" />
class UserImage extends React.Component {
props:
| {| user: User, width: number, height: number |}
| {| user: User, variant: "big" | "medium" | "small" |};
render() {
/* ... */
}
}

60. <UserImage user={user} width={50} height={30} />
<UserImage user={user} variant="small" />
<UserImage user={user} width={50} variant="small" />
<UserImage user={user} width={50} height={30} variant="small" />
class UserImage extends React.Component {
props:
| {| user: User, width: number, height: number |}
| {| user: User, variant: "big" | "medium" | "small" |};
render() {
/* ... */
}
}

62. /* @flow */
import * as React from "react";
import styles from "./styles.css";
import classNames from "classnames";
type Props = {
component: any,
className?: string
};
export function Text({ component, className, ...props }: Props) {
Component = component || "span";
return (
<Component className={className(styles.text, className)} {...props} /
);
}
Type safety
components/Font/index.js

64. /* @flow */
import * as React from "react";
import classNames from "classnames";
import styles from "./styles.css";
type Props = {
className?: ?string,
color?: "black" | "grey" | "orange" | "silver" | "white" | "error",
component?: any,
size?: "xSmall" | "small" | "medium" | "large" | "xLarge",
uppercase?: boolean,
weight?: "light" | "normal" | "semiBold" | "bold"
};
export default function Font({
className,
color,
component,
size,
uppercase,
Component packages
components/Font/index.js

65. weight?: "light" | "normal" | "semiBold" | "bold"
};
export default function Font({
className,
color,
component,
size,
uppercase,
weight,
...props
}: Props) {
const Component = component || "span";
const classes = classNames(
styles.font,
styles[color],
styles[size],
styles[weight],
uppercase && styles.uppercase,
className
);
return <Component className={classes} {...props} />;
}
Font.Text = (props: Props) => (
Component packages
components/Font/index.js

66. return <Component className={classes} {...props} />;
}
Font.Text = (props: Props) => (
<Font size="small" weight="normal" {...props} />
);
Font.SecondaryText = (props: Props) => (
<Font size="xSmall" uppercase={true} weight="normal" {...props} />
);
Font.Title = (props: Props) => (
<Font size="medium" weight="normal" {...props} />
);
Font.Featured = (props: Props) => (
<Font size="large" weight="light" {...props} />
);
Font.Headline = (props: Props) => (
<Font size="xLarge" weight="bold" {...props} />
);
Component packages
components/Font/index.js

67. import Font from "components/Font";
<Font.Text>text</Font.Text>
<Font.SecondaryText>text</Font.SecondaryText>
<Font.Title>text</Font.Title>
<Font.Featured>text</Font.Featured>
<Font.Headline>text</Font.Headline>
Component packages

68. import Form from "components/Form";
<Form data={settings} submit={submit} onSubmit={onSubmit}>
<Form.Field name="name" />
<Form.Field name="headline" />
<Form.Field name="email" />
<Form.Field name="newsletter" type="select" options={OPTIONS} />
<Form.Field name="header" type={HeaderUploadInput} />
<Form.Buttons submitText="Update" />
</Form>
Component packages

69. ! Generic
" Utility
# Domain
Component types

70. ✅ Generic
" Utility
# Domain
Component types

71. ✅ Generic
" Utility
# Domain
Component types

72. Utility components

73. <WindowResize onResize={handleResize} />

74. /* @flow */
import * as React from 'react';
import { throttle } from 'lodash';
type Props = {
onResize: ({| height: number, width: number |}) => void,
};
export default class WindowResize extends React.Component<Props> {
componentDidMount() {
this.handleResize();
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
shouldComponentUpdate() {
Renderless components
components/WindowResize/index.js

75. window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
shouldComponentUpdate() {
return false;
}
render() {
return null;
}
handleResize = throttle(() => {
this.props.onResize({
height: window.innerHeight,
width: window.innerWidth,
});
}, 500);
}
Renderless components
components/WindowResize/index.js

76. <WindowResize onResize={handleResize} />
<ScrollObserver onScroll={handleScroll} />
<KeyHandler keyEventName="press" keyValue="s" onKeyHandle={onPress} />
<AddBodyClassName className={className} />

77.
Function as props
<Form.ErrorMessage name="name">
{error => <Font.Text color="error">{error}</Font.Text>}
</Form.ErrorMessage>

78. /* @flow */
import classNames from "classnames";
import * as React from "react";
import styles from "./styles.css";
import { formContextTypes, getErrorMessage } from "./utils";
import type { FormContextType } from "./types";
type Props = {
name: string,
children?: Function
};
export default function ErrorMessage(
{ name, children }: Props,
{ form }: FormContextType
) {
const message = getErrorMessage(form, name);
if (!message) {
return null;
Function as props
components/Form/ErrorMessage/index.js

79. children?: Function
};
export default function ErrorMessage(
{ name, children }: Props,
{ form }: FormContextType
) {
const message = getErrorMessage(form, name);
if (!message) {
return null;
}
if (typeof children === "function") {
return children(message) || null;
}
return <Font.Text color="error">{message}</Font.Text>;
}
ErrorMessage.defaultProps = { name: "base"};
ErrorMessage.contextTypes = formContextTypes;
Function as props
components/Form/ErrorMessage/index.js

80. <Clock>
{currentTime => (
<Time time={currentTime} format="hh:mm:ss" />
)}
</Clock>
Function as props

81. /* @flow */
import * as React from "react";
import moment from "moment";
import type { Moment } from "types/Moment";
type Props = {
children: (time: Moment) => any
};
type State = {
time: Moment
};
export default class Clock extends React.Component<Props, State> {
state = { time: moment() };
intervalId = null;
componentDidMount() {
this.updateTime();
Function as props
components/Clock/index.js

82. time: Moment
};
export default class Clock extends React.Component<Props, State> {
state = { time: moment() };
intervalId = null;
componentDidMount() {
this.updateTime();
if (!this.intervalId) {
this.intervalId = setInterval(this.updateTime, 1000);
}
}
componentWillUnmount() {
if (this.intervalId) {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
updateTime = () => {
Function as props
components/Clock/index.js

83. this.updateTime();
if (!this.intervalId) {
this.intervalId = setInterval(this.updateTime, 1000);
}
}
componentWillUnmount() {
if (this.intervalId) {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
updateTime = () => {
this.setTime({ time: moment() });
};
render() {
return this.children(this.state.time);
}
}
Function as props
components/Clock/index.js

84. <Visible if="isLoggedIn">
<LogoutButton />
</Visible>

85. <Visible if="isLoggedIn">
<LogoutButton />
</Visible>
<Visible unless="isLoggedIn">
<LoginButton />
</Visible>

86. <Visible if="isLoggedIn">
{isLoggedIn => (isLoggedIn ? <LogoutButton /> : <LoginButton />)}
</Visible>

87. <Visible unless="screenSize" args="mobile">
<SideBar />
</Visible>

88. <Visible if="screenSize" args="mobile">
{isMobile => (isMobile ? <TabBar /> : <Sidebar />)}
</Visible>

89. <Visible if="featureEnabled" args="secretFeature">
<Component />
</Visible>

90. ✅ Generic
" Utility
# Domain
Component Types

91. ✅ Generic
✅ Utility
# Domain
Component Types

92. ✅ Generic
✅ Utility
# Domain
Component Types

93. Domain components

98. <TopicItem>
<TopicImage />
<Font.Title />
<Font.SilentText />
<TopicFollowButton />
</TopicItem>

99. <TopicItem>
<TopicImage />
<Font.Title />
<Font.SilentText />
<TopicFollowButton />
</TopicItem>

100. <TopicItem>
<TopicImage />
<Font.Title />
<Font.SilentText />
<TopicFollowButton />
</TopicItem>

101. <TopicItem>
<TopicImage />
<Font.Title />
<Font.SilentText />
<TopicFollowButton />
</TopicItem>

102. <TopicItem>
<TopicImage />
<Font.Title />
<Font.SilentText />
<TopicFollowButton />
</TopicItem>

103. <TopicItem>
<TopicImage />
<Font.Title />
<Font.SilentText />
<TopicFollowButton />
</TopicItem>

104. /* @flow */
import * as React from "react";
import Font from "components/Font";
import Link from "components/Link";
import TopicFollowButton from "components/TopicFollowButton";
import TopicImage from "components/TopicImage";
import classNames from "classNames";
import paths from "paths";
import styles from "./styles.css";
import type { TopicItemFragament as Topic } from "graphql/schema.js";
type Props = {
topic: Topic,
className?: string
};
export default function TopicItem({ topic, className }: Props) {
return (
<div className={className(styles.item, className)}>
<Link to={paths.topics.show(topic)} className={styles.image}>components/TopicItem/index.js
Domain component

105. type Props = {
topic: Topic,
className?: string
};
export default function TopicItem({ topic, className }: Props) {
return (
<div className={className(styles.item, className)}>
<Link to={paths.topics.show(topic)} className={styles.image}>
<TopicImage topic={topic} size={50} />
</Link>
<Link to={paths.topics.show(topic)} className={styles.info}>
<Font.Title>{topic.name}</Font.Title>
<Font.SilentText>{topic.description}</Font.SilentText>
</Link>
<TopicFollowButton topic={topic} />
</div>
);
}
components/TopicItem/index.js
Domain component

106. components/
TopicItem/
Fragment.graphql
index.js
styles.css
Component as folder

107. #import "components/TopicFollowButton/Fragment.graphql"
#import "components/TopicImage/Fragment.graphql"
fragment TopicItem on Topic {
id
name
slug
description
...TopicFollowButton
...TopicImage
}
components/TopicItem/Fragment.graphql
GraphQL fragment

108. TopicItem
TopicImage
TopicFollowButton

111. components/
TopicFollowButton/
Fragment.graphql
Mutation.graphql
index.js
styles.css
Component as folder

112. fragment TopicFollowButton on Topic {
id
name
isFollowed
}
GraphQL fragment
components/TopicFollowButton/Fragment.graphql

113. mutation TopicFollowToggle($input: TopicFollowToggleInput!) {
topicFollowToggle(input: $input) {
node {
id
isFollowed
}
}
}
components/TopicItem/Mutation.graphql
GraphQL mutation

114. /* @flow */
import * as React from "react";
import Button from "ph/components/Button";
import MUTATION from "./Mutation.graphql";
import openLogin from "ph/utils/openLogin";
import type { TopicButtonFragament as Topic } from "ph/graphql/
schema.js";
import { createContainer } from "ph/lib/container";
import { graphql } from "react-apollo";
type Props = {
className?: string,
isLogged: boolean,
topic: Topic,
toggleFollow: Function
};
export class TopicFollowButton extends React.Component<Props, {}> {
render() {
const isFollowed = this.props.topic.isFollowed;
Action button
components/TopicItem/index.graphql

115. topic: Topic,
toggleFollow: Function
};
export class TopicFollowButton extends React.Component<Props, {}> {
render() {
const isFollowed = this.props.topic.isFollowed;
return (
<LoadButton
active={isFollowed}
className={this.props.className}
onClick={this.handleClick}
data-test="topic-toggle-follow-button"
>
{isFollowed ? "Following" : "Follow"}
</LoadButton>
);
}
handleClick: Function = async () => {
if (this.props.isLogged) {
this.props.toggleFollow(!this.props.topic.isFollowed);
} else {
openLogin({ reason: `Follow ${this.props.topic.name}` });
Action button
components/TopicItem/index.graphql

116. );
}
handleClick: Function = async () => {
if (this.props.isLogged) {
this.props.toggleFollow(!this.props.topic.isFollowed);
} else {
openLogin({ reason: `Follow ${this.props.topic.name}` });
}
};
}
export default createContainer({
renderComponent: TopicFollowButton,
decorators: [
graphql(MUTATION, {
props: ({ ownProps, mutate }) => ({
toggleFollow(follow) {
return mutate({
variables: {
input: { id: ownProps.topic.id, follow: follow }
}
});
}
Action button
components/TopicItem/index.graphql

117. export default createContainer({
renderComponent: TopicFollowButton,
decorators: [
graphql(MUTATION, {
props: ({ ownProps, mutate }) => ({
toggleFollow(follow) {
return mutate({
variables: {
input: { id: ownProps.topic.id, follow: follow }
}
});
}
})
})
],
mapStateToProps({ currentUser }) {
return {
isLogged: currentUser.id
};
}
});
Action button
components/TopicItem/index.graphql

120. <Box actions={<SearchField />}>
<InfiniteScroll loading={<TopicPlaceHolder />}>
<TopicsList>
<TopicItem>
<TopicImage />
<Font.Title />
<Font.SilentText />
<TopicFollowButton />
</TopicItem>
</TopicsList>
</InfiniteScroll>
</Box>

121. TopicPage TopicItem
TopicImage
TopicFollowButton

122. ✅ Generic
✅ Utility
# Domain
Component Types

123. ✅ Generic
✅ Utility
✅ Domain
Component Types

124. ✅ Generic
✅ Utility
✅ Domain
Component Types

126. Thanks '

127.
https://github.com/rstankov/talks-code