• Trusted by:

Hire React.js developers and engineers

Pavel Vlasov, Russia

Member since January 16, 2015
Pavel is a hardworking and analytical specialist who possesses strong problem-solving skills and a drive to learn new things. He is constantly looking to improve himself while growing in the computer science and technology fields. He prides himself on being polite, welcoming, and professional at all times. Click to continue

Leonardo Andrés Garcia Crespo, United Kingdom

Member since January 1, 2014
Leonardo is a lifelong fan of technology and is always trying to learn something new while keeping up to date with his favorite technologies. He has a very proactive personality, and he's always building something. Click to continue

Rogério Araújo, Brazil

Member since October 18, 2012
Rogério is a full-stack developer with 15 years of experience with software development and architecture. He has worked on several projects for customers in Brazil and globally. The range of projects include mobile, applications, desktop, and enterprise search applications. Click to continue

Rafael Chiti, United Kingdom

Member since May 8, 2014
Rafael is passionate about change and trying new things, both professionally and in general with his life. He is a skilled web developer with over 8 years of experience. He loves startups and is extremely proactive. Click to continue

Wout Mertens, Poland

Member since December 16, 2014
Wout has over two decades of experience developing for and administering Unix platforms such as Linux, Solaris, and OS X. He excels at programming back-end and front-end services in a variety of languages, and holds a Master's degree in Computer Architecture. Click to continue

Sebastian Illing, Germany

Member since March 18, 2016
Sebastian is a talented and passionate full-stack developer with a focus on back-end and API development. He has years of experience working with different programming languages and web-frameworks. Coming from a start-up environment, he strives to be result-oriented and quality-driven. Click to continue

Tomas Holas, Czech Republic

Member since January 13, 2015
Tomas started as a Ruby on Rails enthusiast, but in 2010 he turned to JavaScript and never looked back. JavaScript has a really productive ecosystem, which is easy to hack on, and offers libraries for everything imaginable. Currently, he prefers to work with Angular, React, and NodeJS. Why hire Tomas? He strictly adheres to the KISS approach, prioritizing productivity over programmatic parlor tricks where a library is sufficient. Click to continue

Antonios Minas, Greece

Member since December 5, 2014
Antonios is a senior software engineer specializing in front-end, WordPress, PHP, and JavaScript frameworks with more than six years of professional experience spanning from the IT sector to digital advertising. He is passionate about applying top-end solutions and software engineering patterns in order to solve complex problems. Click to continue

Alejandro Hernandez, Argentina

Member since August 30, 2012
Alejandro got his Bachelor's in software engineering eleven years ago, and since then has been working for software companies of all sizes from all around the globe as a freelancer. Currently, he enjoys working as the technical lead on JavaScript projects, where his deep understanding of architecture and theory is most impactful. Click to continue

Andreas Dewes, Germany

Member since October 16, 2015
Andreas is a trained physicist with a PhD in experimental quantum computing and a degree in quantitative economics. As an entrepreneur, he has a passion for data analysis and software development and loves to tackle hard business problems with data. He has received numerous awards for his work on data analysis and his work on data privacy and big data has been featured in the national and international press. Click to continue
React.js Resources
Trustpilot
Toptal on TV
"Toptal is killing it, it kind of owns this market."
Andrew Ross Sorkin Reviews Toptal
Cnbc 02e66b
"Tech companies simply cannot find the quality employees they want to hire. The solution: Toptal."
Liz Claman´s Review of Toptal
Fox 7ef901
Toptal in the press
“Despite accelerating demand for coders, Toptal prides itself on almost Ivy League-level vetting.”
Selina Wang
“Toptal allows corporations to quickly assemble teams that have the right skills for specific projects.”
Steven Norton
A hiring guide
The Vital Guide to React.js Interviewing

React is a library developed by Facebook that has revolutionized the way we think about apps. Borrowing ideas from declarative, reactive, and functional programming, it makes developing highly interactive UIs a breeze. As such, it is something that every front-end developer should have in their tool belt. Finding the right engineer for all your React needs can be challenging. This hiring guide provides a set of insightful questions to help you identify amazing React developers who are experts in their field.

