Consistent design across teams with React, Styled Component, Storybook, & Prettier

It is not the language that makes programs appear simple. It is the programmer that make the language appear simple! -Robert C. Martin, Clean Code: A Handbook of Agile Software Craftsmanship

Step 1. Setting Up React

npx create-react-app test-application

Step 2. Setting Up Styled Components

Screenshot from Official Website Explaining why to use Styled Components so that I don’t have to
npm install styled-components
npm install @types/styled-components --save-dev
* GlobalStyle.ts: Font Raleway has been src into index.html
import { createGlobalStyle } from 'styled-components'export default createGlobalStyle`body {padding: 0;margin: 0;overflow-x:hidden!important;font-family: Raleway, sans-serif;}
* index.tsx: Here we use Theme Provider that under the hood uses the * context to provide theme object throughout the react app.
import React from 'react'import ReactDOM from 'react-dom'import { ThemeProvider } from 'styled-components'import App from './App'import * as serviceWorker from './serviceWorker'import GlobalStyle from './GlobalStyle'
const theme = {primary: 'black',secondary: 'white',secondaryDark: '#0077c2',acmBlue: '#0077c2'}ReactDOM.render(<ThemeProvider theme={theme}><GlobalStyle /><React.StrictMode> <App /> </React.StrictMode></ThemeProvider>,document.getElementById('root'))serviceWorker.unregister()
* Heading.tsx: The file takes a varient as parameter and then renders the heading tag with appropriate size.
import styled from 'styled-components'interface PROPTYPES {varients: numbertheme: any}const getFontSizeBasedOnVarient = (varients: number) => {switch (varients) {case 1: return '5rem'case 2: return '4rem'case 3: return '3rem'case 4: return '2rem'default: return '1rem'}}const Heading = styled.h1<{ varients: number }>`color: ${(props: PROPTYPES) => props.theme.primary};font-size: ${(props: PROPTYPES) => getFontSizeBasedOnVarient(props.varients, props.mediaQueryType)};font-family: 'Raleway', sans-serif;font-weight: 900;`export default Heading
import React from 'react'import Heading from './components/Typography/Heading'function App() {
return (<Heading varients={1}>This is heading, One</Heading>)
export default App

Step 3: Setting up storybook

* src/stories/Typography.tsx
import React from 'react'import Heading from '../components/Typography/Heading'export default { title: 'Typography',component: Heading}export const Heading1 = () => <Heading varients={1}>This is heading 1 with 5 rem</Heading>export const Heading2 = () => <Heading varients={2}>This is heading 2 with 4 rem</Heading>export const Heading3 = () => <Heading varients={3}>This is heading 3 with 3 rem</Heading>export const Heading4 = () => <Heading varients={4}>This is heading 3 with 2 rem</Heading>export const DeafultTag = () => <Heading varients={5}>This is the default </Heading>

Step 4. Setting up Prettier

{"arrowParens": "always","semi": false,"tabWidth": 2,"singleQuote": true,"printWidth": 120,"endOfLine": "crlf"}
{"extends": ["react-app", "prettier", "prettier/react"],"parserOptions": { "ecmaVersion": 2018 },"env": { "commonjs": true, "es6": true, "node": true },"plugins": ["jsx-a11y", "prettier"],"rules": {"linebreak-style": "off","no-plusplus": [2,{ "allowForLoopAfterthoughts": true }],"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"]]}}
You deserve a pat on the back if you made it till here ❤ ❤

A note from JavaScript In Plain English



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Sometimes it is the people no one can imagine anything of, do the things no one can imagine.