Our customizable solution helped Peblio Inc. interview & hire a technically competent and mission-driven Full Stack Developer who enabled them to meet their product goals on time.
We solved CREO Tech's (now Hike Messenger) two-month long struggle to find an expert React Native developer within 3 days helping them roll-out time critical products in quick succession.
With our assistance, Haptik seamlessly integrated a perfectly suited Front End Developer with the in-house team making the engagement a smooth ride and achieving their product goals.
Flexiple Developers are reviewed on their experience and complexity of products built. Those who display depth and have worked on end-to-end projects are given an introductory call.
Over a call, the developer’s ability to communicate in an articulate manner is tested. A deeper understanding of the candidate’s technical experience and also motivation to freelance is achieved.
Over one or more F2F interviews, the developer’s involvement and performance in building complex software products are assessed. This sets the platform to delve deeper into technology-specific discussions.
Developers' mental agility and problem-solving abilities are tested through a coding test involving algorithmic as well as skill-specific problems. A mixture of live evaluation and timed coding tests is used.
The live experience of working with developers is verified by reaching out to past clients and/or employers. Inputs on various qualitative factors such as reliability, punctuality, communication and responsiveness are received.
Performance during each engagement is continually assessed. Our developers are expected to maintain Flexiple standards across all engagements with our customers.
React, an open-source JavaScript library released in 2013, is one of the very rare technologies to achieve remarkable growth in the short time that it has been available. Most of React’s popularity comes from the fact that top companies like Facebook and Uber use it to improve their UI issues. A lot of developers have switched to React because of how easy it is to implement and how faster it gets the job done.
If you’re looking to hire a freelance React developer for your company, this guide is going to help you find the perfect fit. We’ve included everything you need to know about hiring a freelance React developer.
We have broken the sections into the following parts:
1. Let's introduce React to you.
2. Why is React widespread?
3. Writing the Job Description
4. Interview Questions for hiring a React developer
- Basic Questions
- Advanced Questions
- Data Structures/Algo Questions
Below are some key points that we at Flexiple have learned through trial and error - a process of filtering through over 15,000 developers.
Now that you have made a quality JD, it can still be tricky to evaluate the skills of your applicants. To help you with that, we have created a pool of questions that a good React developer should be comfortable with.
It is important to note that the ability to answer these questions doesn't imply that you have a top quality candidate. But it definitely is a big step in that direction.
To help you navigate through these questions, we’ve categorized the interview questions in 3 parts:
A. Basic concepts: Includes all basic concepts used across languages but we've focused on their significance in React. This will give you an understanding of how strong their programming foundation is.
B. Advanced concepts: Includes all concepts that someone with higher expertise should know.
C. DS/Algorithm questions: To test the logical capability of the candidate.
-g Flag
While installing npm modules using “npm install”, some of them are installed with a “-g” flag. This stands for global. Generally, an npm module is saved in your local project folder or repository, but in certain cases when we want to save it globally the “-g” flag is used.nodemon : The term 'nodemon' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + nodemon node app.js + ~~~~~~~ + CategoryInfo : ObjectNotFound: (nodemon:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
[nodemon] 2.0.5 [nodemon] to restart at any time, enter `rs` [nodemon] watching path(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node node app.js` server is up [nodemon] clean exit - waiting for changes before restart
--save-dev Flag
By default, npm packages which are installed are saved in node_modules as project dependencies. When someone is trying to clone or recreate your project, they would have to download your project’s dependencies. To do this “npm install” is run and all the dependencies which are listed in the package.json are installed."dependencies": { "jest": "^26.5.3" }, "devDependencies": {}
"dependencies": {}, "devDependencies": { "jest": "^26.5.3" }
var variable = 0 if (true) { var variable = 100 } { { var variable = 1000 } } console.log(variable)
let variable = 0 if (true) { let variable = 100 } { { let variable = 1000 } } console.log(variable)
const obj = { name: "Flexiple", city: "Bengaluru" } obj.name = "Flexiple" console.log(obj)
const obj = { name: "Flexiple", city: "Bengaluru" } obj = { company: "Flexiple" } console.log(obj)
func = function() { return "end" }
func = () => { return "end" }
func = () => "end"
var url = "http://localhost:3000/id:"+id
var url = `http://localhost:3000/id:${id}`
func = function(param1, param2) { param1 = param1 || 20 param2 = param2 || true }
func = function(param1 = 20, param2 = true) { }
var req = { body: { username: "flexiple", email: "freelance@flexiple.com" } } var username = req.body.username var email = req.body.email
var req = { body: { username: "flexiple", email: "freelance@flexiple.com" } } var { username, email } = req.body
{
"flexiple": {
"top": "1%",
"location": "remote"
},
"blog": {
"topic": "engineering",
"title": "What are stable coins and how do they work?"
}
}
<?xml version="1.0" encoding="UTF-8"?> <root> <blog> <title>What are stable coins and how do they work?</title> <topic>engineering</topic> </blog> <flexiple> <location>"remote"</location> <top>1%</top> </flexiple> </root>
Valid JSON
Few of the rules to remember while handling JSON are that:{"name":"John Doe","age":32,"title":"Vice President of JavaScript"}
["one", "two", "three"]
// nesting valid values is okay
{"names": ["John Doe", "Jane Doe"] }
[ { "name": "John Doe"}, {"name": "Jane Doe"} ]
{} // empty hash
[] // empty list
null
{ "key": "\uFDD0" } // unicode escape codes
{ name: "John Doe", 'age': 32 } // name and age should be in double quotes
[32, 64, 128, 0xFFF] // hex numbers are not allowed
{ "name": "John Doe", "age": undefined } // undefined is an invalid value
// functions and dates are not allowed
{ "name": "John Doe",
"birthday": new Date('Fri, 26 Jan 2019 07:13:10 GMT'),
"getName": function() {
return this.name;
}
}
JSON.stringify()
It takes a Javascript object or array as input and returns a serialised string form of it.const obj = { name: "Flexiple", city: "Bengaluru" } const jsonStr = JSON.stringify(obj) console.log(jsonStr) // output is {"name":"Flexiple","city":"Bengaluru"}
let cost = { candy: 5, bread: 20, cheese: 100, milk: 15 } let func = (key, value) => { if (value < 15) { return undefined } return value } let arr = ['candy', 'bread'] let jsonStrWithFunc = JSON.stringify(cost, func) console.log(jsonStrWithFunc) // Output is {"bread":20,"cheese":100,"milk":15} let jsonStrWithArr = JSON.stringify(cost, arr) console.log(jsonStrWithArr) // Output is {"candy":5,"bread":20}
let cost = { candy: 5, bread: 20, cheese: 100, milk: 15 } let jsonStrWithNum = JSON.stringify(cost, null, 2) console.log(jsonStrWithNum) // Output is // { // "candy": 5, // "bread": 20, // "cheese": 100, // "milk": 15 // } let jsonStrWithStr = JSON.stringify(cost, null, 'xx') console.log(jsonStrWithStr) // Output is // { // xx"candy": 5, // xx"bread": 20, // xx"cheese": 100, // xx"milk": 15 // }
const obj = { "nest1": { "ex": "ex", "nest2": { "nest3": { "ex": "ex", } } } } console.log(obj) // Output is { nest1: { ex: 'ex', nest2: { nest3: [Object] } } }
const obj = { "nest1": { "ex": "ex", "nest2": { "nest3": { "ex": "ex", } } } } console.log(JSON.stringify(obj,null,2)) // Output is // { // "nest1": { // "ex": "ex", // "nest2": { // "nest3": { // "ex": "ex" // } // } // } // }
JSON.parse()
It takes a JSON string and converts it into its respective data structureconst jsonStr = '{"name":"Flexiple","city":"Bengaluru"}' const obj = JSON.parse(jsonStr) console.log(obj) // output is { name: 'Flexiple', city: 'Bengaluru' }
Cloning Objects in Javascript
These 2 functions of JSON can be used together to clone javascript objects.const obj = { "prop1": { "ex": "ex", "prop2": { "ex": "ex" } } } const objCopy = JSON.parse(JSON.stringify(obj)) console.log(objCopy) // Output is { prop1: { ex: 'ex', prop2: { ex: 'ex' } } }
ESLint
ESLint is one the most popular lints available for Javascript. Let us go into the basics of using ESLint. This is going to the most basic version of ESLint, remember you can install it with different code style plugins as per your choice.√ How would you like to use ESLint? · style √ What type of modules does your project use? · commonjs √ Which framework does your project use? · none √ Does your project use TypeScript? · No / Yes √ Where does your code run? · node √ How would you like to define a style for your project? · guide √ Which style guide do you want to follow? · standard √ What format do you want your config file to be in? · JSON
const obj = { "prop1": { "ex": "ex", "prop2": { "ex": "ex" } } } const objCopy = JSON.parse(JSON.stringify(obj)) console.log(objCopy)
2:1 error Expected indentation of 2 spaces but found 4 indent 2:5 error Strings must use singlequote quotes 2:5 error Unnecessarily quoted property 'prop1' found quote-props 3:1 error Expected indentation of 4 spaces but found 8 indent 3:9 error Unnecessarily quoted property 'ex' found quote-props 3:9 error Strings must use singlequote quotes 3:15 error Strings must use singlequote quotes 4:1 error Expected indentation of 4 spaces but found 8 indent 4:9 error Strings must use singlequote quotes 4:9 error Unnecessarily quoted property 'prop2' found quote-props 5:1 error Expected indentation of 6 spaces but found 12 indent 5:13 error Strings must use singlequote quotes 5:13 error Unnecessarily quoted property 'ex' found quote-props 5:19 error Strings must use singlequote quotes 6:1 error Expected indentation of 4 spaces but found 8 indent 7:1 error Expected indentation of 2 spaces but found 4 indent 11:1 error Trailing spaces not allowed no-trailing-spaces 12:21 error Newline required at end of file but not found eol-last ✖ 18 problems (18 errors, 0 warnings) 18 errors and 0 warnings potentially fixable with the `--fix` option.
const obj = { prop1: { ex: 'ex', prop2: { ex: 'ex' } } } const objCopy = JSON.parse(JSON.stringify(obj)) console.log(objCopy)
+ axios@0.21.0 added 1 package from 1 contributor, removed 1 package and audited 2154 packages in 16.811s found 0 vulnerabilities
found 105 vulnerabilities (104 low, 1 high) in 371 scanned packages run `npm audit fix` to fix 102 of them. 3 vulnerabilities require semver-major dependency updates.
Low Prototype Pollution Package lodash Dependency of mongoose Path mongoose > async > lodash More info https://npmjs.com/advisories/1523
+ lodash@4.17.20 updated 4 packages in 24.002s fixed 102 of 105 vulnerabilities in 371 scanned packages 1 package update for 3 vulnerabilities involved breaking changes (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
# Run npm install nodemon@2.0.6 to resolve 3 vulnerabilities SEMVER WARNING: Recommended action is a potentially breaking change Low Prototype Pollution Package minimist Dependency of nodemon Path nodemon > chokidar > fsevents > node-pre-gyp > mkdirp > minimist More info https://npmjs.com/advisories/1179
=== npm audit security report === found 0 vulnerabilities in 206 scanned packages
For example, let’s assume that the front end is hosted on https://a-domain.com and the backend on https://b-domain.com. In such a case, if the front end makes a GET request to https://b-domain.com/posts, it will receive the following error in the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://b-domain.com
// declaring app to use express framework let app = express() // this is using wildcard character app.use(cors()) // this is specifying origin app.use(cors({ origin: 'https://a-domain.com' })) // this is specifying cors for specific route app.get('/', cors(), (req, res) => { });
Difference between Cookie and Local Storage
Primarily both function in similar ways - i.e. both involve persistent storage in the browser. The differences come in slight nuances of their functioning:Vulnerabilities
Local storageclass ValidParenthesesF {
func isValid(_ s: String) -> Bool {
var stg = [Character]()
for char in s {
if char == "(" || char == "[" || char == "{" {
stg.append(char)
} else if char == ")" {
guard stg.count != 0 && stg.removeLast() == "(" else {
return false
}
} else if char == "]" {
guard stg.count != 0 && stg.removeLast() == "[" else {
return false
}
} else if char == "}" {
guard stg.count != 0 && stg.removeLast() == "{" else {
return false
}
}
}
return stg.isEmpty
}
}
The above code will input 0(false).
var i = 10;
var f = 5;
var g = 3;
if (i / f / g)
document.write("hi");
else
document.write("hello");The answer is A because the floating-point division returns a non zero value = 0.66 which evaluates to true and outputs ‘hi’.
var p = 2;
var q = 4;
var r = 6;
if (p > q > r)
document.write("true");
else
document.write("false");The answer is False. It may look like the output can be true because 6 > 4 > 2 is true, but PHP evaluates $z > $y first, which returns a boolean value of 1 or true. This value (true or 1) is compared to the next integer in the chain, bool(1) > $z, which will result in NULL and echo “false.”
Evangelising remote working and promoting entrepreneurship!
We will talk to Arjun and get back to you with their availability, fee details and detailed resume within 24 hours!
Just share your contact details :')
