July 31, 2016

In Defense of JSX

JSX is the much maligned JavaScript syntax extension that tells React how to build the UI. It gets translated into JavaScript which then builds out the virtual DOM. Later the virtual DOM is translated into the real DOM, and you’ve got a UI. For some reason many people don’t like JSX. Their criticism usually goes along the lines of: JSX is ugly and you shouldn’t mix the view and controller. You should have separation of concerns (aka MVC) for better reuse. Read more

June 22, 2016

How to Convert a React Mixin to a Component

In a previous post I covered an example of a React mixin which I called ClickAway that detected clicks anywhere outside of a component. I also mentioned mixins are not React’s preferred method of reuse. Composition with components is the way to go, and mixins are on the way out. With this in mind, I decided to convert the ClickAway mixin into a component. I was skeptical about how clean the new implementation would be, but it turned out well. Read more

June 16, 2016

React By Example: Mixins

Components are React’s preferred reuse mechanism, but it’s not the only one. Sometimes different components share the same functions. It may be awkward to wrap these cross-cutting concerns in a higher order component, or the common code may need access to a component’s state. In these scenarios, React mixins are useful. Before I continue, I should note mixins seem to be on the way out. The React team is focused on making components more powerful versus continuing to build on the mixin concept. Read more

May 24, 2016

React by Example: Stateless Functional Components

In v0.14 the React team introduced stateless functional components. They are implemented by functions that take a props argument and return JSX. They’re simpler and offer performance benefits. The drawbacks are the lack of state and the inability to interact directly with the DOM. Icon Component In a typical app, most React components will be presentational only and should be stateless functional components. A good example is an Icon component I created to encapsulate Font Awesome icons. Read more

May 16, 2016

React: First Impressions

I’m a React newbie who just completed my first React web app, a rewrite of an internal tool at work. Previously the UI was written in ASP.NET plus lots of JQuery on the client side. It worked well but was starting to show its age. Actually this wasn’t my first attempt at React. I started porting a web app written in Knockout to React last October. It was a side project and a good place to start. Read more

February 9, 2016

Convert Truthy/Falsy to True/False with !!

I’ve been primarily coding in Javascript for a couple months now, and the language’s quirks have become familiar, almost normal, to me. IIFEs, truthy/falsy, ===, and other weird language features make sense now. When I came across !! in a Javascript library, I thought I’d missed some obscure syntax. Searching online provided no clues as to what it did. I read through the list of Javascript expressions and operators and only found the familiar ! Read more

© Joe Buschmann 2020