Tuesday 13 February 2018

JSON.stringify - What is JSON.stringify? and how to use?

JSON.stringify - What is JSON.stringify? and how to use?

Question: What is JSON.stringify()?
The JSON.stringify() method converts a JavaScript value to a JSON string.
It can also convert a Object/Array to JSON String.


Question: Give few example of JSON.stringify()?
Following are few example of JSON.stringify()
JSON.stringify({});                  // {} 


JSON.stringify(true);                // 'true'


JSON.stringify('foo');               // '"foo"'


JSON.stringify([1, 'false', false]); // '[1,"false",false]'


JSON.stringify({ x: 5 });            // '{"x":5}'


JSON.stringify({ x: 5, y: 6 });// '{"x":5,"y":6}'


JSON.stringify({ x: 5, y: 6 });// '{"x":5,"y":6}'



Question: What is use of 2nd parameter of JSON.stringify()?
2nd parameter of JSON.stringify() is a replacer.
It can be an array OR can be function.




Question: Give an example of callback function of replacer of JSON.stringify()?
var objectData={}
objectData.a='Apple';
objectData.b=undefined;
objectData.c=';
   
objectData=JSON.stringify(objectData, function(k, v) {                
if (typeof v === 'undefined') {
  return '';
}else{
    return v;
}
});

this replacer function will replace the undefined with empty space.




Question: Give an example of array of replacer of JSON.stringify()?
var foo = {name: 'web tech', week: 350, transport: 'car', month: 7};
JSON.stringify(foo, ['week', 'month']);  //"{"week":350,"month":7}"

IT will return those which match with array




Question: Difference between JSON.stringify and JSON.parse?
JSON.stringify convert a Javascript object into JSON text(JOSN string).
JSON.parse convert a JSON text into into Javascript object.

Both are opposite to each other.

Monday 12 February 2018

React JS Interview Questions and Answers for beginner

React JS Interview Questions and Answers for beginner

Question: How to use JavaScript expressions in reactJS?
To use the expression in reactjs, you need to wrap the expression with with curly brackets {}.
For Example:
{1+1}
{2*2}
{30/3}
{i == 1 ? 'True!' : 'False'}


Question: How to use JavaScript Expressions in reactJS?

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 40,
         color: '#FF0000'
      }
      return (
         <div>
<h1>
Header</h1>
</div>
);
   }
}
export default App;




Question: What is state in ReactJS?
State is the place where the data comes from.
We should try to make our state simple and minimize the number of stateful components.

class App extends React.Component {
   constructor(props) {
      super(props);
  
      this.state = {
         header: "This is Header from State",
         content: "This is Content from State"
      }
   }
   render() {
      return (
         <div>
<h1>
{this.state.header}</h1>
<h2>
{this.state.content}</h2>
</div>
);
   }
}



Question: How to Validating Props?

class App extends React.Component {
   render() {
      return ( 
         <div>
<h1>
 Hello, {this.props.name} </h1>
<h3>
Your Mobile: {this.props.propNumber}</h3>
<h3>
Address: {this.props.propString}</h3>
</div>
);
   }
}
App.propTypes = {
   name: PropTypes.string,
   propNumber: PropTypes.number,
   propString: PropTypes.string,
};
App.defaultProps = {
   name: 'Dear User',   
   propNumber: 9888888888,
   propString: "#8555, Sector 45D, Chandigarh"
}



Question: What is difference between setState and forceUpdate() and findDOMNode() in reactJS?
setState() It is used to update the state of the component.It will only add changes to the original state.
forceUpdate() It is used to forceUpdate the state of the component.It will only update to the original state.
findDOMNode() It is used to forceUpdate the state of the component.It will only update to the original state.


Question: Give working example of forceUpdate() in reactJS?

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
<button onclick="{this.forceUpdateHandler}">Click to Update</button>
            <br />
<h4>
Random number: {Math.random()}</h4>
</div>
);
   }
}



Question: How to use Loop in ReactJS?

var rows = [];
for (var i = 0; i &lt; numrows; i++) {
    rows.push(<objectrow key="{i}">);
}
return tbody(rows);  </objectrow>



Question: What is meaning of ... in ReactJS?
... is called Spread Attributes.
If you already have props as an object, and you want to pass it in JSX, you can use ... as a "spread" operator to pass the whole props object. For Example:

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five'];



Question: How to set focus in reactJS?
You can use componentDidMount for the same.

class App extends React.Component{
  componentDidMount(){
    this.nameInput.focus();
  }
  render() {
    return(
      <div>
<input defaultvalue="Won't focus" />
        <input ref="{(input)" /> { this.nameInput = input; }} 
          defaultValue="will focus"
        /&gt;
      </div>
);
  }
}