Testimonials
“In Higgle's early days, we needed best-in-class developers, at affordable rates, in a timely fashion. Toptal delivered! Higgle enjoyed working with Toptal and we appreciate their professionalism.”
Lara Aldag
CEO @ Higgle
“Robert was such a breath of fresh air! I’m used to working with developers who don’t speak good English, don’t understand my needs, and are bad communicators in general. But Robert was not only an EXCELLENT communicator, he knew exactly what I was looking for and made it better than I thought possible. Now I have a website that works better than I thought it could for less than the cost it would have taken other developers, and in half the time. Robert is as good as they come, and a true professional. Anyone thinking of working with him, stop thinking about it and hire him. You won’t regret it.”
Matthew Bennett
CEO @ Winning Social
“Finding a good developer who specialised in the technologies we use seemed like an impossible task... until we used Toptal. We had several trial periods and have just accepted our first developer to join the team! The whole process went seamlessly and without any surprises or hidden costs. We are very happy and will continue to work together!”
Artem Tolmachev
CEO @ eKids.nl
“Back in July '12, FundedByMe needed to quickly scale our development team to create the equity crowdfunding leg of our operation. Working with a small budget, we couldn't spend time on vetting candidates, so we turned to Toptal. They identified a stellar developer that truly set the bar when it came to delivering product.”
Arno Smit
CTO @ FundedByMe.com
“Marcos was a wonderful engineer and really helped us out on this project. Without him I feel like we really would have been at a loss.”
Jama Mohamed
Owner @ JM Technologies
“The developers I was paired with were incredible—smart, driven, and responsive. It used to be hard to find quality engineers and consultants. Now it isn't.”
Ryan Rockefeller
CEO @ Radeeus
“Toptal was the best thing to happen to my web app. Initially, I hired a team of freelancers from India through another freelancing website—which was a nightmare. In fact, it was so bad that I had to start again from scratch, which is when I found Toptal. The experiences were like night and day. It was so refreshing to get partnered up with a quality developer that I could trust due to Toptal's extensive screening process. I will only use Toptal from now on and highly recommend you do the same.”
Chris Holtzhauer
CEO @ HootRecruit
“We're a small firm with big dreams. After trying 4 or 5 local or outsourced developers, we were out of options. I'd heard of Toptal, but was worried that my company wasn't big enough for them. After calling them up, I found out that I didn't need to meet any minimum budget and was immediately put in touch with a developer to talk through my problems and goals. A day later, he got back to me with a list of possible solutions. After 9 months and 5 developers, Toptal got me my solution in a single week at a price I could afford.”
Kevin Ramirez
Co-Founder @ SixtyVocab.com
“Toptal provides a great service: Within a week of posting my job, I was matched with my developer and ended up completing the entire project with him. I'll continue to use Toptal in the future for any new development work I may need.”
Mike Jones
CEO @ DigitalDripped
“Getting set up with Toptal and finding a new team member was so easy, I don't know why anyone wouldn't give it a try. Best of all, we no longer have to worry about finding great people to help with our projects!”
Mike Branch
President & CTO @ HarborSI
“Andrea is doing an amazing job. I don't think we could have gotten a better person. He is fun to work with, he thinks out of the box, and he is extremely knowledgeable in what he is going. He not only does an excellent job, he also helps our company to differentiate our business model further (e.g. making our app offline-capable). I would recommend Andrea as well as Toptal any time to any friend.”
Pascal Girardat
Co-Founder / CEO @ Lifestage Solutions AG
“Working with Toptal has been a great experience. Prior to using them, I had spent quite some time interviewing other freelancers and wasn't finding what I needed. After engaging with Toptal, they matched me up with the perfect developer in a matter of days. Amaury, the developer I'm working with, had all of the right skills and experiences that I needed for my project. He not only delivers quality code, but he also makes suggestions on things that I hadn't thought of. It's clear to me that Amaury knows what he is doing and I'm happy to have him on the team. Highly recommended!”
George Cheng
CEO @ Bulavard, Inc.
“We have been incredibly happy with our Toptal experience. Initially a skeptic, the process to find and recruit a fabulous iOS developer was very easy. Rather than sifting through hundreds of CVs, we saw two and hired them. They have worked effectively, getting up to speed incredibly quickly and have almost become part of the team. We would definitely use Toptal again. ”
James O'Day
Co-Founder @ Pearlshare
“I am more than pleased with the experience with Toptal. It may cost a little more, but because they pre-qualify and hand-pick the professional best suited for the job, it's well worth it. The professional I got to work with was on the phone (Skype) with me within a couple hours. I knew after discussing my project with him that he was the candidate I wanted to do the job, and I hired him immediately... and he wasted no time in getting to my project. He completed the job and went the extra mile to clean up older, messy code and even added some great design elements that enhanced our overall look. I would highly recommend Toptal to anyone needing to hire a professional. Great company. Great service. Thank you, Toptal.”
Paul Fenley
Director @ K Dunn & Associates
Hire a top React.js developer now.
Toptal is a marketplace for top React.js developers, engineers, programmers, coders, architects, and consultants. Top companies and start-ups choose Toptal freelancers for their mission critical software projects.
Full
profile
Pavel VlasovRussia
Pavel is a hardworking and analytical specialist who possesses strong problem-solving skills and a drive to learn new things. He is constantly looking to improve himself while growing in the computer science and technology fields. He prides himself on being polite, welcoming, and professional at all times.
[click to continue…]
React.jsCSS3CoffeeScriptJavaScriptAngularJSNode.jsGit
Hire
Full
profile
Leonardo Andrés Garcia CrespoUnited Kingdom
Leonardo is a lifelong fan of technology and is always trying to learn something new while keeping up to date with his favorite technologies. He has a very proactive personality, and he's always building something.
[click to continue…]
React.jsSQLRubyJavaScriptRuby on RailsASP.NET MVCGitHubAgile Software DevelopmentMac OS X
Hire
Full
profile
Rogério AraújoBrazil
Rogério is a full-stack developer with 15 years of experience with software development and architecture. He has worked on several projects for customers in Brazil and globally. The range of projects include mobile, applications, desktop, and enterprise search applications.
[click to continue…]
React.jsDelphiC#Objective-CPHPJavaScriptSQLJavaASP.NETAndroid SDKSpringJavaServer FacesASP.NET MVC
Hire
Full
profile
Rafael ChitiUnited Kingdom
Rafael is passionate about change and trying new things, both professionally and in general with his life. He is a skilled web developer with over 8 years of experience. He loves startups and is extremely proactive.
[click to continue…]
React.jsCSSJavaScriptjQueryGitAgile Software DevelopmentMac OS
Hire
Full
profile
Wout MertensPoland
Wout has over two decades of experience developing for and administering Unix platforms such as Linux, Solaris, and OS X. He excels at programming back-end and front-end services in a variety of languages, and holds a Master's degree in Computer Architecture.
[click to continue…]
React.jsCoffeeScriptSQLJavaScriptjQueryMac OS XWordPress
Hire
Full
profile
Sebastian IllingGermany
Sebastian is a talented and passionate full-stack developer with a focus on back-end and API development. He has years of experience working with different programming languages and web-frameworks. Coming from a start-up environment, he strives to be result-oriented and quality-driven.
[click to continue…]
React.jsPythonDjango REST FrameworkDjangoGit
Hire
Full
profile
Tomas HolasCzech Republic
Tomas started as a Ruby on Rails enthusiast, but in 2010 he turned to JavaScript and never looked back. JavaScript has a really productive ecosystem, which is easy to hack on, and offers libraries for everything imaginable. Currently, he prefers to work with Angular, React, and NodeJS. Why hire Tomas? He strictly adheres to the KISS approach, prioritizing productivity over programmatic parlor tricks where a library is sufficient.
[click to continue…]
React.jsJavaScriptAngularJSNode.jsAgile Software Development
Hire
Full
profile
Antonios MinasGreece
Antonios is a senior software engineer specializing in front-end, WordPress, PHP, and JavaScript frameworks with more than six years of professional experience spanning from the IT sector to digital advertising. He is passionate about applying top-end solutions and software engineering patterns in order to solve complex problems.
[click to continue…]
React.jsPHPCSS3HTML5CSSLESSJavaScriptSQLTwitter BootstrapjQueryAJAXWordPressWooCommerce
Hire
Full
profile
Alejandro HernandezArgentina
Alejandro got his Bachelor's in software engineering eleven years ago, and since then has been working for software companies of all sizes from all around the globe as a freelancer. Currently, he enjoys working as the technical lead on JavaScript projects, where his deep understanding of architecture and theory is most impactful.
[click to continue…]
React.jsJavaScriptjQueryNode.js
Hire
Full
profile
Andreas DewesGermany
Andreas is a trained physicist with a PhD in experimental quantum computing and a degree in quantitative economics. As an entrepreneur, he has a passion for data analysis and software development and loves to tackle hard business problems with data. He has received numerous awards for his work on data analysis and his work on data privacy and big data has been featured in the national and international press.
[click to continue…]
React.jsPython
Hire

