# SiteOne React Snippets Write `s1-` in JavaScript React file and pick one of snippets below. Use Tab To fill in names conveniently. Proper function of these snippets assumes you are using: - flow - react >= 16.7.x - eslint config `@siteone/eslint-config` Have fun. ## 0.0.4 - Fixed more errors in snippets, tweaked names ## 0.0.3 ### Changes - Fixed minor errors in existing templates. ### `s1-st` Storybook basic story ```javascript import React from 'react' import { storiesOf } from '@storybook/react' import MyComponent from './MyComponent' import debug from 'debug' const log = debug('story:MyComponent:log') storiesOf('My component group/MyComponent', module).add('Default', () => ( log('clicked')}>Click Me! )) ``` ### `s1-sg` New saga ```javascript import { put, takeLatest } from 'redux-saga/effects' import { TRIGGER_ACTION, createNextAction, } from './actions' /** * Saga description */ export function* createNextActionSaga(action:Object<{type:string, payload?:any}>) { yield put(createNextAction(`Hello action ${type}`)) } /** * Root saga manages watcher lifecycle */ export default function* triggerActionSage() { yield takeLatest(TRIGGER_ACTION, createNextActionSaga) } ``` ## 0.0.2 ### `s1-qc` ```javascript // @flow import React, { memo } from 'react' import PropTypes from 'prop-types' import { Query } from 'react-apollo' import gql from 'graphql-tag' import WhateverView from './Whatever' type WhateverContainerProps = { any: String, i: String, } const QUERY = gql` # Query here ` const WhateverContainer = memo(({ ...props }: WhateverContainerProps) => ( {({ data, error, loading }) => { if (error) return '💩 Oops!' if (loading) return 'Načítám...' return () }} )) export default WhateverContainer ``` ## 0.0.1 ### `s1-c` ```javascript // @flow import React, { Node } from 'react' import PropTypes from 'prop-types' import styles from './MyComponent.scss' type MyComponentProps = { children: Node } const MyComponent = ({children}: MyComponentProps) => {

{children}

} export default MyComponent ``` ### `s1-m` ```javascript // @flow import React, { memo, Node } from 'react' import PropTypes from 'prop-types' import styles from './MyComponent.scss' type MyComponentProps = { children?: Node } const MyComponent = memo(({children}: MyComponentProps) => {

{children}

}) export default MyComponent ``` ### `s1-l` ```javascript // @flow import React, { lazy, Suspense, Node } from 'react' import PropTypes from 'prop-types' const MyLazyComponent = lazy(() => import('./MyLazyComponent')) type MyComponentProps = { children?: Node } const MyComponent = ({children}: MyComponentProps) => { Načítám...}> {children} } export default MyComponent ```