The virtual DOM (VDOM) is a programming concept where an ideal, or virtual, representation of a UI is kept in memory and synced with the real DOM by a library such as ReactDOM. This process is called reconciliation.
JSX stands for JavaScript syntax extension. JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. It is a JavaScript extension that allows us to describe React’s object tree using a syntax that resembles that of an HTML template.
Data-binding is a technique that binds data sources from the provider and consumer together and synchronizes them.
n one-way binding, the data flow is one-directional i.e information flows in only one direction, and is when the information is displayed, but not updated.
constructor() -> getDerivedStateFromProps() -> render() -> componentDidMount()
Mounting means putting elements into the DOM. React has four built-in methods that gets called, in this order, when mounting a component:
1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()
The render() method is required and will always be called, the others are optional and will be called if you define them.
Number Sample is negative
React considers anything apart from number as non-number and so the answer is “Number Sample is negative”.
The keyword const is just to confuse the candidate, this is more to test his JSX knowledge.
<button onClick=_________>
Click me!
</button>
We do not want to execute a function inside of the event handler.
(The actionType key is compulsory and it is used by the dispatcher to pass updates to the related store)
{
actionType: "",
data: {
title: "Understanding Flux step by step",
author: "Sharvin"
}
}
Synthetic events combine the response of different browser's native events into one API, ensuring that the events are consistent across different browsers.
2011 – An early prototype of React Jordan Walke created FaxJS, the early prototype of React – shipped a search element on Facebook.
React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to the view in the MVC template.
An arrow function is a short way of writing a function to React.
function Greeting({ message }) {
return <h1>{`Hello, ${message}`}</h1>
}
This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements.
class Greeting extends React.Component {
render() {
return <h1>{`Hello, ${this.props.message}`}</h1>
}
}
handleClick = () => {
console.log('this is:', this)
}
HTML:
<button onClick={this.handleClick}>
{'Click me'}
</button>
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={() => this.handleClick()}>Click Me</button>;
}
Yes, JSX is not mandatory for using React. Actually, it is convenient when you don’t want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.
//ChildComponent.jsx
export default class ChildComponent extends React.Component {
render() {
return(
<div>
<h1>This is a child component</h1>
</div>
);
}
}
//ParentComponent.jsx
import ChildComponent from './childcomponent.js';
class ParentComponent extends React.Component {
render() {
return(
<div>
<App />
</div>
);
}
}
You can simply use Array.prototype.map with ES6 arrow function syntax. But you can't iterate using for loop. This is because JSX tags -are trans piled into function calls, and you can't use statements inside expressions. This may change thanks to do expressions which are stage 1 proposal.
Render Props is a simple technique for sharing code between components using a prop whose value is a function. The below component uses render prop which returns a React element.
<DataProvider render={data => (
<h1>{`Hello ${data.target}`}</h1>
)}/>
There are three different ways to achieve programmatic routing/navigation within components.
- Using the withRouter() higher-order function:
The withRouter() higher-order function will inject the history object as a prop of the component. This object provides push() and replace() methods to avoid the usage of context.
- Using <Route> component and render props pattern:
The <Route> component passes the same props as withRouter(), so you will be able to access the history methods through the history prop.
- Using context:
This option is not recommended and treated as unstable API.
HTML:
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>
JS:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Test1" />
<Welcome name="Test2" />
<Welcome name="Test3" />
</div>
);
}
function Welcome(props) {
return <h1>Hello, {props.name} + {2%+2}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Hello, Test1 + 0
Hello, Test2 + 0
Hello, Test3 + 0
Pure functions (Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum function:
Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.)
import React from 'react';
import ReactDOM from 'react-dom/client';
function Role() {
return <h2>I am a Manager! </h2>;
}
function Build() {
return (
<>
<h1>Who works at 7th Floor?</h1>
<Role />
</>
);
}
Who works at 7th Floor? (H1 tag)
I am a Manager!
getDerivedStateFromProps
forceUpdate()