The more I work with React, the cooler it seems. I know- I’m way behind. React is already uncool, Vue is the new hotness.
It’s at that point that I run the “create-react-app my-app” command and really get down to business.
I started a project with React almost a year and a half ago, but just couldn’t wrap my head around the router. It’s not that React Router (v4) wasn’t well built (though I might have thrown some insults at it in a frustration-fueled rage), but I’d been using Angular at work, and the router philosophies are pretty different between those two.
I started a new project with React (integrating some Phillips Hue lights into a ui) a couple weeks ago, and decided to give it all another shot. The first few hours of figuring out the routing was still a struggle, but then it kind of clicked. The <Router> declaration in React is a bit like the router-outlet in Angular, with the declaration of the route all in one. I don’t think I’d really grasped that originally, and it led to a mess of an application.
But the router isn’t the point of this short post. This one is about integrating Material-UI with React and how cool composable components are when you start to understand how to really use them (note that I said “start to understand”- I have a long way to go).
So, I’d already created some simple components to get everything working. I’d also cooked up a simple Node server to serve as a fake API. I hadn’t bought the smart lights yet- but wanted to test, so I just copied the JSON structure from the documentation, pasted it into a file on my computer, and set up a server on localhost to respond to the same endpoints the actual API would and serve up the JSON. It works surprisingly well!
One of those components displays all the lights available (2 currently). That LightPanel component is made up of LightSwitch components- one for each light. The focus early on was to get them working. Once I reached that point, the time had come to actually make them look presentable.
Too often this is where I end up burning a lot of time. I have a habit of trying to create nice looking css on my own- but this time I learned my lesson. I’d let the experts help out, and use the Material UI library. It integrated pretty easily, As a test, I switched my LightSwitch jsx from simple custom radio buttons to the Toggle component and it instantly looked better. Success!
But the really cool part was when I decided to use the Card element for my main LightPanel grid. Again- this will show all the switches, their status, and allow a user to turn them on or off. Each light gets its own Card in the grid. The functionality to get this info and do these actions was already there, I just had to integrate it into the Card element. I thought the best way would be to just embed my LightSwitch component into the Card’s ‘text’ section. This worked, but didn’t look quite right. I realized that it would really go best in the Card’s ‘title’ section.
But the title section is meant to be passed info as attributes- not have text inside tags. Instead of <CardTitle>My text here</CardTitle>, it should be <CardTitle title=”My text here” />. I wanted to basically embed a custom React component into the “title” attribute.
Thinking “there’s no way this will work”, that’s exactly what I did:
I saved and waited for my command line output to give me a wall of red text, but none appeared. Fingers crossed, I opened my browser, and there it was, in all its glory. The card with my custom switch component embedded as the title attribute- toggle functionality and all!