JavaScript code execution involves a sequence of steps managed by the JavaScript engine, primarily through the use of the call stack and execution contexts...
essay
How JS code is executed.
notes
Seek clarity
Before seeking peace in your life, seek clarity.
notes
Not realized
Everything is already there, you are not realized it yet!
essay
സ്വപ്നതുല്യമായ സത്യം
പച്ചച്ചെടികൾ നിറഞ്ഞയെന്റെ മുറിയുടെ മഞ്ഞവിരിപ്പിൽ കിടക്കുമ്പോൾ ഞാനിടക്ക് ഓർക്കും....
essay
ഒരുതരി വെളിച്ചം
ഇപ്പോളൊന്നും എഴുതാറില്ലേന്ന് അവളിടക്കിടെ വന്ന് ചോദിക്കും. എഴുതാനാരോ ഉള്ളിൽക്കിടന്ന്...
essay
തേടൽ
എന്നിൽ നിന്ന് എന്നിലേക്കുള്ള ദേശാടനത്തിൽ ലിപികളറിയാത്ത ഭാഷകളിലെ സംഗീതസ്വരങ്ങൾ...
notes
Motivation for fragments
A common pattern is for a component to return a list of children. In the below example when Column component is rendering the HTML will be invalid as a div is coming in the middle of the table. Whenever we are using Fragments, we can avoid that.
Take this example React snippet:
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
would need to return multiple elements in order for the rendered HTML to be valid. If a parent div was used inside the render() of , then the resulting HTML will be invalid.
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
results in a output of:
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
notes
Keyed Fragments
Fragments declared with the explicit <React.Fragment> syntax may have keys. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// Without the `key`, React will fire a key warning
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
notes
Fragments
A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
Short Syntax
Here is the shorter syntax you can use for declaring fragments. It looks like empty tags:
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
Motivation for fragments in React.