You are currently browsing the React archives.

React PropTypes and ES6 Destructuring

Monday, April 24th, 2017

At times one may be justified in the argument that cognitive (over)load is just an expected part of the overall developer experience. Fortunately, there are numerous steps we can take to minimize the general noise which tends to distract our intended focus. One particularly simple – yet effective – example is to remove unnecessary redundancy wherever possible. In doing so, we afford both our peers and ourselves a codebase which, over time, becomes considerably easier to maintain.

For instance, when performing code reviews, more often than not I tend to see considerable redundancy when specifying React PropTypes. Typically, something along the lines of:

As can be seen, with each new prop we are redundantly referencing React PropType lookup paths. And, while the ideal components will have a limited number of props (either connected directly, or passed down), the redundancy still remains for any component which references the same prop type. Considering the number of components a given application may contain, we can rightfully assume that the above redundancy will grow proportionally.

With the above in mind, we can easily reduce the redundancy (as well as micro-optimize the lookup paths) be simply destructuring the props of interest as follows:

While I would consider the above to be simplified enough; one could also take this a step further and destructure the isRequired props, which, in some circumstances, may be useful as well:

Admittedly, this example is rather straight-forward; however, it does help to emphasize the point that only through consistent vigilance can we ensure our source will continue to evolve organically while remaining as simple as possible.

React-Bootstrap ES6 Imports

Friday, August 12th, 2016

When leveraging React Bootstrap, one important consideration missing from the documentation (or perhaps, simply not emphasized enough) relates to module access when using ES6 imports.

Specifically, in the context of React Bootstrap’s “convenience components” <Component.SubComponent> (e.g. <Modal.Body>), such imports must be made explicit as they can not be resolved against their parent components during transformations of ES6 imports to CommonJS modules.

For instance, one can not reference sub-components as follows:

During transpilation, the above reference will result in Babel (specifically, the babel-plugin-transform-es2015-modules-commonjs module) causing an upstream exception:

Property object of JSXMemberExpression expected node to be of a type [“JSXMemberExpression”,”JSXIdentifier”] but instead got “MemberExpression

Fortunately, the solution to the issue is rather straight-forward; simply import the sub-component explicitly via react-bootstrap/lib , for example:

With the above example, the previous conversion errors will be resolved, and all will be well again.

Overall, I actually prefer the explicit imports (though it would be more convenient if they were exported via ‘react-bootstrap’).

And so, for the time being, a minor nuance worth noting should you find yourself trying to diagnose this issue at some point.

Quick Tip: HTML to JSX Conversion

Tuesday, July 19th, 2016

Like many developers, at times I find the need to convert raw HTML to JSX. It was only after I found myself needing to do this a bit more frequently that I considered writing a quick tool to automate the task. However, like most things, I knew there must be something out there which handles this already, and as I suspected, there certainly is: HTMLtoJSX – a component of React-Magic which does precisely this.

So, if ever you need to quickly convert raw HTML to JSX, be sure to check out the online converter and, for more frequent needs, the converter is also available via NPM and can easily be integrated into part of an existing build pipeline.

Back from the Peripheral

Tuesday, October 20th, 2015

Hello again…

Indeed, a greeting may be appropriate here as it has been quite some time since I have actively blogged which, for all intents and purposes, has been for good reason.

After a decade of continuous blogging with a minimum of at least one (hopefully) informative article per month, I had made a conscious decision to take a step back, re-evaluate, and, on the peripheral, dedicate my otherwise allocated writing time towards focusing on the many aspects of future Web Development.

With that in mind, my time spent has been put to good use, and so, I’ve decided to begin sharing my experiences here more frequently once again; both trivial and non-trivial alike.

The fact is, I miss writing, and outside of day to day writing of general API docs and the occasional technical spec, I haven’t had a dedicated space to share my more subjective, creative thoughts about modern Web Development. Enough about me, though, I’ll get to the point…

Before I delve into the specific topics I plan to discuss, I think it makes sense to first outline an underlying theme which will permeate throughout my future articles. Specifically, I plan to to focus on topics and technologies which I believe will, to a certain extent, transcend the more immediate trends within the Web Development landscape that tend to come and go with the times. I strongly believe it is essential for our community to continue on a path of sustainable growth, and the path of least resistance will more than likely be in our ability to move from library to library, framework to framework, easily and with minimal transition. This is imperative as the rate at which technologies are changing has grown exponentially in the past few years, perhaps no where more so than in the Web Development space. As such, the ability to identify and focus on core underlying concepts, principles and technologies which will remain relevant for some time to come becomes ever more important.

The simple fact is, we need to pay particular attention to what we dedicate our time to learning, and ensure our learning is focused on key aspects that can carry over as each new technology increases in adoption, and then makes way for the next in line.

With that in mind, I plan to focus this space on my findings and most recent experiences with current Web Development technologies of interest, particularly, but not limited to, the recent work of the TC39 Committee, all things ES2015 / ES2016, React / Redux, Webpack, Web Components, Polymer, Angular 2, and the many other complimentary tools and technologies surrounding modern workflows.

So stay tuned, as always, there’s a lot to talk about! Good things to come …