Just another React Template 🤷‍♂️

Hey Dev People 👩‍💻👨‍💻,

It's been a while since I wrote something. There have been lots of things going on like, It's been a roller coaster I should say yet I'm not even halfway through it. So thought I might post something that if / may some of you might find it useful of any sort.

react-template

Maybe just yet an another react template. Where I'm adding features that I feel are interesting and easy to develop. where I found this plugin called craco which can extend the create-react-app's config without ejecting the app 😱. That's another level 😎.

Have configured different scripts that are mostly used by the devs around the world. Some other features which I found interesting were something like,

• storybook
• nodemon
• PM2
• react-router replacing with reach-router
• Lighthouse 🚨 CLI
• Gitlab Pipeline

I'm planning to add more features which involve like,

• webhint reports in pipeline
• Dockerfile to host using pm2 / Nginx
• Extend service worker ... more to come

Let me know if there's something you want me to add or you find it interesting. I will jump into it and if we're on the same page will simply put on the list and later will be merged into the base.

The folder structure itself is what I found interesting is that after working through several projects found it compulsive that data-service-view layers are doing a great job and looks like components are becoming the future of the web. So it's better to have a standard folder structure like

src/
    |--components/
        |-- ComponentName/
            |-- index.js ( adding mappers and context )
            |-- Component.js ( your component's code )
            |-- componentname.(css|scss) ( Your component's styling )
    | --screens/
        |--ScreenName/
            |--index.js ( mapper and context )
            |--Screen.js ( your screen's code )
            |--components/ ( screen specific code )
                |-- ComponentA.js
                |-- ComponentB.js
            |--screenname.(css|scss) ( Screen's styling / overrides )

Let me know if there's something more to it, so I would simply merge into the base and use it for future iterations.

Buenos Dias, Amigos!
Feel free to dm/Whatsapp/mail me in case of any suggestion you would want me to add.
🤙 + 91 - 8939717211 | @droidmakk |