ReactJS – Common Project Tasks in my Web App Development

These are tasks/steps I follow in my current development process that is common among my front-end development in ReactJS. I mostly use create-react-app (CRA).

  • Organisational Pages – try to make them “copy/paste” as possible between projects as it is the same organisation
  • Create-React-App – default settings
  • MDB React CSS
  • React-Router-Dom (used MDB)
  • Router setup with Switch/Suspense
  • Lazy Load all components except home and header
  • Google Analytics – npm lib
  • Header (same per project) including import logo as a Component so it gets inlined
  • Header with side menu (same on each project) – consistency for users
  • Header includes Share Page – npm lib
  • Home Page Intro (fluid) with SVG background – performance
  • Intro includes CTA buttons
  • Features – 6 blocks to indicate content and technical features
  • Favicon Generate and Check
  • Social Generate and Check
  • Contact Form implementation – copy/paste as per Netflify instructions
  • ScrollToTop – so that each new “page” goes to the top