The Vital Guide to React.js Interviewing

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 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 // eslint-disable-lint
      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++;
// equivalent to function (counter) { return 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

import React, {PropTypes} from 'react';

function AlertWidget(props) {
  const styles = require('./AlertWidget.scss');
  return (
    <div className={styles.alertWidget + ' well'} >
      <div className="wrapper">
        <p className={styles.alert}>{props.alert}</p>
        <p>{props.text}</p>
      </div>
    </div>
  );
}

AlertWidget.propTypes = {
  alert: PropTypes.text,
  text: PropTypes.text
};

export default AlertWidget;

It may not always be the case all styles have to be local, but it certainly is a very powerful tool. To learn more, check influential introduction to local styles on Medium and discussion on the pros and cons of inline styles on CSS-tricks

React revolutionized the way we think about apps

How Do You State

Applications which encompass more than a single component, especially larger applications, can be difficult to maintain using just local component states. It also feels like a bad practice to put anything more than controller-style logic into React. But do not worry, there are already solutions for that.

Q: What is the application state in React, and what governs the state?

The answer is simple – it is an object which represents the current set of data and other properties of the application. The application state differs from the component local state in the way it can be referred to by multiple components.

Another difference is that the application state should not be changed directly. The only place where it can be updated is a store. Stores govern application state, and also define actions which can be dispatched, such as a result of user interactions.

