reactjs

Create React App – Google Workbox Override without ejecting

https://karannagupta.com/using-custom-workbox-service-workers-with-create-react-app/ This article began my journey of overriding CRA’s workbox configuration without ejecting. https://developers.google.com/web/tools/workbox/guides/advanced-recipes https://developers.google.com/web/tools/workbox/modules/workbox-google-analytics Nice overview of caching strategies https://web.dev/reliable/runtime-caching-with-workbox Used this to Setup the different Routes https://developers.google.com/web/tools/workbox/guides/common-recipes

Create React App – PWA Caching Challenge

In developing my latest Progressive Web App, I came across the following problem. Note I was using Create-React-App at at the time, it did not allow for modifying the workbox it used to generate its Service Worker. I found this article https://karannagupta.com/using-custom-workbox-service-workers-with-create-react-app/ which provides a way to create a custom SW without ejecting from CRA.  Challenge The … Read more

My ReactJS tools and development setup

Started working with ReactJS from late 2018 and these are some of tools, libraries I use. Create-React-App easy to get going and allows one to focus on the code https://create-react-app.dev/ – Docs CSS Framework Choosing a framework can be time consuming, but I chose MDB because for a little money you support and I don’t like wasting … Read more

Importing SVGs as Components in ReactJS

If you attempt to import a SVG as a Component in ReactJS, ensure that your SVG has viewBox values. Design tools would automatically include them. Lesson Learned!  I was trying to make a SVG responsive but no matter what I tried it did not work. I was optmizing the SVGs before using them in ReactJS, if … Read more

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 … Read more