How to screen React developer skills 

For any organization looking to improve their online presence, a front-end developer is arguably one of your most important hires. Their code, UX sensibility, and ability to work with both your tech and design teams can determine how people will interpret your brand. One of the most used technologies for client-side programming is JavaScript library, React.

With an increase in demand for React – it’s topped Stack Overflow’s annual survey list for most-wanted web ‘frameworks’ year after year (and our own, too—for good measure), there is consequently a huge demand for React developer skills. Technical recruiters often find themselves in a pickle when they don’t receive resumes with a strong background and related skill set. The biggest issue they really have is that they don’t know what specific skills to look for.

There are many complex and lengthy processes involved while hiring for the React developer job role. So, how do you hire the best React developer for your business? Read our complete guide for recruiting a skilled React specialist who’s the right fit for your team.

1. What is React?

React (also written as React.js or ReactJS) is an open-source JavaScript library used to build interactive user interfaces (UIs). In terms of websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to use a website or app. It was created by Facebook 2013 and is used as a foundation for a single web page or mobile apps (with React Native).

React helps developers build UIs as a tree of small pieces called components. A component is a mixture of HTML and JavaScript that captures all of the logic required to display a small section of a larger UI. Each of these components can be built up into successively complex parts of an app.

An important distinction between libraries like React and frameworks like Ember.js and Angular is that React is concerned only with rendering the UI and leaves many things up to each project to put together. React is considered to be opinionated.

React has established its place as one of the most dominant libraries used by developers. According to the 2020 State of Developer Ecosystem Survey, React is easily the most used platform with 63% of respondents claiming to use it, a 10% increase from last year. Moreover, React comes in first place when looking at the raw data and sheer bulk use of downloads, by a long margin.

1.1. What is React used for and what problems does it solve?

Before React, developers were left building UIs manually with “vanilla JavaScript” (developers speak for the raw JavaScript language without any supporting frameworks) or with less UI-focused React predecessors like jQuery. This process resulted in long development times and more scope for irregularities and bugs. The preeminence of React quickly solved issues like these.

There are hundreds of thousands of websites built on React. It is extremely popular due to its functionality speed and the ability to adapt to different sized projects . Some examples of popular sites using React are Facebook, Instagram, Netflix, Reddit, Airbnb, and Uber.

React makes it easy to build UI test cases, build SEO-friendly sites, reuse components on many platforms, implement existing code for a website on a mobile app, accelerate performance on resource-intensive web applications, and it can be used wherever JavaScript is needed.

1.2. ¿Es similar a otros lenguajes o frameworks?

The design and functionality of React is not very similar to other JavaScript frameworks.

However, the framework Vue does share similarities with React. These include the ability to utilize a virtual DOM, to provide reactive and composable view components, and to maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries.

But there is another feature: React builds HTML using so-called JSX syntax which resembles original HTML very much. So in some way, knowledge of HTML can be highly applicable to React.

1.3. ¿Cuáles son sus principales ventajas o características?

A clear advantage of using React is that it uses a functional programming style. Functional programming is the process of building software by composing pure functions; avoiding shared state, mutable data, and side-effects. Functional programming is declarative rather than imperative and as a result, React uses very little ‘boilerplate’ code. This effectively means you can achieve a lot with small amounts of code. Learning the process can take some time however in the long run it cuts down development time and reduces the risk of coding errors.

React comes with two key features that add to its appeal for JavaScript developers, JSX and Virtual DOM.

JSX (short for JavaScript eXtension) is a special React syntax extension that effectively allows web developers to mix HTML syntax with JavaScript syntax. Ordinarily, native JavaScript does not allow this function so JSX severely reduces the amount of code needed. And—since React browser support extends to all modern web browsers, JSX is compatible with any browser platform that is available.

If a developer uses JSX to manipulate and update its DOM, React creates something called a Virtual DOM. The Virtual DOM is an artificial copy of the site’s DOM, and React uses this copy to see what parts of the actual DOM need to change when an event happens (like a user clicking a button). This kind of selective updating takes less computing power and less time taken to fresh the page. Overall, making the experience much more pleasant to programmers.

2. What is important for an IT Recruiter to know about React?

What react developer should know? An important thing for an IT recruiter to remember is that React is a view library/framework, which doesn’t determine how we handle state (data) in our applications. To counter this, a popular library for state management named Redux was released in 2015 and remained in use up to 2019.