Most React components should not depend on application scope. It is likely the presentational components should have access to pieces of data, but then that data should be provided to them via properties. In React, the convention is to have only the container elements dispatching actions and referring to the application scope.

Q: So, what tools for governing the state in React are out there?

Handling application state in applications built with React is usually done outside of React. Facebook, who brought us React, also introduced the Flux architecture and just enough of its implementation. The Flux part of the client-side application is where front-end business logic takes place.

React is not tightly coupled with Flux. There is also more than one Flux implementation. In fact, there are many, and there are also other very popular ones which are inspired by Flux. The most popular Flux implementations are Facebook Flux, Reflux and Alt.js. There is also Redux, which is based on Flux principles and many people believe improves on Flux.

These libraries will all get the job done. However, a choice needs to be made and it is crucial for the developer to do it consciously. Some reasonable criteria for making the choice:

  • How popular is the repository? Look for GitHub stars and fork count.
  • Is the framework maintained? Check how many commits were done in the last two weeks. Also, read the author’s notes and the open and closed issue counts.
  • What is the state of the documentation? This one is particularly important, team members can be added or changed but the codebase of your software needs to be clear.
  • How well does the developer know that particular framework?

At the moment of writing this article, Redux is by far the most popular of the bunch. It was also reviewed by the authors of Flux, who agreed that it was excellent work. The documentation is excellent, and there are 30 free short video tutorial lessons by the author. The framework itself is very simple, and most aligned with functional programming paradigms.

Alt.js also has a vibrant community, is highly praised in numerous articles, and has excellent documentation. Alt.js is also a pure Flux implementation. Several other implementations were dropped in favour of the two mentioned.

Here’s an article on the different Flux implementations by Dan Abramov, the author of Redux

Q: What is the unidirectional data flow? What benefits does it bring?

The unidirectional data flow constitutes that all changes to the application state are done in the same general way. That flow follows a similar pattern in Flux implementations, as well as in Redux. The pattern starts with an action, which is dispatched and processed by the stores and has the effect of an updated state, which in turn results in updated views.

By following that pattern, applications which govern their state with Flux or Redux are predictable and normalised. Every state version is a result of calling a set of actions. That means that it is now easier to reproduce every user experience by monitoring which actions were dispatched. A useful example is this article about logging and replaying user actions with Flux on Auth0.

It is also extremely helpful when debugging. In fact, one of the most popular frameworks inspired by Flux, Redux, was created as a side effect of creating a new set of developer tools which themselves rely on Flux concepts. There is a speech to it, called “Hot Reloading with Time Travel”, by Dan Abramov.

