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