Nowadays, Redux has lost traction and React Hooks has taken its mantle as the primary tool for managing application state. Today, people don’t write new apps with Redux very often. But lots of existing projects, products, and companies rely on Redux and will have to actively maintain it for many years to come.

2.1. ¿Con qué frecuencia cambia la pila tecnológica?

This is difficult to say as we cannot predict the future. Approximately every 2-3 years there’s a big change, such as replacing mixins with Higher-Order Components or moving away from Class Components towards Functional, Hooks-based Components.

2.2. ¿Hay muchos recursos/herramientas/tecnologías disponibles?

A huge amount of materials are available for React, including many free tutorials on how to use it. The usability of the library is not as complicated as Angular for example, so it’s popular with amataur and veteran programmers alike.

In regards to tools, there are also tons of plugins and libraries available to use with React. As the framework was synthesized by Facebook, the supporting ecosystem is really powerful. There are many JS libraries that have their corresponding React bindings. A wide range of tools are still actively maintained for React and that’s popular with its users (it’s important to choose a tool that doesn’t seem abandoned nor updated).

There are scores of resources out there to pair or to learn React on another level and the best ones can be found on websites like Hongkiat.

2.3. What tools and techniques should a React developer be familiar with?

One of the most effective ways to get the hang of React is by using its tools to build web apps for real-world projects. So it’s quite likely the developer has had ample experience with this. Knowledge of React Hooks, React Context API and Redux are vital for a React developer.

• For creating visual elements, a React Developer should have a deep understanding of HTML, CSS, SASS/LESS/Stylus. Also, SVG would be a bonus.
• Good knowledge of JavaScript is Fundamental.Typescript is also nice to have.
• They should have a working knowledge of these libraries: jQuery, MomentJS, Underscore and Lodash
• An expert React developer knows how to use these JavaScript tools: npm, Yarn, Node.js platform (as a whole) – and at least one of the tools to automate building the application: Webpack, Parcel or Rollup (Grunt, Gulp, and Browserify used to be popular long time ago, they’re not use much nowadays)
• For testing they should know TDD, BDD, Unit Tests and be able to use these testing tools like Jest or Enzyme with confidence. Jasmine, Karma, Mocha, and Selenium would also be helpful.
• A good background managing cloud platforms like SaaS, Amazon AWS, Google Cloud, or Microsoft Azure is a nice to have.
• Look for someone with skills in thaese software application platforms:
  • project management tools: Jira
  • servers: NGINX, Apache
  • online collaboration tools Slack, Miro, Figma, and cloud docs such as Google or Microsoft, etc.

2.4. What type of experience is important to look for in a React developer?

Scientific and academic experience for React is almost irrelevant. Commercial experience on the other hand is very important. Open source experience is a nice-to-have, but definitely not mandatory. If a developer maintains a popular OS library, it’d be a very strong advantage.

Generally speaking, performing simple tasks in React is not complicated, so many wannabe-developers try to begin their career in front-end development, often in React. Therefore, there are many boot-camp graduates who want to get their first job in React. It’s a very big advantage to have commercial experience, as compared with people who attended boot-camps and have often created a project or two on the side. It’s great to give rookies a chance but their experience doesn’t really equate to battle-tested knowledge.

3. How to verify React developer skills in the screening phase?

Technical or hard skills are job-specific skills that are necessary to perform a job. These skills are learned and developed through education, seminars, training, and certifications.

But on the other hand, soft skills pertain to the interpersonal abilities of a person. By nature, they are quite tricky to measure or quantify. Soft skills help us define how an employee interacts with others and if they have the qualities that fit into the company culture. Some of the most important soft-skills for a React developer include:

• Excellent communication skills
• Trabajo en equipo
• Creatividad
• The ability to handle criticism

3.1. What to take into account when screening a resume?

Certainly, the first thing to look for in a resume is commercial experience in developing front-end projects. Always favor experience over a long list of various tools. Why?

Modern front-end development has introduced hundreds of tools, which solve similar problems in different ways, and sometimes they do the same thing. There are lots of trends, certain tools might be popular and two years later they’re already legacy, the landscape changes very fast.

