Candidate 1:
1) What are promises ?
promise is for asynchronous computation, it's like a placeholder value, will be either resolved or reason why it's not resolved. and it has three states, pending, fulfilled and rejected. And promise is use to resolve the callback hell.
And in our application, all our request services, the ajax call are all wrapped by the promise. So that you can just call that services and use chain it using the .then or .catch.
2) What are lifecycle methods in react ?
creat: constructor, componentWillMount, render, componentDidMount
updating: componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate
unmount: componentWillUnmount,
errorHandler: componentDidCatch
3) React Router ?
Yes, as we know unlike the traditional application which handle the route change in the back end, the SPA handle route change in the client side, with the help of the HTML5 history API.
and in our react application, we use the BrowserRouter component from react-router-dom,
4) What is a component ?
because the react is component based UI library, so the UI you build from React is just a the tree of components. And in react, we usually divide the component into two different type, the 1st one is the component behind the screen, we call it container component, they are used as the parent to container other components, and usually served as data source, like the model behind the screen. And the 2nd component is the component shown on the screen, we call it stateless component or presentation component. The reason we usually have two different component is speratation of concerns, so usually you use container component as the data source for example if you are using redux, the container component will be the one talking to redux, and should not have any DOM manipulation in the container component. For stateless component we usually use it as the presentational component to render the UI, and the stateless component does not has state and lifecycle methods, it accepts props from the parent component, this way, it has better reuseability.
we usually divid component into two categries, 1st is the container component,
5) Which pattern React follows in MVC ?
6) what is window.location() object ?
location gives you domain information such as the host, href, and pathname,
and location is usually used to
- navigate to a new page (.assign()) or
- you can also reload current page by using the .reload() method.
and in the react router, we use the path to determine which component should we render,
Thanks
Candidate 2:
what’s connect:
where to invoke the third party liberay
- include in the index.html
- use npm install, and use import to get it
where to make ajax call in react
we use axios
can we call setState in render function
No, because this will result in endless render
what is High-Order Component
A higher-order component (HOC) is for reusing component logic, and just like High Order Function which takes a function and return another function, HOC is a function that takes a child component and some options then return a container for that child component(take component and return another component). Just like component transforms props into UI, a HOC transforms a component into another component.
for example: The 'connect' function react-redux is a HOC. Think about without this 'connect' function, for every container component that need to deal with redux, you need to write the same code like store.getState() again and again to get current state, but if you use connect, this HOC will wrap all those functions inside of it for reuse.
what is Action creator
a function that returns an action, its used for abstraction, seperation of concern and encapsulation.
Because in this way, your component does not need t know the detail about the action, whether it's a single function that returns an action or it;s a complex thunk function, for component, it only calls this.props.actionName, all other stuff will be handled by the action creator.
promise and callback difference
- promise can be chainnable, so you will not get the callback hell
- promise can handle the error mode convenient, just use the catch function, but in callbacks, you have to handle error by your self such as check the value inside your function, and throw errors if needed, and also you need to wrap your function in a try catch statement
- if your logic depending on more asynchronous computation, such as AJAX, you can use Promise.all which will be runned at the same time
Child Component communicate Parent Component
How views update in React Js
the view will update only when there is state change in react. And the state cahnge can from a props change, or from a setState change,
Explain life cycle methods in React Js
What are state and Stateless components in React Js
what is smart component and dumb component
function component and class component
class Button extends React.Component {
render \(\) {
return \(
<div>
<button onClick={this.props.onClick} id='2017' {...this.props}>{this.props.children}</button>
</div>
\)
}
}
class App extends React.Component {
constructor \(props\) {
super\(props\);
this.state = {
title: 'submit',
name: 'andy',
count: 0
};
}
updateNumber() {
this.setState\({
count: this.state.count + 1
}\)
}
render\(\) {
return \(
<div className="hi">Result {this.state.count}
<Button
onClick={this.updateNumber.bind\(this\)}
style={{backgorund: 'red'}}
className="someClass"
data-crazy="something"
>add</Button>
</div>
\)
}
}
ReactDOM.render( <App /> , document.getElementById('container'));
Candidate 3:
React.JS Developer
Interview Questions-
1) Can you introduce yourself? Tell me a bit about your technical skill set, and your
last project?
2) Tell me about the component lifecycles you have used.
the component lifecycle is from the creation of a component to destroy of a component, and it includes
- creation which has constructor, componentWillMount, render, componentDidMount
- updating, it has componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate
- unmounting: componentWillUnmount
- also we have error handling which has componentDidCatch
3) Of those which have you directly used before.
we use componentDidMount to set up event listener such as click and scroll events
then when the component get destroied we use componentWillUnmount to remove those listeners
and also we use the shouldComponentUpdate to check the if the props changed, so we can prevent unnecessary rendering.
4) Within react.js how do you make sure the child component does not render if the
prop value is the same? shouldComponentUpdate or use React.PureComponent, which will do a shallow prop and state comparison.
5) What is CSR in react.js? ssr???
server side rendering:
we are not using this feature, but I know walmart using SSR, because compared to the client side rendering, the server side rendering have benefits such as performance for customers and better SEO performance.
Because for CSR, you are getting the js file from server and browser will execute those files and then the page will be viewable and interactable only after React is executed, so it's view and interact at same time
but with SSR view will be much quickly, because you are getting the Ready to be rendered HTML from the server, so once you get it, the user can see the page much quickly, so it's viewable first, and then the browser will execute the React so people can interact with it.
6) Difference between presentation component and container component?
for seperation of concern, and for better reuse
because container component have state, and also it has lifecycle methods, and those component usually used as data source, and it usually does not contain any DOM manipulation, it will pass the data to the children component through props, and if you are using redux, the container component will be the one talking to redux,
and for presentation component, it's usually stateless component, so it does not have state, does not have any lifecycle methods, because those component usually used for presentation, and they do not maintain data, they got data from their parent, so for those kind of component, it can be easily reused.
7) What are the basic rules of a reducer in react.js?
reducer is used to response to an action, and return the new state.
rules:
reducers must be pure, which means:
- you should not mutate the arguments
- do not perform side effects like API calls and routing transitions
- do not use non-Pure function, such as Date.now() or Math.random()
8) How comfortable are you with ES6?
we are using a lot of ES6 features when we are writing the React,
9) Can you tell me the new methods in RA? array?
Array.from which is used to transfer an arraylike obj to an array,
Array.of will turn several values into an array
Array.prototype.find : return first find
Array.prototype.includes(ES7): exist or not
Array.prototype.keys()
Array.prototype.values(): returns a newArray Iteratorobject that contains the values
10) The RA has 10 values. I want to insert a value after the 7 th value. How do you do
that in javascript?
11) In jquery, what is the use of prevent default?
when you using it, the default action of the event will not be triggered.
for example: the default action for clicking a navigation is to redirect, but if you are using the prevent default, it will not
12) In HTML5, what are the semantic types you have used?
<header> , <footer>, <section>
13) In section what do you normally add?
We will add a heading <h1>-<h6>, and <div>, we also add our own component in their sometime
14) In CSS, how do you create a central line user?
15) What are the CR positions you have used in CSS?
16) What is your experience in accessibility?
17) Questions for me?
Candidate 4:
Questions asked for Wells Fargo (Apex).
HTML
What is metadata, meta tag
metadata is data that describes data, such as in XML, metadata is stored in attributes and the HTML <head> element can contain metadata, <meta name="description"/>, which is meta tag, it will not be displayed on the page, but used as the page description, author, and also we usually use it to define the 'viewport', so the browser will know how to control the pages's dimension and scaling on different devices,
what is semantic elements
Semantic elements = elements that has a meaning.
for example, non-semantic elements like div and span, it does not have any meaning in there,
but semantic elements such as form, header, footer, article
<section> a group of content,
<nav> element defines a set of navigation links
<aside> element defines some content aside from the content it is placed in (like a sidebar).
Why?? :
- search engines to identify the correct web page content. So it's good for SEO (search engine optimization)
- easier for developer to understand the meaning of each part
what is email, input,address tags, datalist in html5
<input type="email"> : used for input fields that should contain an e-mail address, e-mail address can be automatically validated when submitted
<datalist> tag specifies a list of pre-defined options for an <input> element, it has autocomplete feature, it also have drop-down feature
what is form and webworker
Webworker: it's used for web to run scripts in other threads, because JS is single thread, so using webworker will not block the main thread, they can also perform I/O, and the data between the main thread and work is communicated with postMessage() and onMessage() method.
In our work, I did something with the webworks, I did a small demo for running our analytics in the webwrokers, because we are tracking a lot of the user action, such as the click, scroll, impression , and it has a lot of data to collect, and send those data back to the server. So putting all those stuff into the webworkers will make our website faster.
what are plugins used for in html5
plugins are used to extend the functionality of a web browser, we use the <object data="" > or <embed> to add plug ins, pulgins can be a picture, flash players, or another html.
CSS
what is selectors
css selectors define the elements to which a set of CSS rules apply.
for example we have type selectors, class, id, universal, attribute, we can also use combinators
what is canvas
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
always have an 'id'
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
what is box in css and how it is used
box model is basically a box that wraps around the html elements, and it includes margins, borders, padding, and content.
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
the width = width + 2* border + 2* padding
box-sizing: used to set element's total width and height
by default, if you do now have box-sizing or you use content-box, the width and height will also include the paddings, border, margin
you can set box-sizing: border-box; so the width will be just width, without the paddings, border, margin
so it will be easier for developers to control their elements.
JavaScript
what is closures
closure is a function inside another function, so the inner function can get access to the variable or arguments defined by the outer function, and
- closure can be used in OOP, which means we can keep private variable for our class, for example because the variable scope in ES5 is only the function scope, so you can keep the variable that defined by the 'var' keyword as a private variable, so others cannot change it from outside, but you can define a getter function to get that variable, this is a closure only.
what is promises
about array and its manipulations in javascript
what is expression:
An expression produces a value and can be written wherever a value is expected, such as when you declare var a = b, then b is the expression, or the argument in a function call is also an expression.
a statement performs an action, such as declare a variable (var a = 1; //1 is expression here), or an if statement.
And usually you can use expression to replace statement, for exampke using the conditional operator instead of using if statement. But you can not use statement to replace an expression.
what is window location used for in JS
location gives you domain information such as the host, href, and pathname,
and location is usually used to
- navigate to a new page (.assign()) or
- you can also reload current page by using the .reload() method.
and in the react router, we use the path to determine which component should we render,
ReactJS
role react in MVC architecture
it's the view layer, so you have choices for other part of your application, for example, for the model, you can use redux, or you can use flux, or you can just use the component state to maintain the state, and for middlewares, there are a lot of librareis such as the thunk or redux promise, saga.
for controller you can choose to have controller or not, but if you are using the redux, because of the single flow artechitectur, we usually eliminate the controller, but you can use cont
(method driven MVC such as springMVC, controller is used to execute method based on the coming request, and the methods have the RequestMapping so we can know which method will be executed,
)
components life cycles
how will you pass data from container to child and vice versa
if you are not using redux, you can use props to pass data to children, and you can pass a callback function to child, so when that function is invoked, the data can be passed from children to parent,
but if you are using redux, you can just use the global store.will be e