Introduction to React Design Patterns Brandon Williams Amazee Labs - PowerPoint PPT Presentation

Introduction to React Design Patterns Brandon Williams Amazee Labs

Before We Begin

React Design Patterns Design patterns are formalized best practices that the Declarative programmer can use to solve common problems Flexible when designing an application or system. Library But these are just my opinions .

Brandon Williams Lead Developer Amazee Labs Drupal 8 sites since Alpha React projects since 2016 SPAs, Interactive Touch Displays, Embeddable Widgets, Improved Filtered Search GraphQL Module image

Design Patterns

Presentational/Container Components Presentational Container How things look How things work Little to no state Render presentational and container Receive all data via props components Functional component Provide data and behavior Same use case as Twig templates Stateful

Presentational/Container Components Presentational Container class CommentListContainer extends const Commentlist = comments => ( React.Component { <ul> componentDidMount() { {comments.map( loadComments("/my-comments.json") ({ body, author }) => } <li>{body}-{author}</li> render() { )} return <CommentList </ul> comments={this.state.comments} ) />; } }

Presentational/Container Components Why? Difficulty Separation of concerns Reusable Testable Style guides

Stateless Components + Functional Programming Pure functions const SubmitButton = ({ label, No side-effects or shared state onSubmit, Declarative disabled, Composition over inheritance }) => ( <input Immutable state type="submit" disabled={disabled} value={label} onClick={onSubmit} /> );

Stateless Components + Functional Programming Why? Difficulty Declarative programming for declarative library Immutability helps avoid render errors Easier to reason about component dependencies Fun vocabulary: map, reduce, functor, monad, currying

Higher Order Components/Functions A function that returns a const withHideLoading = (BaseComponent) => (props) => ( component/function {props.loading && Wraps functional components <BaseComponent />} Recompose library for React integration ) Same use case as PHP Traits or OO const ButtonWithLoading = Decorator pattern withHideLoading(<SubmitButton label="Submit" />) <ButtonWithLoading loading={true} />

Higher Order Components/Functions const withDisabledState = withState( const SubmitButton = ({ 'disabled', label, 'setDisabled', onSubmit, false); disabled, }) => (<input const withDisabledOnSubmit = type="submit" withHandlers({ disabled={disabled} onSubmit: ({ setDisabled }) => value={label} () => setDisabled(true), onClick={onSubmit} }) />); const ButtonWithDisable = compose( withDisabledState, withDisabledOnSubmit, )(<SubmitButton label="submit" />)

Higher Order Components/Functions Why? Difficulty Keep code DRY Keep functional components pure Separation of concerns

Render Props/Function as Children Alternative to HoC Difficulty const HideLoading = (props) => { if (props.loading) { return null; } return this.props.render(); } <HideLoading loading{true} render={() => ( <SubmitButton label="submit" /> )} />

Flux Pattern for managing data Difficulty All state flows in one direction All state managed in the store State changes cause re-renders Redux

CFP Open! 2018.texascamp.org

Join us for contribution sprints Friday, April 13, 2018 Mentored First time General Core sprint sprinter workshop sprint 9:00-18:00 9:00-12:00 9:00-18:00 Room: 103 Room: 101 Room: 104 #drupalsprint

Questions? Brandon Williams @rocketeerbkw