The Job Interview
Job interviews can be stressful. Developer interviews especially. You might know the code like the back of your hand, but it’s a whole different thing when you have an interviewer putting you on the spot, judging your very existence. Sometimes you know how to use the code, but you don’t know the words in human-speak to explain what you know.
Here’s a couple things you’ll want to know how to explain using that old nearly-deprecated language, English.
Welcome back! In this installment of “human-speak for developers”, we go over some key questions about the language ReactJS.
ReactJS, also known simply as React, is a JavaScript library for building interactive, stateful & reusable UI components. It is one of the most popular JavaScript frameworks today, and is widely used for handling the presentation layer for the web and mobile apps.
Open-sourced at JSConf US in May 2013, React was created by the Facebook developer Jordan Walke. It had been first deployed two years earlier on Facebook’s newsfeed, and has been maintained primarily by Facebook since then.
What are refs in ReactJS?
Refs are used for managing focus, selecting text and triggering animations. It also integrates with third-party libraries. Refs help in getting the reference to a DOM (Document Object Model) node. They return the node that we are referencing. Whenever we need DOM measurements, we can use refs.
What is the purpose of render() function in ReactJS?
render() function is used to update the UI. For this, you have to create a new element and send it to ReactDOM.render(). React elements are immutable and once you create an element, you cannot change its attributes. Thus, elements are like a single frame and it depicts the UI at some point. ReactDOM.render() controls the content of the container node you pass and if there is any DOM element already present in it then it would be replaced when first called.
What are the controlled components and uncontrolled components in ReactJS ?
Controlled component is more advisable to use as it is easier to implement forms in it. In this, form data are handled by React components. A controlled input accepts values as props and callbacks to change that value.
The uncontrolled component is a substitute for controlled components. Here form data is handled by DOM itself. In uncomfortable components, the ref can be used to get the form values from DOM.
What is the difference between functional and class components?
Functional components are those components that returns React elements as a result. These are just simple old JavaScript functions. React 0.14 has given a new shortcut for creating simple stateless components that are known as functional components. These components make use of easy JavaScript functions.
Class components – most of the tech-savvy people are more familiar with class components as they have existed for a while. These components make use of plain old java objects for creating pages, mixins, etc in an identical way. Using React’s create a class factory method, a literal is passed in defining the methods of a new component.
What are Synthetic events?
SyntheticEvent is a cross-browser wrapper around browser’s native event. In React all of your event handlers will be passed instances of SyntheticEvent.The synthetic event works the same way as the event system of browsers, the only difference is that the same code will work across all browsers.
Below is a simple example of how to listen for a click event in react
import React, { Component } from 'react';
class ShowAlert extends Component {
showAlert() {
\ alert("Im an alert");
}
render() {
\ return (
\
\ );
}
}
export default ShowAlert;
What is the difference between Dom and virtual Dom in ReactJS ?
DOM is the acronym for Document Object Model. Dom is also called HTML DOM as it is an abstraction of structured code called HTML for web developers. Dom and HTML code are interrelated as the elements of HTML are known as nodes of DOM. It defines a structure where users can create, alter, modify documents and the content present in it. So while HTML is a text, DOM is an in-memory representation of this text.
Virtual DOM is an abstraction of abstraction as it has been derived from HTML DOM. It is a representation of DOM objects like a lightweight copy. The virtual DOM was not invented by React, it is only used and provided for free.
What is JSX?
JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.
Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.
By using JSX one can write the following JSX/JavaScript code:
<code>
var nav = (
<ul id="nav">
<li><a href="#">Home</li>
<li><a href="#">About
<li><a href=”#”>Clients
<li><a href=”#”>Contact Us
And Babel will transform it into this:
var nav = React.createElement(
"ul",
{ id: "nav" },
React.createElement(
\ "li",
\ null,
\ React.createElement(
\ "a",
\ { href: "#" },
\ "Home"
\ )
),
React.createElement(
\ "li",
\ null,
\ React.createElement(
\ "a",
\ { href: "#" },
\ "About"
\ )
),
React.createElement(
\ "li",
\ null,
\ React.createElement(
\ "a",
\ { href: "#" },
\ "Clients"
\ )
),
React.createElement(
\ "li",
\ null,
\ React.createElement(
\ "a",
\ { href: "#" },
\ "Contact Us"
\ )
)
);
source:https://www.reactenlightenment.com/react-jsx/5.1.html
Explain life Cycle of React JS Component ?
React JS Component Lifecycle
Each component has several “lifecycle methods” that you can override to run code at particular times in the process. Methods prefixed with will are called right before something happens, and methods prefixed with did are called right after something happens.
Mounting
These methods are called when an instance of a component is being created and inserted into the DOM:
constructor()
componentWillMount()
render()
componentDidMount()
Updating
An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
Unmounting
This method is called when a component is being removed from the DOM:
componentWillUnmount()
Other APIs
Each component also provides some other APIs:
setState()
forceUpdate()
Class Properties
defaultProps
displayName
Instance Properties
props
state
Source: https://facebook.github.io/react/docs/react-component.html
What is flux in JavaScript?
Flux is an application architecture for creating data layers in JavaScript applications.It was designed at Facebook along with the React view library.Flux is not a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow.
further reading https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture