
Quick Contact
React Tutorial
- React JS Introduction
- How to install react?
- React Features
- React vs React Native
- React JS VUE Application
- State V/S Props
- React Props
- REACT STATE
- React JSX?
- Conditional Rendering
- React Constructor
- Props Validation
- React Component API
- React Forms
- React Event
- Flux v/s MVC
- React Flux Concept
- React Fragment
- React Lists and Keys
- Error Boundaries
- React Portals
- React Animation
- React Redux
- React CSS
- React Refs
- React Router
Questions & Answers
Q21). Advantage of React over Regular?
- Easy Development of Dynamic web applications.
- In React Reusable Components are used that means can call in different files.
- React has more enhanced performance.
- Debugging in React is quite easy due to better structuring framework.
- 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”> script> < body> < div id=”mydiv”> div> < script type=”text/babel”> Class Hello extends React.component { render() { return < h1> Hello World! h1> }} ReactDOM.render(< hello/>,document.getElementBy Id(‘mydiv’)) script> body> html>
Q23). Syntax to create event in React?
Class Event extends React Component( work() { alert(“Good Work”); ) render() { return( < button onClick.(thiswork)Show work> button> )})
Q24). Reasons to use keys in List in React?
- Keys are unique identifier.
- Keys in react while creating lists helps to identity items that have changed, updated or deleted from lists.
- Keys help to determine the components which are needed to re-rendering all components every time.
- 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))/> label> < 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) h1> < button onClick = (this.buttonpress) clickme> button> div> ); ) )
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.

- When we trigger an action, the dispatcher will get notified.
- Once the dispatcher has dealt with an action, the stores listening to it get triggered.
- The view gets updated when the state of the store changes.
- 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?
- HOCs are widely used technique in React for applying concepts that involve the component reusability logic.
- They are not native part of React API and allow users to easily reuse the code and bootstrap abstraction.
- 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?
- Whenever there are actions performed in React, such as hovering of the mouse or pressing a key on the keyword, these actions trigger events.
- Events then perform set activities as a response to these triggers.
- 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 div> ); } });