Ah, here we are again. Way back in October 2019 I wrote up some thoughts on front end frameworks, back when they were the hawt thing. I started taking a look at Vue.JS and, thanks to my time tinkering with Gatsby, React. I liked what I saw but never really had a chance to take it further than “this is a nice thing that I play around with in my spare time” and have, for the last year at Laser Red, dove further into WordPress, leaving these front end frameworks in my rear view mirror.
Well, what goes around and all that and I’m getting back into the idea of front and back end development separation. It’s still very much hobby coding at present but I’m starting to delve more and more into it – last week I discussed a starter I’d put together in Node.JS to build a simple API and this week I’ve started tentative steps working towards the front end of that with React.
It’s certainly something I’m really looking forward to spending some more time with and I’ve already looked at a couple of tutorials online for ingesting from APIs, passing data back and forth between components, but one of the things I really wanted to do was get myself set up with a good starter project I can take forward to kick off my own projects going forward.
Over the last few months at work we’ve started using Tailwind as our go to CSS framework – it’s an excellent set of utility classes that hooks into Webpack and it’s so intuitive it’s led me to completely abandon the bloatiness of Bootstrap. One of the key reasons for this is the fantastic way that Tailwind prunes any unused styles on build, leaving you with a streamlined and super quick to load stylesheet. To me this felt like the perfect thing to pair with React to start creating some nice quick web apps.
Fortunately Tailwind have a great step-by-step guide on how to get Tailwind working in tandem with the create-react-app environment, but I didn’t really want to have to go through all that every time I wanted to spin up a new app. So, I built my own starter which not only incorporated Tailwind into the process but also built in node-sass to allow me to code scss stylesheets, as well as moving the default c-r-a set up into a more logical structure that separates components from styles.
You can grab it from GitHub here and it’s what I’m planning to start using to build some tasty React stuff going forwards. Watch this space and shout up in the comments if you find this useful!