React SPA Checklist Docs

Maret 22, 2021

2

Development Checklist

Package/ Module

❏ Using npm as package manager

UI Library

❏ Using Tailwind CSS

❏ As much as possible don't use Jquery and another UI component Library as
same functionality like Antd Design, Material UI, React-strap, etc

Folder Structure Convention

❏ Place reusable component inside /src/components folder with camelcase folder

styled name. the main component file must be renamed as index. Ex:
/src/components/CheckoutCard/index.js
❏ If using redux placed actionCreator, reducer, and actionType inside AppRedux
folder:
3

SEO Checklist

❏ Sitemap file
❏ Robots.txt file
❏ Must have GTM tag or Google analytics tag
❏ Have a <Title>
❏ Must have and Only single <h1 > tag in one page
❏ Responsive meta tag like <meta name="viewport"
content="width=device-width, initial-scale=1">
❏ Meta content description and keywords) like this
❏ Meta robots.
❏ Structured data or data schema
❏ Meta Open graph (facebook)
❏ Meta twitter
❏ Declarative images names like /cover-logique.webp , don't be generic names like
/background2.jpg or /logique-compressed6.svg
❏ Must have alt property in every img tag
❏ Passed at Google Rich Test Result for structured data checking
❏ Passed at Tag Validator for validation HTML tag and inline css
❏ Passed Google Pagespeed insight mobile score 60 , desktop 70
4

Codebase Convention

❏ If you’re using a class component, make sure you’re extending PureComponents

for auto memoization.
❏ Choose either React Context or Redux for management state. Choosing Both is a
nightmare.
❏ If you’re using redux use redux-thunk. Don't redux-saga.
❏ Choose either Fetch API or Axios for the fetching method. Choosing Both is a
nightmare.
❏ Beware when creating reusable components. Don't repeat yourself.
❏ Recommended using React.Fragment or <> empty tag when creating reusable
components.
❏ Use .env for sensitive data protection like API KEY, password, etc

Error handling Convention

❏ Should catch error every data fetching event

❏ Use timeout property, when you’re using axios
❏ Never show generic error messages to User on production mode, even inside the
console.
❏ Make sure every error, warning in the console very clear on production mode

Performance

❏ Don't use Momentjs for date libraries, it makes the bundle size bigger. Use dayjs.
❏ Make sure css, Js, and HTML file minimized after build
❏ Make sure purgeCss works perfectly
5

❏ Preload primary image for increased LCP Score (beware about image
preloading. Make sure we’re not preload unnecessary images )
❏ Use Cache Control for the right way for static and dynamic pages. Use long for
static and no-cache or Stale-while-revalidate for dynamic pages.
❏ Lazy-load image for below content. Dont lazy on the primary view Area. see this.
❏ Use React Lazy or suspends for lazy load. don't use react-lazy, suspend,
loadable-component, etc.
❏ Recommended using react-hook-form for form validation.