Question Answers on React JS-III

Q21). Advantage of React over Regular?

1. Easy Development of Dynamic web applications.
2. In React Reusable Components are used that means can call in different files.
3. React has more enhanced performance.
4. Debugging in React is quite easy due to better structuring framework.
5. It has Unidirectional Data Flow.

Q22). How to create React Apps?

For Creating React App, first install react package then install JS, GO TO CMD.

		npm install –g create-react-app
		then you  able to create react application.
		npx create-react-app my first react 
		Create-react-app will set everything you need to run a react 
		application
		< html>
		< script src=”path of script file in HTML”> 
		< body>
		< div id=”mydiv”> 
		< script type=”text/babel”>
		Class Hello extends React.component
		{
		render() {
		return < h1> Hello World! 
		}}
		ReactDOM.render(< hello/>,document.getElementBy Id(‘mydiv’))
		  
	

Q23). Syntax to create event in React?

		Class Event extends React Component(
		work() {
		alert(“Good Work”);
		)
		render() {
		return( 
		< button onClick.(thiswork)Show work>
		
		)})
	

Q24). Reasons to use keys in List in React?

1. Keys are unique identifier.
2. Keys in react while creating lists helps to identity items that have changed, updated or deleted from lists.
3. Keys help to determine the components which are needed to re-rendering all components every time.
4. So, with keys performance of React code is better and save the time loading because only changed component are re-render.

Q25). What are Forms and how to create in React?

Using Forms user can interact with application and enter required information. Form contains certain elements such as text, fields, button, checkbox, radiobutton. Forms containing different tasks such as user authentication, searching, filtering etc.

		Class NameForm extends React Component (
		this.state = (value :’’);
		handleChange(event)(
		this.setState{(value:event.target.value)};
		)
		handleSubmit(event) {
		alert(‘A name will entered’+this.state.value);
		event.preventDefault();
		)
		render() {
		return (
		< form onSubmit=(this.handleSubmit.bind(this))>
		< label>
		Name:
		< input type=’text’ value= (this.state.value)
		onChange(this.handleChange.bind(this))/>
		
		< input type=”submit”value=”Submit”/>
		< /form>
		);
		)
		}
	

Q26). Difference between React and React Native?

Q27). Why setState() is used ?

Using Built-in ‘setState()’ method we can update the state of a Component.

		Class App extends React Components {
		constructor() {
		super();
		this.state = (
		      Message:”Welcome to Ducat”
		};
		thisbuttonPress = this.buttonPress.bind(this);
		)
		buttonpress() {
		   this.setState({
		   message”best place to work”
		});
		)
		render() (
		return (
		< div>
		< h1>(this.state.msg)
		< button onClick = (this.buttonpress) clickme> 
		
		);
		)
		)
	

Q28). Components in Redux?

Store-:

It holds the state of the application.

Action-:

It is the source information for the store.

Reducer-:

It specifies how the application’s state changes in response to action sent to the store.

Q29). What is Flux and how it differs from Redux?

Flux is the application architecture that Facebook uses for building web applications.

1. When we trigger an action, the dispatcher will get notified.
2. Once the dispatcher has dealt with an action, the stores listening to it get triggered.
3. The view gets updated when the state of the store changes.
4. User action at the view is sent to dispatcher to be processed.

Q.30). Use of arrow function in React?

An Arrow function is used to write an expression in React. It allows users to manually bind components easily. The functionality of arrow functions can be very useful when you are working with higher-order functions particularly.

Example-:

		Render()
		{
		Return(
		< MyInput onChange={this.handleChange.bind(this)}/>
		);
		}

		Render() {
		Return(
		< MyInput on Change={ (e) => this.handleOnChange(e)}/>
		);
		}
	

Q31). What is Higher Order Component in React?

1. HOCs are widely used technique in React for applying concepts that involve the component reusability logic.
2. They are not native part of React API and allow users to easily reuse the code and bootstrap abstraction.
3. HOCs are also used to allow simple sharing of behaviours across all of the components in React, adding more advances to efficiency and functioning of application.

Q32). What are Events in React and how events created?

1. Whenever there are actions performed in React, such as hovering of the mouse or pressing a key on the keyword, these actions trigger events.
2. Events then perform set activities as a response to these triggers.
3. Handling an event in React is very similar to that in DOM.

		Class Display extends React.Component({
		Show(evt){
		#code inside
		};
		Render();
		Return(
		< div onClick={this.show}>Click Here 
		);
		}
		});