Quick Contact


    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?
    React React Native
    It is released in 2013 It is released in 2015
    In React Web platform is used. In React Native Mobile-Android, iOS is used.
    React used HTML HTML is not used in React Native
    CSS used in React CSS is not used in React Native
    Prerequisites used are JavaScript, HTML, CSS React JS used as a prerequisite.
    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.

    question-answers-on-react js
    Q29). What is Flux and how it differs from Redux?

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

    question-answers-on-react js
    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.
    Redux Flux
    Redux is an open-source JavaScript library used to manage application state Flux is architecture and not a framework.
    It stores state is immutable. It stores mutable state.
    It can only have a single store It can have multiple stores
    It uses the concept of reducer. It uses the concept of dispatcher.
    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 
    		);
    		}
    		});
    	

    Copyright 1999- Ducat Creative, All rights reserved.