The fact that someone has mentioned tool X in their resume means they could build something with it. But it doesn’t mean they have a solid understanding of why they did it this way, or what the pros/cons are of other various solutions. The ability to adapt to unfamiliar situations is the real key here, without that foundational experience in solving different problems a developer can only know what they used to or have been taught.

So all-in-all, it’s rather simple to list scores of familiar tools into a resume, but solving problems is much more important. If someone were to include “designing solutions” or “providing architecture”, it would be preferred as opposed to just name-dropping tool names.

3.2. What glossary terms are important to know in React (including frameworks, libraries and language versions)?

These are the keywords worth understanding:

Arquitectura	Componentes de clase Function(al) Components Ganchos React
Gestión estatal	React Context API Redux MobX
Styling	Styled-components Emotion CSS in JS CSS Modules
Static typing or type checkers	TypeScript Flow
Ecosistema	npm Node.js NVM
Bundler	webpack

React developers also use React Native — which is for building native mobile apps. React when paired with React Native allows developers to use the same code for both browser and mobile devices which is a great advantage. However, there is still some important platform-specific code for each platform that cannot be duplicated.

3.3. ¿Qué versiones son completamente diferentes? 3.4. ¿Qué versiones son similares entre sí?

The numbers of versions are not that important as people don’t learn them by heart, however there were indeed a few ‘eras’ in the evolution of React.

Bear in mind, it’s not like Python v2 and v3 which are not compatible with one another.   What’s more important are the architectures that people have compiled. New versions have naturally been added, but React v16.8.3 doesn’t ring a bell to many developers.

The architectures that people might be familiar with (in chronological order) include:

• Class Component-based React
  • Mixins – a very old approach. Nowadays it’s essentially legacy and should be avoided. However, there are some old projects where it is still used.
  • HOCs (Higher-Order Components) – the idea with this approach is that a HOC adds a single behavior to a component (adds one functionality). Lots of projects still have it, but it’s considered legacy.
  • Render Props – some non-standard components that have no UI only have logic/behavior. And they accept this “render prop” to define what the view is. So, by force, we separate the logic from the UI. Some projects might have it, but it’s considered legacy.
• Function Component-based React
  • Ganchos React – introduced in late 2018 and quickly became the dominant approach. This is an absolute must-have nowadays. Based on Functional Programming and completely different from Class Components. Once you learn it, it’s more safe and less error-prone. But it usually takes more effort to learn it, compared to class components.

All of the approaches above pretty much try to achieve the same goal, though in different ways. Primarily by way of: composing components, combining few smaller components into one bigger piece, improving the reusability and improving the composition.

3.4. What other lines on a CV can show React developer skills?

It’s also important for React developers to have a deep knowledge of framework agnostic skills, including:

• Language: JavaScript, ES6
• Asynchronous JavaScript (promises, events, async await and rxjs)
• HTTP – the protocol used by billions of devices nowadays which allows communication between clients and servers
• Typescript and/or Flow (static typing React apps)
• UI libraries such as Material UI
• Generally, architecture and design patterns.

3.5. Which certifications are available and respected? Are they useful in determining skill?

In the front end landscape, there are no respected certifications worth pursuing. If there are certifications at all, they’re not well known. It’s completely opposite than what Java used to be (having lots of certifications available to take).

4. Technical screening of React developer skills during a phone/video interview

Whether you’re an IT recruiter or a project manager you are well aware that the success of your project rests on your ability to find top developers.

Below you‘ll find some example interview questions you can refer to when seeking a new React developer to build your web applications.

4.1. Questions that you should ask about a React developer’s experiencia. ¿Por qué debe hacerse cada una de esas preguntas?

• Do you pay attention to automated testing?
  • Developers who don’t have the habit to write unit/e2e tests might be bullish about the quality of their code, but in reality the process of testing is vital.
• Did you support accessibility (a11y) in your recent projects?
  • It’s important to build accessible websites, especially for government and financial institutions so that people with disabilities can make the most out of the applications.
• Do you prefer coding the business logic or the visual layer?
  • The candidate would say what is their strong side and what would be the preferred tasks they would do in their daily job.
• How would you optimize your React codebase?
  • Answers to this question indicate experience. A good answer should include various techniques such as: memo, useMemo, PureComponent, removing unnecessary calculations and splitting components into smaller chunks (so that, on every change, less markup gets rerendered).

