Showing posts with label Reactjs. Show all posts
Showing posts with label Reactjs. Show all posts

Sunday, 11 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>
);
  }
}




Saturday, 10 February 2018

Difference Between Reactjs and Angularjs

Difference Between Reactjs and Angularjs

Technology React JS Angular JS Angular 2
Author Facebook Community Google Google
Type Open Source JS library Fully-featured MVC framework Fully-featured MVC framework
Tool Chain High Low High
Language JSX JavaScript, HTML TypeScript
Learning Curve Low High Medium
Packaging Strong Weak Medium
Rendering Server Side Client Side Server Side
App Architecture None, combined with Flux MVC Component-Based
Data Binding Uni-Directional Bi-Directional Bi-Directional
DOM Virtual DOM Regular DOM Regular DOM
Latest Version 16.2.0 (November 28, 2017) 1.6.8(December 18, 2017) 5.2.3 (31 January 2018)



Question: What are the Advantages of angularjs?
  1. It is a full-fledged framework that can run in any browser or platform.
  2. Two-way data bind which means data sync in view and model.



Question: What are the Advantages of Reactjs?
  1. JSX(JavaScript syntax Extension) is a javascript syntax that enables HTML quotes and usage of HTML tag syntax for subcomponents rendering.
  2. Prompt rendering is features of React that gives a significant edge over Angular.
  3. ReactJS is working on javascript whereas Angular is working on HTML. JavaScript is far more robust, than HTML, that makes React far more simple.