1. What is state and props and its difference?
Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function
2. How you pass data through props?
This is the easiest direction in React to transfer data. If I have access to data in my parent component that I need my child component to have access to, I can pass it as a prop to the child when I instantiate it within the parent.
In my example, if I need to pass something from the App to the ToDoList:
class App extends React.Component {
render() {
[... somewhere in here I define a variable listName which I think will be useful as data in my ToDoList component...]
return (
< div >
< InputBar/>
< ToDoList listNameFromParent={listName}/>
);
}
}
Now in the ToDoList component, if I use this.props.listNameFromParent I will have access to that data.
Child to Parent — Use a callback and states
This one is a bit trickier. If I have data in my child that my parent needs access to, I can do the following:
1.Define a callback in my parent which takes the data I need in as a parameter.
2.Pass that callback as a prop to the child (see above).
3.Call the callback using this.props.[callback] in the child (insert your own name where it says [callback] of course), and pass in the data as the argument.
4.How to pass a parameter to an event handler or callback?
You can use an arrow function to wrap around an event handler and pass parameters:
< button onClick={() => this.handleClick(id)} />
This is an equivalent to calling .bind:
< button onClick={this.handleClick.bind(this, id)} />
5.How to add Google Analytics in React?
Add a listener on the history object to record each page view:
history.listen(function (location) {
window.ga('set', 'page', location.pathname + location.search)
window.ga('send', 'pageview', location.pathname + location.search)
})
6.What is significance of refs?
Similarly to keys, refs are added as an attribute to a React.createElement() call, such as < li ref="someName"/>. The ref serves a different purpose, it provides us quick and simple access to the DOM Element represented by a React Element. Refs can be either a string or a function. Using a string will tell React to automatically store the DOM Element as this.refs[refValue].For example:
class List extends Component {
constructor(p){
super(p)
}
_printValue(){
console.log(this.refs.someThing.value)
}
render() {
return < div onClick={e => this._printValue()}>
< p>test
< input type="text" ref="someThing" />
}
}
DOM.render(< List />, document.body)
this.refs.someThing inside componentDidUpdate() used to refer to a special identifier that we could use with React.findDOMNode(refObject) – which would provide us with the DOM node that exists on the DOM at this very specific instance in time. Now, React automatically attaches the DOM node to the ref, meaning that this.refs.someThing will directly point to a DOM Element instance.
Additionally, a ref can be a function that takes a single input. This is a more dynamic means for you assign and store the DOM nodes as variables in your code. For example:
class List extends Component {
constructor(p){
super(p)
}
_printValue(){
console.log(this.myTextInput.value)
}
render() {
return < div onClick={e => this._printValue()}>
< p>test
< input type="text" ref={node => this.myTextInput = node} />
}
}
DOM.render(< List />, document.body)
7.Why can’t browser read jsx? What is reason and how this issue is solved?
Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI. It is resolved by ReactDOM which is actually creating a virtual DOM.
8.Explain lifecycle methods of React components
componentWillMount: Executed before rendering and is used for App level configuration in your root component.componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur
componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.
shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop.
componentWillUpdate: Executed before re-rendering the component when there are props & state changes confirmed by shouldComponentUpdate() which returns true.
componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes.
componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
9.What is redux and which are list of components involved in Redux
Redux is a predictable state container for JavaScript apps based on the Flux design pattern. Redux can be used together with React, or with any other view library. It is tiny (about 2kB) and has no dependencies.
10.What is difference between Shadow Dom and real DOM?
The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The Virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
11.What are primary reasons to use Reactjs
In spite of all front-end frameworks, React JS is gaining massive popularity with SEO friendly applications and easily understandable methodologies. It was the perfect fit for our needs. The primary reasons for its popularity are as follows:
12.Why immutability in important in React?
There are generally two approaches to changing data. The first approach is to mutate the data by directly changing the data’s values. The second approach is to replace the data with a new copy which has the desired changes.
