React Patterns in ProductHunt

Video from the talk:
https://www.youtube.com/watch?v=bb9Qbybcr64

Sample code:
https://github.com/RStankov/talks-code/tree/master/2018.07.08%20-%20OdessaJS

Transcript

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