DataBinding

Question 1

Is two way databinding supported with ReactJS ?

Answer 1

Implicitly it is not supported

Question 2

What is two way binding ?

Answer 2

Access data from source and binding to the UI.
Update UI changes back to source.

Question 3

Two way binding example ?

Answer 3

Question 4

Drawback of React ?

Answer 4

Supports only one-way binding

Question 5

Code Example

Answer 5

Question 6

Event for 2 way binding

Answer 6

OnChange only

Question 7

Default JS event args

Answer 7

this(info about object) and event (event details)

Question 8

React Event arg

Answer 8

React can use only one arg, which provides access to both object and event details.
event (object and event related details ) (this is used in JS)
event.target.id, name, value, calssName
event.clientX, clientY, shitKey, ctrlKey

Question 9

React and Java Script two way binding differences ?

Answer 9

Question 10

Code Example

Answer 10

// FlashCard.js
import React from ‘react’;

class FlashCard extends React.Component {
handleChange = (event) => {
// Call the parent’s onChange method with the updated value
this.props.onChange(event.target.value);
};

render() {
return (
<div>
<label>{this.props.label}</label>
<input
type=”text”
value={this.props.value}
onChange={this.handleChange}
/>
</div>
);
}
}

export default FlashCard;

Question 11

JS and React Examples

Answer 11

<input></input>

<p></p>

<script>
const inputElement = document.getElementById('myInput');
  const outputElement = document.getElementById('output');

  inputElement.addEventListener('input', function(event) {
    outputElement.textContent = event.target.value;
  });
</script>

import React, { useState } from ‘react’;

function MyComponent() {
const [inputValue, setInputValue] = useState(‘’);

return (
<div>
<input
type=”text”
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<p>{inputValue}</p>
</div>
);
}

Question 12

Different types of Binding

Answer 12

Data Binding (one way, two way)
Style Binding
Class Binding
Event Binding

Question 13

Style Binding

Answer 13

Apply styles dynamically to any element

Question 14

JavaScript Style Binding

Answer 14

<input></input>
document.getElementById(“userName”).style.cssAttribute=”value”
CSS => background-color => backGroundColor
=> font-style => fontStyle

Question 15

React Style Binding

Answer 15

<input type=”text” style={{attributeName:value,attributeName:value}} /> (value must be string, style attributes are javascript objects)

<input></input> => Invalid
<input type=”text” style={{color:’red’}} => valid (inline Styles)

Question 16

Code Example

Answer 16

Question 17

Html style types

Answer 17

1) inline (faster, not reusable)
2) embedded (not reusable)
3) external (reusable)

Question 18

What is difference between display:none and visibility:hidden

Answer 18

display:none hides and allocated space is removed
visibility:hidden allocated space is retained

Question 19

Issues with StyleBinding

Answer 19

Style is inline and it is good with individual elements, not reusable across elements.

Question 20

Event Binding in React

Answer 20

Event is a message sent by a sender to its subscriber in order to notify the change.
Design Pattern - “Observer” . it is under “Behavioral Patterns”
Event uses “Delegate” mechanism[Function Pointer]

Question 21

Structural Pattern

Answer 21

Question 22

Behavior Patterns

Answer 22

Question 23

what is an event ?

Answer 23

Every event is a browser event
in JS html elements can use the browser events
React cant use “browser” events [Browser events are related BOM]
React uses a virtual DOM library called “SyntheticEvents” , which map to browser events.

Question 24

Actual and Synthetic events

Answer 24

ReactJS is builtin with typescript
Every event extends “SyntheticEvent” [interface]

Question 25

What is a onclick event ?

Answer 25

Question 26

What is an Event Handler ?

Answer 26

Events are configured for elements using an EventListener or EventHandler
React uses EventHandler for Synthetic events
Syntax:
<button onClick={insertClick}>
onClick={insertClick} => EventHandler
onClick => Event

onChange : ChangeEventHandler : EventHandler
onClick : ClickEventHandler : EventHandler

Question 27

How many ways event handler can be configured

Answer 27

1) Inline Functionality
Syntax: <button onClick={function(){alert(‘insert clicked’);}}>Insert</button>
<button onClick={() => {alert(‘insert clicked’);}}>Insert</button>
2) Embedded Functionality
Syntax:
function InsertClick(){}
<button onClick={InsertClick}>Insert</button>

Question 28

What is the advantage of Embedded Event Handler ?

Answer 28

it can be used across various requests

Question 29

What are Event arguments ?

Answer 29

Every event in React have a default argument, which maps to “Event” base
Event base can provide access to both element related properties and event properties.
Event properties are accessible using “target”
e.target.value, e.target.Id
Event properties are accessible directly
e.clientX, e.clientY, e.shiftKey, e.which, e.ctrlKey

Question 30

What is event propagation ?

Answer 30

Child event is propagated to the parent event. Stop propagation can prevent it.

Question 31

What is prevent default ?

Answer 31

HTML form provides generic buttons (Predefined functionality)
a) Submit <button> Submit form data to server
b) Reset <button> - Reset form data
<button> - default is submit
HTML form provides non-generic buttons ( without Predefined functionality)
<button></button></button></button></button>

Generic elements have predefined functionality which firesup after the custom functions that you defined for an element

Question 32

Can we have multiple forms in a component ?

Answer 32

Yes

Question 33

Can we configure a form within another form (nested forms) ?

Answer 33

No. Possible with Pusedo froms

<form>
<div form="></div>
</form>

Question 34

AJAX

Answer 34

used for partial post forms

Question 35

Can we have multiple submit buttons ?

Answer 35

Yes

Question 36

DOM Hierarchy

Answer 36

Question 37

Form Submit

Answer 37

Question 38

How to handle onload action in react ?

Answer 38

React does not have load event for component. It has “Mount” event. “Mount” event is defined for handling actions when the component is mounted onto page.
Function component mount event is defined by using a Hook called “useEffect”

useEffect(() => {},[dependencies]);

useEffect(() => {
setUserName(‘John’);
),[]);

Question 39

Various Synthetic Events in React

Answer 39

1. Syntetic Mouce Events
   * onMouseOver
   * onMosueOut
   * onMouseUp
   * onMouseDown
   * onMouseMove
2. Synthetic Keyboard Events
   * onKeyUp
   * onKeyDown
   * onKeyPress
   Used with KeyEvent Properties
   - KeyCode, charCode,whick, shiftKey,CtrlKey, altKey

Question 40

When to use KeyUp, KeyDown, KeyPress ?

Answer 40

KeyPress - Use it for ASCII chars
KeyUp, KeyDown - Use it for chars

Question 41

Element State Events

Answer 41

• onBlur
• onFocus
• onChange
• onSelectStart

Question 42

Double Click Event

Answer 42

Question 43

Disable Right Click

Answer 43

Actual DOM, virtual DOM deals with component only. Synthetic events work only for components.

Question 44

ClipBoard Events

Answer 44

onCut
onCopy
onPaste

Question 45

Touch Events

Answer 45

onTouchStart
onTouchEnd
onTouchMove

Question 46

Timer Events

Answer 46

setTimeout()
clearTimeout()
setInterval()
clearInterval()

Question 47

setTimeout()

Answer 47

Question 48

clearTimeout()

Answer 48

Question 49

setInterval()

Answer 49

Question 50

Form Events

Answer 50

1. These events will fireup only with generic buttons(submit, reset)
   Syntax : <form onSubmit={handleSubmit} onReset={handleReset}>
   <button>Submit</button>
   <button>Cancel</button>

</form>
2.