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

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

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

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

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

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