4.2. Questions that you should ask about a React developer’s conocimientos y opiniones. ¿Por qué debe hacerse cada una de esas preguntas?

• Why did the community reject Redux (or at least, claim it’s not the way forward for React)?
• State the pros and cons of both Redux and React Context API. Where would you use one over another?
• What are the benefits of React Hooks?
• Point out a few functional Programming techniques frequently used in React applications.

The above questions are high-level that allow a candidate to position themselves in the interview. If the candidate is inexperienced, you’ll be able to tell pretty quickly.

A bad answer to the question ‘Why was Redux rejected?’ would be ‘Because React Hooks is better’. A more informed response would be although Redux provides lots of benefits like predictable state management, explicitness, time travelling and hot module replacement, lots of repetitive code is added in Redux and the affordability became a problem for a lot of its users.

Some other questions relating to knowledge and opinions include:

• Why did React introduce Virtual DOM?
  • Answering not what it is, but why it’s there proves that a developer understands the internal design and architecture behind React itself. A short answer is because of performance, flexibility and ease of changing HTML structure
• What problems do CSS Modules solve?
  • It’s important to understand the challenges behind managing CSS in React apps. Some styles leak outside, and some styles from outside leak into your place. CSS Modules emulate local styles.
• Why are refs (short for references) discouraged?
  • This is important as it proves understanding the philosophy behind React. In short, the typical approach to program things is imperative. React follows a declarative approach. Refs are an escape to the imperative world, existing outside of the React philosophy. It should only be used as a last resort.

4.3. Comportamiento questions that you should ask a React developer. Why should you ask each of those questions?

• What was the most difficult React task you had to implement? How did you deal with that?
  • The answer to this question will show the unfamiliar tasks the developer was challenged with. This might relate to learning new skills, teamwork or their cooperation with a business.
• If you found out there was a new library for state management for React that is gaining popularity – would you add it into your project, knowing you already have two different ways to deal with state management?
  • As mentioned before, ever-changing trends are an issue in the front-end landscape. Tools change, but some people lose their focus and treat the tools as the goal itself, instead of treating it as a means of achieving a business goal. Always favor devs who have their eye on the result and not on the direction it takes to get there.
• If there was a new approach to deal with React, would you like to be an early adopter?
  • Same as above – don’t favor new tools over business goals. Rewriting one’s codebase costs time & money and developers should be aware of that.

5. Technical screening of React developer’s skills using an online coding test

Hiring a great React developer can pose a significant challenge, especially if you’re doing all the dirty work yourself. There is no doubt that the process usually requires tons of patience in dealing with all the paperwork and interviews.

These online job boards and marketplaces are a great place to start if you’re hiring on a project basis. But, for huge projects that require a long-term commitment and budget, you need a software development company with a solid recruitment process.

5.1. Which online test for React developer skills should you choose?

A la hora de buscar el React developer skills test debe asegurarse de que cumple los siguientes criterios:

• La prueba refleja la calidad del trabajo profesional que se realiza
• La duración no es demasiado larga, de una a dos horas como máximo.
• La prueba puede enviarse automáticamente y es de naturaleza sencilla
• El nivel de dificultad se ajusta a las capacidades del candidato
• La prueba va más allá de comprobar si la solución funciona: comprueba la calidad del código y lo bien que funciona en casos extremos.
• Es lo más parecido posible al entorno natural de programación y permite al candidato acceder a los recursos pertinentes
• Proporciona al candidato la oportunidad de utilizar todas las bibliotecas, frameworks y otras herramientas con las que se encuentra habitualmente.

5.2. DevSkiller ready-to-use online React developer skills tests

Las pruebas de codificación DevSkiller utilizan nuestra metodología RealLifeTesting™ para reflejar el entorno de codificación real en el que trabaja su candidato. En lugar de utilizar algoritmos oscuros, las pruebas DevSkiller requieren que los candidatos construyan aplicaciones o funciones. Se califican de forma totalmente automática y pueden realizarse en cualquier parte del mundo. Al mismo tiempo, el candidato tiene acceso a todos los recursos que utilizaría normalmente, como bibliotecas, frameworks, StackOverflow e incluso Google.

Companies use DevSkiller to test candidates using their own codebase from anywhere in the world. To make it easy, DevSkiller also offers a number of pre-made data science skills tests like the ones here: