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 < 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>
);
  }
}

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.