Miscellaneous

There are many approaches to programming, and also to software engineering in general. The programming paradigms differ far beyond the style. Recently, there are many mentions of functional programming in JavaScript. There are many advantages awaiting for the developers who seek to embrace it.

Q: Explain the functional programming paradigm.

Functional programming is a paradigm, which stresses on:

  • Writing pure functions.
  • Not having a global state.
  • Not mutating data.
  • Composition with higher-order functions.

Pure functions do not produce side-effects, and also are idempotent, meaning they always return the same value when given the same arguments.

Programs which rely on functional programming have two major advantages. They are easy to understand, and also easy to test. In contrast, assigning variables to the global scope, relying on events, and mutating data makes it very easy for the application to become chaotic. From a JavaScript developer’s perspective, I would even say it is overly easy to end up with code which is difficult to understand and prone to errors.

JavaScript is not a strictly functional language. However, with functions as first-class citizens, which means that they can be assigned and passed around just like other types and are composable, it is certainly possible to embrace functional programming for JavaScript developers.

There are many recent articles that praise this style. Still, what seems to be most important are the new tools, which become very popular very quickly. The tools incorporate the key functional programming ideas in various degrees, and include Redux, recent updates to React, and also others like Bacon.js.

Q: How to incline towards functional programming in React?

Primarily, writing React code is mostly focused on writing good JavaScript code. The general way of writing functional programming in JavaScript would be to keep a consistent style of programming, focused on:

  • Writing pure functions.
  • Keeping the functions small.
  • Always returning a value.
  • Composing functions (utilising higher order functions).
  • Never mutating data.
  • Not producing side effects.

There are many tools in JavaScript which are suited for functional programming, among others: .map(), .reduce(), .filter(), .concat. There are also new ES6 features available, like native promises or the …spread operator.

Also, there are available linters, like eslint in particular, combined with linter configurations based on the Airbnb JavaScript and React style guides. There are also other tools, like immutable.js and code patterns like deepFreeze function, which help prevent the data from mutating which is particularly valuable in tests.

React version 0.14 introduced stateless function components, which are a step towards functional programming from object-oriented programming. Those components are minimal, and should be used when possible. Generally, the vast majority of components in React applications should be presentational.

Using Redux is yet another step in functional programming direction. Redux uses function calls, unlike Flux which relies on events. All Redux reducers are also pure functions. Redux never mutates the application state. Instead, the reducers always return a new state.

Q: How to test React applications?

Last but not least comes the developer’s approach to testing. Regression issues are the ultimate source of frustration. Besides allowing the developer and the client to be assured that the application is working as expected, the tests are the remedy for regression issues.

Building a continuous integration or deployment environment in which every pushed commit is automatically tested, and if successful is deployed, has become a standard these days. It is very easy to set up, with free plans on many SaaS. Codeship for example, has good integrations and a free plan. Another good example is Travis CI which delivers a more stable and mature feeling, and is free for open source projects.

There also have to be actual tests to run. Tests are usually written using some framework. Facebook provided a testing framework for React, it is called Jest, and is based on the popular Jasmine. Another industry standard and a more flexible one is Mocha, often combined with the test runner Karma.

React provides another super feature, the TestUtils. Those provide a full quiver of tools, built specifically for testing the components. They create an abstraction instead of inserting the components into an actual page, which allows to compile and test components using unit tests.

To get more insight into testing React applications, you can read on our blog. I also recommend watching the materials available at egghead.io, where there are some series addressing React, and also Flux and Redux, and even a series with a focus on testing React applications.

Conclusion

React brings high performance to client-side apps, and aligns projects which use it in a good position. The library is widely used, and has a vibrant community. Most often, turning to React, also requires the inclusion of other tools to deliver complete apps. Sometimes, it may call for a more general technology upgrade.

Web development is known to evolve at a very fast pace. New tools gain popularity, become valuable and ready to use within months. The innovations encompass more than just the tools, and often span to the code style, application structure and also system architecture. Front-end developers are expected to build reliable software and to optimize the process. The best are open-minded, and state sound arguments with confidence. Toptal engineers are also able lead teams and projects, and introduce new technology for the benefit of the products.

Hire React.js developers now
Alvaro 1506e7

My team is going to personally help you find the best candidate to join your team.

Alvaro Oliveira
VP of Talent Operations