In Mobile App Development
For any organisation looking to improve its web presence, the frontend developer is arguably one of the most important employees.
Management
As demand for React grows - it tops the list of Stack Overflow's annual surveys of the most in-demand frameworks year after year - there is consequently a huge demand for React developer skills. IT recruiters often find themselves in the predicament of not getting CVs with a lot of experience and relevant skills. The biggest problem they do face is that they don't know exactly what skills to look for.
How to test React developer skills
One of the most commonly used technologies for client-side programming is the JavaScript library React.
When hiring a React developer, there's a lot of complicated and time-consuming processes involved. So, how do you hire the best React developer for your business?
What is React?
React (also called React.js or ReactJS) is an open-source JavaScript library used to create interactive user interfaces (UIs). In terms of websites and web applications, UIs are a collection of on-screen menus, search bars, buttons and anything else that someone interacts with to use a website or application. It was created by Facebook 2013 and is used as the basis for a standalone web page or mobile app (with React Native).
React helps developers create user interfaces in the form of a tree of small parts called components. A component is a mixture of HTML and JavaScript that captures all the logic needed to render a small part of a larger user interface. Each of these components can be built into sequentially complex parts of the application.
An important difference between libraries such as React and frameworks such as Ember.js and Angular is that React only does the rendering of the user interface and leaves many things for each project to build. React is considered self-reliant. React has established itself as one of the most dominant libraries used by developers. According to the 2020 State of Developer Ecosystem Survey, React is the most commonly used platform, with 63% of respondents saying they use it, up 10% from last year. What's more, React comes out on top by a wide margin when considering raw data and the apparent massive use of downloads .
What is React used for and what problems does it solve?
Before React, developers were left to create user interfaces manually with "vanilla JavaScript" (developers talk about a raw JavaScript language without any supporting frameworks) or with React's less UI-oriented predecessors, such as jQuery. This process led to long development times and more breakdowns and bugs. The superiority of React quickly solved such problems. Hundreds of thousands of websites have been created on React. It is extremely popular because of its speed and ability to adapt to projects of all sizes. Some examples of popular sites using React are Facebook, Instagram, Netflix, Reddit, Airbnb and Uber.
React makes it easy to create UI test cases, create SEO-optimised websites, reuse components across many platforms, embed existing website code into a mobile application, improve the performance of resource-intensive web apps, and can be used wherever JavaScript is available.
Is React JS similar to any other languages or frameworks?
React's design and functionality isn't very similar to other JavaScript frameworks.
However, the Vue framework does have similarities to React. These include the ability to use a virtual DOM model, provide reactive and linkable view components, and maintain focus in the core library with issues such as routing and global state management handled by companion libraries.
But there's one more feature: React creates HTML using what's called JSX syntax, which is very similar to raw HTML. Thus knowledge of HTML can be applicable to React.
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 creating software by composing pure functions; avoiding generic state, variable data and side-effects. Functional programming is declarative rather than imperative, and as a result React uses very little 'boilerplate' code. In fact, this means you can accomplish a lot with a small amount of code. Learning the process can take some time, but in the end it reduces development time and the risk of coding errors.
React has two key features that make it attractive to 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. Typically native JavaScript doesn't support this feature, so JSX greatly reduces the amount of code needed. And because React browser support extends to all modern web browsers, JSX is compatible with any available browser platform.
If a developer uses JSX to manage and update their DOM, React creates something called the Virtual DOM. The Virtual DOM is an artificial copy of a site's DOM model, and React uses this copy to see which parts of the actual DOM need to be changed when an event occurs (such as when a user clicks a button). This type of selective update requires fewer computational resources and less time to update the page. Overall, it makes the programming process more enjoyable for programmers.
What is important for an IT recruiter to know about React?
It's important for an IT recruiter to remember that React is a presentation library / framework that does not define how we handle state (data) in our applications. To counter this, a popular state management library called Redux was released in 2015 and used until 2019. Nowadays, Redux has lost its popularity and React Hooks has become the main tool for managing the state of an application. Today, people don't write new apps using Redux very often. But many existing projects, products and companies rely on Redux, and they will have to actively support it for years to come.
How often does the technology stack change?
This is difficult to say because we cannot predict the future. Approximately every 2-3 years there are big changes, such as replacing mixins with higher-order components or moving from class components to hook-based functional components.
Are there many resources/tools/technologies available?
There is a wealth of material available on React, including many free tutorials on how to use it. The library's usability is not as complicated as, for example, Angular, so it's popular with hobbyists and experienced programmers alike.
As for tools, there are also many plugins and libraries available for use with React. Since the framework has been synthesised by Facebook, the supporting ecosystem is really powerful. There are many JS libraries that have relevant React bindings. There is still a wide range of tools actively supported for React that are popular with users (it's important to choose a tool that doesn't seem abandoned or updated).
There are many resources available to bundle or learn React at a different level, and the best ones can be found on sites such as Hongkiat .
What tools and techniques should a React developer be familiar with?
One of the most effective ways to master React is to use its tools to build web applications for real-world projects. So it's likely that a developer has a lot of experience with it. Knowledge of React Hooks, React Context API and Redux is vital for a React developer.
- To create visual elements, a React developer should have a good understanding of HTML, CSS, SASS / LESS / Stylus. In addition, SVG would be a bonus.
- A good knowledge of JavaScript is fundamental. It's also a good idea to have a typographic script.
- They should have a working knowledge of these libraries: jQuery, MomentJS, Underscore and Lodash.
- An experienced React developer knows how to use these JavaScript tools: npm, Yarn, the Node.js platform (in general), and at least one of the tools to automate application creation: Webpack, Parcel or Rollup (Grunt, Gulp and Browserify used to be popular, but nowadays they have little)
- For testing, they should know TDD, BDD, Unit Tests and be able to use testing tools like Jest or Enzyme with confidence. Jasmine, Karma, Mocha and Selenium will also be useful.
- It's nice to have good experience managing cloud platforms such as SaaS, Amazon AWS, Google Cloud or Microsoft Azure.
- Look for someone with skills in these application platforms: project management tools: Jira and servers: NGINX, Apache as well as online collaboration tools Slack, Miro, Figma and cloud documents such as Google or Microsoft etc.
What experience is important to look for in a React developer?
Scientific and academic experience is almost irrelevant for React. On the other hand, commercial experience is very important. Open source experience is good, but definitely not necessary. If the developer supports a popular OS library, it will be a big advantage.
Generally speaking, performing simple tasks in React is not difficult, so many wannabe developers try to start their careers with frontend development, often with React. Therefore, there are many graduates of training courses who want to get their first job in React. Having commercial experience is a very big advantage over people who attended boot camps and often created one or two projects on the side. Giving newbies a chance is great, but their experience doesn't really mean battle-tested knowledge.
How do you test a React developer's skills at the recruitment stage?
Technical or hard skills are the professional skills you need to get the job done. These skills are acquired and developed through education, workshops, training and certificates.
But on the other hand, interpersonal skills refer to a person's interpersonal abilities. By their very nature, they are quite difficult to measure or quantify. Soft skills help us determine how an employee interacts with others and whether they possess the qualities appropriate to the corporate culture. Some of the most important React programming skills include:
- Excellent communication skills
- Teamwork
- Creativity
- Ability to handle criticism
React JS resume points
Certainly the first thing to look for in a CV is commercial experience of front-end project development. Always favour experience over a long list of different tools. Why?
Modern interface development has introduced hundreds of tools that solve similar problems in different ways, and sometimes do the same thing. There are many trends, some tools may become popular and then two years later they are inherited, and things change very quickly.
The fact that someone mentions tool X on their CV means that they can build something with it. But it does not mean that they have a firm understanding of why they did it that way, or what the pros and cons of other different solutions are. The ability to adapt to unfamiliar situations is the real key here, without this basic experience of solving different problems the developer can only know what they are used to or have been taught.
All in all, it's pretty easy to list a lot of familiar tools on a resume, but problem solving is much more important. If someone were to include 'designing solutions' or 'providing architecture', that would be preferable to just naming the tools.
What glossary terms are important to know about React (including frameworks, libraries and language versions)?
Here are the key words to understand:
Architecture
- Class Components
- Functions (all) Components
- React hooks
Managing
- React Context API
- Redux
- MobX
Style
- Styled Components
- Emotion
- CSS in JS
- CSS Modules
Static typing or type checking
- TypeScript
- Flow
Ecosystem
- npm
- Node.js
- NVM
Bundler
- webpack
React developers also use React Native, designed to build their own mobile apps. React combined with React Native allows developers to use the same code for both browser and mobile, which is a big advantage. However, there is still important platform-specific code for each platform that cannot be duplicated.
Which versions are completely different? Which versions are similar to each other?
The number of versions is not that important as people don't memorise them by heart, but there have indeed been several "eras" in the evolution of React.
Keep in mind that Python v2 and v3 are not compatible with each other. More importantly, it's the architectures that people have compiled. New versions have naturally been added, but React v16.8.3 has not been frowned upon by many developers.
Architectures that people may be familiar with (in chronological order) include:
React's component-based class
- Mixins are a very old approach. It is now essentially a legacy and should be avoided. However, there are a few older projects where it is still in use.
- HOC (higher order components) - the idea behind this approach is that a HOC adds one behaviour to a component (adds one functionality). It's still in many projects, but is considered legacy.
- Render Props - some non-standard components that have no user interface have only logic/behaviour. And they take this "render prop" to define what the representation is. So, forcibly separate the logic from the UI. In some projects it may be, but is considered legacy.
React function based on components
React Hooks - introduced in late 2018 and quickly became the dominant approach. It is now absolutely essential. It's based on functional programming and is completely different from class components. Once you learn it, it is more secure and less error-prone. But it usually takes more effort to learn it than class components.
All of the above approaches are largely trying to achieve the same goal, though in different ways. Primarily through: composing components, combining several smaller components into one larger piece, improving reusability, and improving composition.
What other lines on a CV can show a React developer's skills?
It's also important for React developers to have in-depth knowledge of agnostic skills, including:
- Language: JavaScript, ES6
- Asynchronous JavaScript (promises, events, async await and rxjs)
- HTTP is the protocol currently used by billions of devices to enable communication between clients and servers.
- Typescript and/or Flow (applications for React with static typing)
- User interface libraries, such as Material UI
- In general, architecture and design patterns.
What certificates are available and respected? Are they useful for defining skills?
There are no respected certifications in frontend to strive for. If there are certificates, they are not well known. This is the complete opposite of what Java used to be (with lots of certificates available).
A technical test of a React developer's skills during a phone/video interview.
Whether you're an IT recruiter or a project manager, you know very well that the success of your project depends on your ability to find the best developers. Below you'll find some examples of interview questions you can refer to when looking for a React programmer to build your web applications.
Questions you should ask about React developer experience . Why should you ask each of these questions?
— Are you paying attention to automated testing?
Developers who aren't in the habit of writing unit / e2e-tests may be optimistic about the quality of their code, but the reality is that the testing process is vital.
— Have you maintained accessibility (a11y) in your recent projects?
It is important to create accessible websites, especially for government and financial institutions, so that people with disabilities can make the best use of the applications.
— Do you prefer to code the business logic or the visual layer?
The candidate would say what their strengths are and what tasks they would prefer to do in their day-to-day work.
— How would you optimise your React code base?
Answers to this question speak to experience. A good answer should include various methods such as: memo, useMemo, PureComponent, removing unnecessary computation, and splitting components into smaller pieces (so that less markup is re-displayed with each change).
Questions you should ask about the knowledge and opinions of React developers . Why should you ask each of these questions?
- Why did the community reject Redux (or at least state that it is not the way forward for React)?
- Point out the pros and cons of both the Redux and React Context APIs. Where would you use one instead of the other?
- What are the advantages of React Hooks?
- Name a few functional programming techniques that are often used in React applications.
The above questions are high-level questions that allow the candidate to position themselves in the interview. If the candidate is inexperienced, you will be able to tell pretty quickly.
A poor answer to the question "Why was Redux rejected ?" would be "Because React Hooks is better". A more informed answer would be that although Redux offers many advantages such as predictable state management, explicitness, time travel and hot swappable modules, Redux added a lot of repetitive code and accessibility became an issue for many of its users.
Some other knowledge and opinion questions include:
— Why did React introduce Virtual DOM?
The answer is not what it is, but why it's there, proving that the developer understands the internal design and architecture behind React itself. The short answer is because of the performance, flexibility and ease of changing the HTML structure.
— What problems do CSS modules solve?
It's important to understand the problems behind CSS management in React applications. Some styles trickle in from the outside, and some styles trickle out from the inside. CSS modules mimic local styles.
— Why aren't links recommended?
This is important because it proves an understanding of the React philosophy. In short, a typical programming approach is necessary. React follows a declarative approach. Refs is a departure into an imperative world that exists outside the React philosophy. It should only be used as a last resort.
Behavioural questions to ask a React developer. Why should you ask each of these questions?
— What's the most difficult React task you've ever had to do? How did you handle it?
The answer to this question will reveal the unfamiliar tasks that were faced by the developer. It might relate to learning new skills, working together or collaborating with a business.
— If you heard that a new state management library was gaining popularity for React, would you add it to your project, knowing that you already had two different ways of managing state?
As mentioned earlier, ever-changing trends are a problem in frontend. Tools change, but some people lose focus and treat them as an end in themselves rather than as a means to a business end. Always favour developers who look at the outcome rather than the direction in which it needs to be achieved.
— If there were a new approach to working with React, would you want to pioneer it?
Same as above - don't prioritise new tools over business goals. Rewriting your code base takes time and money, and developers should be aware of this.