Reacting to React

This week went past fairly quick and smooth and I had the opportunity to delve in a little deeper into the React Ecosystem when configuring the components on our admin system dashboard.

At the start of the week I managed to get the Admin system packaged and bundled with Electron to make it distribution ready for cross platform installation. Since I packaged Electron using Electron builder I had the chance to play around with the package.json file and see firsthand how modifying properties and scripts affected the overall installer. I researched online on ways to minimize the Electron App size and after trying out various configurations I realized that even doing something as simple as moving scripts from “dependencies” to “devdependencies” in the package.json file can lead to an overall smaller package size because the way the installer gets bundled is different for both cases.

Afterwards I went back to the Interface part of React Admin to customize the Dashboard to allow an additional filtering by venue functionality for the overall competition. I did so by first changing the way Data was fetched by following along with our database schema to systematically call the API with minimal requests. I then proceeded to configure the individual card components on the dashboard to display the data as per our need.

Having worked with Vue for the most part I had gotten accustomed to the Vue style of Web development, which made this a great learning experience for me as I could clearly observe the subtle difference between React and Vue as Web development frameworks.

In React all components are rendered as either functional components or class components and the way both of these are programmed is quite different. Both of these can also have inner components that can be added onto the HTML template through the use of JSX, which is basically a Javascript extension that allows you to write HTML elements in React. This felt like a roundabout way of doing things to me personally because in Vue the HTML, Javascript, and CSS parts of a component are nicely separated by default and you do not need to worry about injecting any one of these from the other through an extension. Nevertheless, I could appreciate the usefulness of JSX and see why it is such a powerful tool in React.