December 17, 2018
Shameless Love Fest
This post is meant to be a shameless love fest about React. I will outline a set of features, patterns, approaches, mindsets that have come from the React ecosystem that I think are really great. Some of them are great from a technical perspective, some are just cool. My hope is to simply shine some light on why I (and others) really like React.
On the front page. This sentence continually blows my mind every second that I work with React. Here it is. Bam!
Hyper Text Markup Language (HTML) tells the browser how to render the view. HTML is a markup language, not a programming language and it should never be treated or thought of as such. Competing application frameworks like to treat HTML as a first class citizen, designing their templating engines around it. But HTML isn’t built to be a programming language. React uses HTML for its truest purpose, to tell the browser how to render a view.
It's Functional Bro
Functional programming is easier to test, scale, and refactor. Stateless functions can be separated out into portable libraries, tested and reused across applications. This allows applications to scale as engineers can reuse logic and components simply by moving functions around. Functions are clear; it’s easy to see connections and refactor those connections.
React’s setState is functional. setState can take a function that accepts state and returns a newState. In other frameworks, this is a common way of accessing state and mutating state; Vue works this way for instance. This kind of state management often leads to functions with side-effects; everything accesses the same this. Refactoring is possible in those codebases, but bind, call and apply usage becomes prevalent, making code harder to follow.
React’s components are functional. Elements in React are immutable; once created, children and attributes cannot be changed. This ensures that the UI will not change without explicitly being told to by React. A typical DOM element can be accessed by any number of scripts which can create conflicting side-effects and make code harder to refactor. React constrains access to elements, making connections clearer and easier to refactor.
React starts simpler. React’s most basic component is functional. A React application that simply displays data can be written with functional components only. Class components are available for local state management and lifecycle hooks, but at every component in the application tree, the functional component fallback is there. This leads to simpler, more readable codebases with less boilerplate.
Component properties can be functions, even the children property.