Scribd
Upload
67 views

React SPA Checklist Docs

The document outlines various development checklists for building a React single page application (SPA), including recommendations for package management with NPM, using Tailwind CSS for UI, folder structure conventions, SEO best practices, codebase conventions, error handling, and performance optimizations. It recommends using React Context or Redux for state management, Fetch API or Axios for data fetching, and react-hook-form for forms. Key performance tips include avoiding Moment.js, ensuring files are minimized after building, enabling cache control, and lazy loading images below the primary content area.

Uploaded by

Indra Susila
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

React SPA Checklist Docs

The document outlines various development checklists for building a React single page application (SPA), including recommendations for package management with NPM, using Tailwind CSS for UI, folder structure conventions, SEO best practices, codebase conventions, error handling, and performance optimizations. It recommends using React Context or Redux for state management, Fetch API or Axios for data fetching, and react-hook-form for forms. Key performance tips include avoiding Moment.js, ensuring files are minimized after building, enabling cache control, and lazy loading images below the primary content area.

Uploaded by

Indra Susila
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like