React Patterns in ProductHunt

Transcript

1. 1.

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

2. 2.

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

3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   None
7. 7.

   early 2014 jQuery spaghetti October 2014 Backbone February 2015 React

   & Rails May 2015 custom Flux
8. 8.

   early 2014 jQuery spaghetti October 2014 Backbone February 2015 React

   & Rails May 2015 custom Flux December 2015 Redux
9. 9.

   early 2014 jQuery spaghetti October 2014 Backbone February 2015 React

   & Rails May 2015 custom Flux December 2015 Redux January 2016 React-Router
10. 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. 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. 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. 13.

    February 2015 React & Rails May 2015 custom Flux December

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

    December 2015 Redux January 2016 React-Router April 2016 Redux Ducks

    Febuary 2017 GraphQL
15. 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. 16.

    components/ graphql/
 layouts/ lib/ modules/ pages/ styles/ types/ utils/
 config.js

    entry.js paths.js reducers.js routes.js
17. 17.

    components/ graphql/
 layouts/ lib/ modules/ pages/ styles/ types/ utils/
 config.js

    entry.js paths.js reducers.js routes.js
18. 18.

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


19. 19.

    components/ graphql/
 layouts/ lib/ modules/ pages/ styles/ types/ utils/
 config.js

    entry.js paths.js reducers.js routes.js
20. 20.

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


21. 21.

    components/ graphql/
 layouts/ lib/ modules/ pages/ styles/ types/ utils/
 config.js

    entry.js paths.js reducers.js routes.js
22. 22.

    ! Generic " Utility # Domain $ Pages 
 Component

    types

23. 23.

    ! Generic " Utility # Domain 
 Component types


24. 24.

    ! Generic " Utility # Domain 
 Component types


25. 25.

    Generic components

26. 26.

    None
27. 27.

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


28. 28.

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


    Component as folder

29. 29.

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


30. 30.

    import * as React from "react"; import Font from "components/Font";

    <Font.Text>{text}</Font.Text>
31. 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. 32.

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


33. 33.

    CSS // style.css .text { font-size: 14px; } CSS //

    component.js
 import styles from './styles.css'; <span className={styles.text}> </span>
34. 34.

    CSS // style.css .text { font-size: 14px; } CSS //

    component.js
 import styles from './styles.css'; <span className={styles.text}> </span>
35. 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. 36.

    import * as React from "react"; import Font from "components/Font";

    <Font.Text>text</Font.Text> // -> <span class="text">text</span>
37. 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. 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. 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. 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. 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. 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. 43.

    import * as React from "react"; import Font from "components/Font";

    <Font.Text>text</Font.Text> // -> <span class="text">Text</span>
44. 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. 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. 46.

    yarn install "classnames"

47. 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. 48.

    https://github.com/facebook/flow

49. 49.

    export type Topic = { id: number, image_uuid?: ?string, name:

    string, description?: string, followers_count: number, posts_count: number, slug: string, };
50. 50.

    function isFollowing(user: User, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !==

    -1; } 
 

51. 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. 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. 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. 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. 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. 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. 57.

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

58. 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. 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. 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() { /* ... */ } }
61. 61.

    None
62. 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
63. 63.

    None
64. 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. 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. 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. 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. 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. 69.

    ! Generic " Utility # Domain 
 Component types


70. 70.

    ✅ Generic " Utility # Domain 
 Component types


71. 71.

    ✅ Generic " Utility # Domain 
 Component types


72. 72.

    Utility components

73. 73.

    <WindowResize onResize={handleResize} />

74. 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. 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. 76.

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

    /> <AddBodyClassName className={className} />
77. 77.

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

    </Form.ErrorMessage>
78. 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. 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. 80.

    <Clock>
 {currentTime => ( <Time time={currentTime} format="hh:mm:ss" /> )} </Clock>

    
 Function as props

81. 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. 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. 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. 84.

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


85. 85.

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

86. 86.

    <Visible if="isLoggedIn"> {isLoggedIn => (isLoggedIn ? <LogoutButton /> : <LoginButton

    />)} </Visible>
87. 87.

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

88. 88.

    <Visible if="screenSize" args="mobile"> {isMobile => (isMobile ? <TabBar /> :

    <Sidebar />)} </Visible>
89. 89.

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

90. 90.

    ✅ Generic " Utility # Domain 
 Component Types


91. 91.

    ✅ Generic ✅ Utility # Domain 
 Component Types


92. 92.

    ✅ Generic ✅ Utility # Domain 
 Component Types


93. 93.

    Domain components

94. 94.

    None
95. 95.

    None
96. 96.

    None
97. 97.

    None
98. 98.

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

99. 99.

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

100. 100.

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

101. 101.

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

102. 102.

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

103. 103.

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

104. 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. 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. 106.

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


107. 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. 108.

     TopicItem TopicImage TopicFollowButton

109. 109.

     None
110. 110.

     None
111. 111.

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


112. 112.

     fragment TopicFollowButton on Topic { id name isFollowed } 


     GraphQL fragment
 components/TopicFollowButton/Fragment.graphql
113. 113.

     mutation TopicFollowToggle($input: TopicFollowToggleInput!) { topicFollowToggle(input: $input) { node {
 id

     isFollowed
 } } } components/TopicItem/Mutation.graphql 
 GraphQL mutation

114. 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. 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. 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. 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
118. 118.

     None
119. 119.

     None
120. 120.

     <Box actions={<SearchField />}> <InfiniteScroll loading={<TopicPlaceHolder />}> <TopicsList> <TopicItem> <TopicImage />

     <Font.Title /> <Font.SilentText /> <TopicFollowButton /> </TopicItem> </TopicsList> </InfiniteScroll> </Box>
121. 121.

     TopicPage TopicItem TopicImage TopicFollowButton

122. 122.

     ✅ Generic ✅ Utility # Domain 
 Component Types


123. 123.

     ✅ Generic ✅ Utility ✅ Domain 
 Component Types


124. 124.

     ✅ Generic ✅ Utility ✅ Domain 
 Component Types


125. 125.

     None
126. 126.

     Thanks '

127. 127.

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