My First React App
On My Recent Hiatus
I know no one is keeping tabs on this site, but I figured this might be the best time to make a note that I’ve not written for this site in a month. That’s a bit of a break but it’s not like I wasn’t making stuff. I’ve been hard at work on a new site that I’ve wanted to make for some time. I know this will probably get the same amount of online cred as this site, so to sum up I’m excited.
Seriously, it’s still a wonderful feeling to see my projects alive on the internet. In summary, I finally dipped my toes into the world of React!
What I built
I’m really going to expand more on this in the following post, but this post is going to go over the technical aspects of the new website
React
I’ve talked a bit about my prior experience as a webdeveloper; I’ve made apps using Angular on the MEAN stack and .NET C# with jQuery with a huge backend. I’ve never made a React App before this, but luckily Angular is pretty similar. React is less opinionated, which is one of the major touchpoints from their marketing material. Either way, I managed to find some good material on Pluralsight which pointed me to a few supplementary libraries, like Redux.
After I started building, I fell into some part of the React community which said that all the parts I added were bad. I was at home!
React is pretty great - I really appreciate how simple the core concepts are. I also appreciate how it’s both got enough power to give you what you need but it also doesn’t get in your way. Maybe React isn’t great for first-time web developers if you’re worried you can go off the rails and end up with a mess, because really it gives you enough to dig yourself a hole you can’t get out of. I really liked React compared to Angular, because Angular seems to get in the way and tell you how to build an app. React lets you do what you want, even if you want something dumb!
Redux
Redux is a state management library that’s platform agnostic. It works well with React and has several supplementary libraries to handle the tedium of connecting and distributing reducers to various components.
I started off with Redux and I found it helpful for wrangling a large state that has to go to several sub-components. The little I had heard from React was “callback hell” which reminded me of the old days… I thought we had moved past those times. Either way, Redux seemed like a good idea, and in general I’d say it works with complex apps. By complex, I don’t necessarily mean big, my app is pretty small, but it’s interconnected and everything really has to talk to everything else. If I didn’t use Redux, I’d be doing a lot of that work myself.
I’ve heard grumblings in the React community that boil down to “it’s bad,” and “it’s overkill.” In general, I think I’d agree; this kind of state management is probably too much for what it’s worth.
Bootstrap
With my personal site (this site) using Material, and me getting so bent out of shape with how lazy Google’s been with updating it, I decided to go mainstream with this app, and push for Boostrap 5! It’s good ‘ol bootstrap, all the nuts and bolts included.
From when I had to use it for professional development to now Bootstrap hasn’t changed much; use “row,” “col,” and “justify-content-center” for stuff. You’re good to go. For a lot of the snazzier stuff, like dropdowns, React doesn’t play nice with Bootstrap. This is annoying but not a deal-breaker, as I’ve found some workarounds.
I found a few libraries that tried to fit the gap: “reactstrap” and “React-bootstrap”. Both are worse than Material and seemed like a waste of time. For all the promises that you get from these supplementary libraries, I found the added bulk really wasn’t worth it. My biggest need was a collapsible module, but I ended up building my own which was several KB lighter, and it wasn’t even that difficult with help from the almighty StackOverflow.
My big takeaway was that I could use the parts of Bootstrap that I wanted (at least Bootstrap 5) and it wasn’t too bad. I still have a nagging voice in the back of my head whenever I rebuild something that was supposed to be in the library but doesn’t work correctly because of a disagreement on how a virtual DOM should work. I’ve quelled the voice for now and simply concluded that Bootstrap doesn’t quite cut it for a full React App and you’ll simply need to fill the gaps.
I think my next project will eschew a CSS framework; then I’ll probably write another article after I’ve tried out Bulma.
Firebase
Once again, I’ve used Firebase. There’s not another provider that hits all the needs I’m looking for: Azure doesn’t have a free tier, AWS wants to charge you after one year, everyone hates Heroku (because their costs are ridiculous). So I’ll keep using Firebase until I find out why I’m horribly mistaken. Maybe I’ll work an AWS Lambda stack for another project.
Future Projects
I think React is my new favorite web tool for general application development. I know I’m late to the party but cut me some slack: I’ve been stuck in the Angular world for a few years. My next semi-large project will probably be a replacement for a tool I’ve used in the past - I don’t want to give it away because that gives me an easy out if I crash and burn! I’m hoping this can be a web app and a mobile app, which is something new for me. I’d like to get the trifecta, but I’m not a fan of Electron for desktop apps, so I need to find something that doesn’t make me so sad.