Cómo evaluar las habilidades de los desarrolladores de React 

noviembre 18, 2020
Cómo buscar el blog de habilidades de los desarrolladores de React

Para cualquier organización que busque mejorar su presencia en línea, un desarrollador de front-end es posiblemente una de sus contrataciones más importantes. Su código, la sensibilidad UX, y la capacidad de trabajar con sus equipos técnicos y de diseño puede determinar cómo la gente interpretará su marca. Una de las tecnologías más utilizadas para la programación del lado del cliente es la biblioteca de JavaScript, React.

Con un aumento en la demanda de React - es la lista de la encuesta anual de Stack Overflow para los "marcos" de la web más buscados año tras año (y la nuestra, también, por supuesto.), hay por consiguiente una enorme demanda de habilidades de desarrollo de React. Los reclutadores técnicos a menudo se encuentran en un aprieto cuando no reciben currículums con una sólida formación y habilidades relacionadas. El mayor problema que tienen es que no saben qué habilidades específicas buscar.

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.

¿Qué es React?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. Is it similar to any other languages or 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. What are its main advantages or features?

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.

What should an IT recruiter know about React2. What is important for an IT Recruiter to know about React?

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. How often does the tech stack change?

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. Are there many resources/tools/technologies available?

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.

Verify Ract skills3. 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.

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

These are the keywords worth understanding:

Arquitectura
  • Class Components
  • Function(al) Components
  • React Hooks
State management
  • React Context API
  • Redux
  • MobX
Styling
  • Styled-components
  • Emotion
  • CSS in JS
  • CSS Modules
Static typing or type checkers
  • TypeScript
  • Flow
Ecosystem
  • npm
  • Nodo.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. Which versions are completely different? Which versions are similar to each other?

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
    • React Hooks – 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).

React interview questions4. 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. Why should you ask each of those questions?

  • 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 knowledge and opinions. Why should you ask each of those questions?

  • 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 por qué 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. Behavioral 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.

React Coding tests5. 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?

Cuando se busca el derecho React developer skills test you should make sure it matches the following criteria:

  • The test reflects the quality of professional work being carried out
  • The duration is not too long, one to two hours max
  • The test can be sent automatically and is straight-forward in nature
  • The difficulty level matches the candidate’s abilities
  • The test goes beyond checking whether the solution works – it checks the quality of the code and how well it works in edge cases
  • It’s as close to the natural programming environment as possible and allows the candidate to access relevant resources
  • It provides the candidate the opportunity to use all the libraries, frameworks, and other tools they regularly come across

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

DevSkiller coding tests use our RealLifeTesting™ methodology to mirror the actual coding environment that your candidate works in. Rather than using obscure algorithms, DevSkiller tests require candidates to build applications or features. They are graded completely automatically and can be taken anywhere in the world. At the same time, the candidate has access to all of the resources that they would normally use including libraries, frameworks, StackOverflow, and even 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:

Reacciona
MIDDLE
Habilidades probadas
Duración
113 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Tarea de programación - Nivel: Duro

JavaScript | React, Redux | Agenda - Implementa las características que faltan de una pequeña aplicación web de React construida sobre Redux.

Tarea de programación - Nivel: Medio

JavaScript | Node.js | Libreta de direcciones - Implementar puntos finales para obtener la lista de contactos (con una coincidencia de fase y limitación de resultados), obtener los detalles de un solo contacto y eliminar el contacto dado.

Lagunas en el código

evaluando el conocimiento de MongoDB

Reacciona
SENIOR
Habilidades probadas
Duración
175 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Tarea de programación de Front End - Nivel: Senior

JavaScript | React, Redux | Agenda - Implementa las características que faltan de una pequeña aplicación web de React construida sobre Redux.

Tarea de programación de la parte trasera - Nivel: Medio

JavaScript | Node.js | Address Book - Implementar puntos finales para obtener la lista de contactos (con una coincidencia de fase y limitación de resultados), obtener los detalles de un solo contacto y eliminar el contacto dado.

Reacciona
JUNIOR
Habilidades probadas
Duración
35 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Preguntas de elección

evaluando el conocimiento de JavaScript, Reacciona

Tarea de programación - Nivel: Fácil

Javascript | Reaccionar | Notas de Calendario - Implementar una aplicación con la que el usuario pueda añadir una nota para una fecha que elija de un calendario.

JavaScript
JUNIOR
Habilidades probadas
Duración
35 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Preguntas de elección

evaluando el conocimiento de JavaScript, Reacciona

Tarea de programación - Nivel: Fácil

JavaScript | React | Aplicación de motor de búsqueda - Implementar una aplicación para buscar y filtrar productos en una tienda online.

Reacciona
JUNIOR
Habilidades probadas
Duración
55 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Preguntas de elección

evaluando el conocimiento de JavaScript, Reacciona

Tarea de programación - Nivel: Fácil

JavaScript | Reaccionar | Bloc de notas - Completa la aplicación de notas simples usando el NotesService proporcionado para guardar y leer notas. Esta tarea utiliza: reaccionar/prueba-biblioteca (como marco de prueba de reacción) y broma (como corredor de prueba).

Reacciona
SENIOR
Habilidades probadas
Duración
59 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Preguntas de elección

evaluando el conocimiento de JS, JavaScript, Reacciona

Tarea de programación - Nivel: Duro

Reacciona | Simple Website Builder - Esta tarea evalúa las habilidades del candidato en Reacciona, Redux y redux-form.

Reacciona
MIDDLE
Habilidades probadas
Duración
55 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Preguntas de elección

evaluando el conocimiento de ES6, JavaScript, HTML, JS, Reacciona, Desarrollo de la web

Tarea de programación - Nivel: Medio

JavaScript | Reaccionar | Formulario de contacto - Termine el formulario para que tenga todas las siguientes características: el usuario puede iniciar sesión, así que el nombre y el correo electrónico se rellenan, después de que el formulario se envía un mensaje de agradecimiento debe aparecer.

Reacciona
SENIOR
Habilidades probadas
Duración
71 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Preguntas de elección

evaluando el conocimiento de ES6, JavaScript, Reacciona

Tarea de programación - Nivel: Duro

Reacciona | Simple Website Builder - Esta tarea evalúa las habilidades del candidato en Reacciona, Redux y redux-form.

Reacciona
MIDDLE
Habilidades probadas
Duración
42 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Preguntas de elección

Verifique JavaScript Conocimientos en varias áreas clave

Tarea de programación

Utilice Reacciona habilidades para personalizar las características de una membresía formulario

Reacciona
SENIOR
Habilidades probadas
Duración
98 minutos como máximo.
Evaluación
Automático
Resumen de la prueba

Preguntas de elección

evaluando el conocimiento de ES6, JavaScript, AJAX, Desarrollo de la web

Tarea de programación - Nivel: Duro

JavaScript | React, Redux | Agenda - Implementar las características que faltan de un pequeño Reacciona aplicación web construida sobre Redux.

Compartir correo

Es más que un simple boletín de noticias

Reciba información útil directamente en su bandeja de entrada y aprenda más sobre la contratación de tecnología.

Verificar y desarrollar las habilidades de codificación sin problemas.

Vea los productos DevSkiller en acción.

Certificaciones de seguridad y cumplimiento. Nos aseguramos de que sus datos estén seguros y protegidos.