Intro

Another wave of evolution in client-side application development is approaching. It involves ES6, the new version of JavaScript, universal applications, functional programming, server-side rendering and a webpack, which is like a task-runner with a jetpack.

Also, React is super hot right now. It is a concise and excellent framework to build performant components. Since we already have all that, how do you find the missing piece — the engineer who will embrace it and build state-of-the-art software for you?

React revolutionized the way we think about apps

React Plainly

First things first. In the context of React being marketed as only a views library, and as client-side applications consist of more than just views, React won’t be the only tool that your candidate will use. Still, it is a crucial one. Here are a few screening questions.

Q: What are higher-order components in React?

Broadly speaking, a higher-order component is a wrapper. It is a function which takes a component as its argument and returns a new one. It can be used to extend or modify the behaviour (including the rendered output) of the contained component. Such use of components that change behavior without modifying the underlying class in React is well characterized by the decorator pattern.

The higher-order components are a way to build components using composition. An example use case would be to abstract out pieces of code, which are common to multiple components:

Player.js

import React, {Component, PropTypes} from 'react' ; export default class Player extends Component { static propTypes = { black: PropTypes.bool, data: PropTypes.object, styles: PropTypes.object }; static defaultProps = { black: false , data: { src: null , caption: '' }, styles: {} }; render() { const { black, data, styles } = this .props.data; return ( < div className = { ' module-wrapper ' + ( styles ? ' ' + styles : '') + ( black ? ' module-black ' : '')}> < section className = "player-wrapper video-player-wrapper" > < video className = "player" src = {data.src} /> < p className = "player-caption" > {data.caption} </ p > </ section > </ div > ); } }

Consider this component, which holds a Player but also contains module markup. That markup could be reused for other components. Let’s abstract it, and also allow for passthrough of properties:

Player.js

import React, {Component, PropTypes} from 'react' ; import ModuleContainer from './ModuleContainer' ; export class PlayerInline extends Component { static propTypes = { data: PropTypes.object }; static defaultProps = { data: { src: null , caption: '' } }; render() { const { src, caption } = this .props.data; return ( < section className = "player-wrapper video-player-wrapper" > < video className = "player" src = {src} /> < p className = "player-caption" > {caption} </ p > </ section > ); } } const Player = new ModuleContainer(Player); export default Player;

ModuleContainer.js

import React, {Component, PropTypes} from 'react' ; export default function ModuleContainer (Module) { return class extends Component { static propTypes = { black: PropTypes.bool, styles: PropTypes.object }; render() { const { black, styles } = this .props return ( < div className = { ' module-wrapper ' + ( styles ? ' ' + styles : '') + ( black ? ' module-black ' : '') }> < Module { ...this.props } /> </ div > ); } }; }

Now we can still use the previous way of instantiating Player , no changes here. We can also use the inline player if we prefer. Then the module wrapper markup and props can be used with other modules:

<Player data={playerData} styles={moduleStyles} /> < PlayerInline data = {playerData} />

Higher order components are the immediate answer to the design decision of moving away from mix-ins in React for ES6, which was done in early 2015. In fact, higher-order components make for a clearer structure, and they are easier to maintain because they are hierarchical, whereas mix-ins have a bigger chance of conflicting due to a flat structure.

To learn more, check out another example use case of higher order components, with a focus on messaging props. Also check the introduction to the preference of higher-order components over mixins, outlined by Dan Abramov, the author of Redux, and an interesting example of advanced composition using refs by Ben Nadel.

Q: Which components should rely on state , and why?

Having separation of concerns in mind, it seems wise to decouple the presentation from the logic. In the React world, everything is a component. But the components used to present data should not have to obtain that data from an API. The convention is to have presentational (dumb) components stateless, and container components that rely on the state.

That said, the convention is not strict. There is also more than one type of state in React. Despite varying opinions, utilising local state in presentational and especially interactive components does not seem to be a bad practice.

Another distinction is between component classes and stateless function components. Obviously, the latter does not have a state. Speaking of the stateless function components, it is an official recommendation to use them when possible.

Q: What is JSX? How does it work, and why would you use it?

JSX is syntactic sugar for React JavaScript, which makes it easy to write components because it has XML-like syntax. However, JSX is JavaScript and not HTML, and React transforms the JSX syntax to pure JavaScript.

It looks awkward at first sight, although many developers are used to it by now. The main reason to use it is simplicity. Defining even mildly complex structures which will eventually be rendered into HTML can be daunting and repetitive:

React.createElement('ul', { className: 'my-list' }, React.createElement('li', { className: 'list-element' }, React.createElement('a', { className: 'list-anchor', href: 'http://google.com' }, 'Toptal.com'), React.createElement('span', { className: 'list-text' }, ' Welcome to the network') ), React.createElement('li', { className: 'list-element' }, React.createElement('div', { className: 'list-item-content' }, React.createElement(SomeCustomElement, {data: elementData}) ) ) );

Versus:

< ul className = "my-list" > < li className = "list-element" > < a className = "list-anchor" href = "http://toptal.com" > Toptal.com </ a > < span className = "link-text" > Welcome to the network </ span > </ li > < li className = "list-element" > < div className = "list-item-content" > < SomeCustomElement data = {elementData} /> </ div > </ li > </ ul >

Consider more complex elements navigation components, with multiple nestings. Conciseness is one reason most frameworks have some template engine, and React has JSX.

To learn more, check influential discussion on JSX in the context of container components.

The New Approach to Front-End Development

ES6 (ECMA Script 2015), the new version of JavaScript, was released some time ago. The majority of React materials in the open-source community utilise ES6, and sometimes even ES7. The new version adds in expressiveness to JavaScript and also fixes a few problems of the language. The current standard procedure is to use Babel, which compiles ES6 to ES5. It allows us to write code in ES6, and let it execute correctly on the majority of current browsers as ES5. Therefore, it is crucial that the developer you will hire is proficient with ES6.

Q: What are the new features for functions in ES6?

There are a few, actually. The most prominent is the arrow function expression, which is a concise way of writing anonymous function expressions:

var counterArrow = counter => counter++;

There is a significant difference. With arrow functions, the this object captures the value of the enclosing scope. So there is no more need to write var that = this .

Another difference is in the way arguments can be defined or passed in. ES6 brings default parameters and rest parameters. Default parameters are a very useful way to set the default value of a parameter when it is not provided in the call. The rest parameters, which have a similar syntax to the spread operator, allow processing an indefinite number of arguments passed to a function in an elegant manner.

var businessLogic = (product, price = 1 , ...rest) => { product.price = price; product.details = rest.map(detail => detail); };

Q: What are classes in ES6 and React?

ES6 classes provide means to create objects, and actually still rely on prototypal inheritance. They are mostly syntactical sugar, but very handy. However, they are not required for React classes.

React classes are components. They can be defined in one of three ways: using the React.createClass() method, using an ES6 class, or using a function to create stateless function components:

const Counter1 = React.createClass({ propTypes: { count: PropTypes.number } defaultProps: { count: 0 } render: function () { return < span > Count: {this.props.count} </ span > ; } });

class Counter2 extends Component { static propTypes = { count: PropTypes.number } static defaultProps = { count: 0 } render() { return < span > Count: {this.props.count} </ span > ; } }

function Counter3 (props) { return < span > Count: {props.count} </ span > ; } Counter3.propTypes = { count: PropTypes.number }; Counter3.defaultProps = { count: 0 };

As we previously stated, stateless function components are recommended to use when possible. However, those components are not yet optimised for performance. Consider following GitHub issues in Redux and React to learn more.

Q: What are local, or inline styles, the new trend for styles in web development?

This one is pretty rad. Until now, the declarative CSS always shared a global scope. To add styles to a reusable component, the developer had to choose a namespace carefully. Another thing, sometimes it is hard to work with CSS, because some style had to be computed, and so that single style became an exception. Of course, there is calc() , but it is not always sufficient.

Local styles, sometimes also called referred to as inline styles, solve both these problems. Now it is possible to bind a stylesheet to a component know that they remain local in relation to their scope. The styles will not affect elements out of their scope. If that was not enough, the styles become readily available in JavaScript.

AlertWidget.scss

.alertWidget { font-variant: italics; border: 1px solid red; padding: 13px; } .alert { font-weight: 700; color: red; }

AlertWidget.js