From 0b28af646056814c09a08b6b0d6b027e06a674ed Mon Sep 17 00:00:00 2001 From: Kavindu Udara Date: Thu, 13 Feb 2025 02:18:01 +0530 Subject: [PATCH] Updates --- 404.html | 2 +- .../_buildManifest.js | 0 .../_ssgManifest.js | 0 ...444624.js => 4bd1b696-692f10ba759dfb60.js} | 0 ...3df4d622207.js => 517-fd2ad64921f0a1dc.js} | 0 _next/static/chunks/528-65f71005039027ed.js | 1 + .../chunks/795d4814-6ed8d3b2717688f6.js | 1 + .../chunks/8e1d74a4-cfd329457e90dfbc.js | 1 + .../app/[slug]/page-1ad8078ba5d2eeda.js | 1 + .../app/[slug]/page-3040c8084edc429c.js | 1 - ...5de3bc49f5.js => page-b4c74ff42944bf3b.js} | 0 ...e7c172535c.js => page-28d4954a8febb4bc.js} | 0 .../static/chunks/webpack-20770062d26aa750.js | 1 - .../static/chunks/webpack-c1b67ad045facb22.js | 1 + ...ffd469baeb000.css => 1d9abe454822820e.css} | 2 +- assets/readmes/Components in React.md | 144 +++++++++++ .../readmes/Conditional Rendering in React.md | 129 ++++++++++ assets/readmes/Deploying a React App.md | 105 ++++++++ assets/readmes/Event Handling in React.md | 190 ++++++++++++++ assets/readmes/Lists and Keys in React.md | 136 ++++++++++ assets/readmes/Props in React.md | 59 +++++ assets/readmes/React Lifecycle and Hooks.md | 214 +++++++++++++++ assets/readmes/React Reusable Components.md | 83 ++++++ assets/readmes/React Virtual DOM.md | 95 +++++++ assets/readmes/React fundamentals.md | 52 ++++ ...world Examples of apps build with React.md | 38 +++ ...lopment Environment for React with Vite.md | 88 +++++++ assets/readmes/State in React.md | 104 ++++++++ assets/readmes/Styling in React.md | 235 +++++++++++++++++ build-and-deploy-project-to-github.html | 4 +- build-and-deploy-project-to-github.txt | 100 ++++++- components-in-react.html | 123 +++++++++ components-in-react.txt | 152 +++++++++++ conditional-rendering-in-react.html | 84 ++++++ conditional-rendering-in-react.txt | 137 ++++++++++ deploying-a-react-app.html | 84 ++++++ deploying-a-react-app.txt | 113 ++++++++ event-handling-in-react.html | 148 +++++++++++ event-handling-in-react.txt | 199 ++++++++++++++ getting-started-guide.html | 2 +- getting-started-guide.txt | 7 +- index.html | 11 +- index.txt | 6 +- lists-and-keys-in-react.html | 104 ++++++++ lists-and-keys-in-react.txt | 144 +++++++++++ my-first-blog-post.html | 4 +- my-first-blog-post.txt | 53 +++- props-in-react.html | 51 ++++ props-in-react.txt | 67 +++++ react-fundamentals.html | 85 ++++++ react-fundamentals.txt | 60 +++++ react-lifecycle-and-hooks.html | 173 +++++++++++++ react-lifecycle-and-hooks.txt | 222 ++++++++++++++++ react-reusable-components.html | 75 ++++++ react-reusable-components.txt | 91 +++++++ react-virtual-dom.html | 108 ++++++++ react-virtual-dom.txt | 103 ++++++++ ...rld-examples-of-apps-build-with-react.html | 9 + ...orld-examples-of-apps-build-with-react.txt | 46 ++++ ...pment-environment-for-react-with-vite.html | 86 +++++++ ...opment-environment-for-react-with-vite.txt | 96 +++++++ state-in-react.html | 96 +++++++ state-in-react.txt | 112 ++++++++ styling-in-react.html | 186 ++++++++++++++ styling-in-react.txt | 243 ++++++++++++++++++ ...-jsx-tsx-and-how-it-differs-from-html.html | 4 +- ...s-jsx-tsx-and-how-it-differs-from-html.txt | 88 ++++++- whatsapp.html | 4 +- whatsapp.txt | 152 ++++++++++- 69 files changed, 5282 insertions(+), 33 deletions(-) rename _next/static/{yWoAn8OvJELat1C2W9Cyt => atdZIXSGzkPFBsJtwNKu0}/_buildManifest.js (100%) rename _next/static/{yWoAn8OvJELat1C2W9Cyt => atdZIXSGzkPFBsJtwNKu0}/_ssgManifest.js (100%) rename _next/static/chunks/{4bd1b696-20882bf820444624.js => 4bd1b696-692f10ba759dfb60.js} (100%) rename _next/static/chunks/{517-b37db3df4d622207.js => 517-fd2ad64921f0a1dc.js} (100%) create mode 100644 _next/static/chunks/528-65f71005039027ed.js create mode 100644 _next/static/chunks/795d4814-6ed8d3b2717688f6.js create mode 100644 _next/static/chunks/8e1d74a4-cfd329457e90dfbc.js create mode 100644 _next/static/chunks/app/[slug]/page-1ad8078ba5d2eeda.js delete mode 100644 _next/static/chunks/app/[slug]/page-3040c8084edc429c.js rename _next/static/chunks/app/_not-found/{page-0043d75de3bc49f5.js => page-b4c74ff42944bf3b.js} (100%) rename _next/static/chunks/app/{page-91639fe7c172535c.js => page-28d4954a8febb4bc.js} (100%) delete mode 100644 _next/static/chunks/webpack-20770062d26aa750.js create mode 100644 _next/static/chunks/webpack-c1b67ad045facb22.js rename _next/static/css/{7cdffd469baeb000.css => 1d9abe454822820e.css} (63%) create mode 100644 assets/readmes/Components in React.md create mode 100644 assets/readmes/Conditional Rendering in React.md create mode 100644 assets/readmes/Deploying a React App.md create mode 100644 assets/readmes/Event Handling in React.md create mode 100644 assets/readmes/Lists and Keys in React.md create mode 100644 assets/readmes/Props in React.md create mode 100644 assets/readmes/React Lifecycle and Hooks.md create mode 100644 assets/readmes/React Reusable Components.md create mode 100644 assets/readmes/React Virtual DOM.md create mode 100644 assets/readmes/React fundamentals.md create mode 100644 assets/readmes/Real-world Examples of apps build with React.md create mode 100644 assets/readmes/Setting Up the Development Environment for React with Vite.md create mode 100644 assets/readmes/State in React.md create mode 100644 assets/readmes/Styling in React.md create mode 100644 components-in-react.html create mode 100644 components-in-react.txt create mode 100644 conditional-rendering-in-react.html create mode 100644 conditional-rendering-in-react.txt create mode 100644 deploying-a-react-app.html create mode 100644 deploying-a-react-app.txt create mode 100644 event-handling-in-react.html create mode 100644 event-handling-in-react.txt create mode 100644 lists-and-keys-in-react.html create mode 100644 lists-and-keys-in-react.txt create mode 100644 props-in-react.html create mode 100644 props-in-react.txt create mode 100644 react-fundamentals.html create mode 100644 react-fundamentals.txt create mode 100644 react-lifecycle-and-hooks.html create mode 100644 react-lifecycle-and-hooks.txt create mode 100644 react-reusable-components.html create mode 100644 react-reusable-components.txt create mode 100644 react-virtual-dom.html create mode 100644 react-virtual-dom.txt create mode 100644 real-world-examples-of-apps-build-with-react.html create mode 100644 real-world-examples-of-apps-build-with-react.txt create mode 100644 setting-up-the-development-environment-for-react-with-vite.html create mode 100644 setting-up-the-development-environment-for-react-with-vite.txt create mode 100644 state-in-react.html create mode 100644 state-in-react.txt create mode 100644 styling-in-react.html create mode 100644 styling-in-react.txt diff --git a/404.html b/404.html index 9657627..b1bd426 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -404: This page could not be found.Kavindu Udara

404

This page could not be found.

\ No newline at end of file +404: This page could not be found.Kavindu Udara

404

This page could not be found.

\ No newline at end of file diff --git a/_next/static/yWoAn8OvJELat1C2W9Cyt/_buildManifest.js b/_next/static/atdZIXSGzkPFBsJtwNKu0/_buildManifest.js similarity index 100% rename from _next/static/yWoAn8OvJELat1C2W9Cyt/_buildManifest.js rename to _next/static/atdZIXSGzkPFBsJtwNKu0/_buildManifest.js diff --git a/_next/static/yWoAn8OvJELat1C2W9Cyt/_ssgManifest.js b/_next/static/atdZIXSGzkPFBsJtwNKu0/_ssgManifest.js similarity index 100% rename from _next/static/yWoAn8OvJELat1C2W9Cyt/_ssgManifest.js rename to _next/static/atdZIXSGzkPFBsJtwNKu0/_ssgManifest.js diff --git a/_next/static/chunks/4bd1b696-20882bf820444624.js b/_next/static/chunks/4bd1b696-692f10ba759dfb60.js similarity index 100% rename from _next/static/chunks/4bd1b696-20882bf820444624.js rename to _next/static/chunks/4bd1b696-692f10ba759dfb60.js diff --git a/_next/static/chunks/517-b37db3df4d622207.js b/_next/static/chunks/517-fd2ad64921f0a1dc.js similarity index 100% rename from _next/static/chunks/517-b37db3df4d622207.js rename to _next/static/chunks/517-fd2ad64921f0a1dc.js diff --git a/_next/static/chunks/528-65f71005039027ed.js b/_next/static/chunks/528-65f71005039027ed.js new file mode 100644 index 0000000..be332d6 --- /dev/null +++ b/_next/static/chunks/528-65f71005039027ed.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[528],{9721:e=>{"use strict";var t=Object.prototype.hasOwnProperty,n=Object.prototype.toString,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,l=function(e){return"function"==typeof Array.isArray?Array.isArray(e):"[object Array]"===n.call(e)},o=function(e){if(!e||"[object Object]"!==n.call(e))return!1;var r,i=t.call(e,"constructor"),l=e.constructor&&e.constructor.prototype&&t.call(e.constructor.prototype,"isPrototypeOf");if(e.constructor&&!i&&!l)return!1;for(r in e);return void 0===r||t.call(e,r)},a=function(e,t){r&&"__proto__"===t.name?r(e,t.name,{enumerable:!0,configurable:!0,value:t.newValue,writable:!0}):e[t.name]=t.newValue},u=function(e,n){if("__proto__"===n){if(!t.call(e,n))return;if(i)return i(e,n).value}return e[n]};e.exports=function e(){var t,n,r,i,s,c,f=arguments[0],p=1,h=arguments.length,d=!1;for("boolean"==typeof f&&(d=f,f=arguments[1]||{},p=2),(null==f||"object"!=typeof f&&"function"!=typeof f)&&(f={});p{var t=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g,n=/\n/g,r=/^\s*/,i=/^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/,l=/^:\s*/,o=/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};])+)/,a=/^[;\s]*/,u=/^\s+|\s+$/g;function s(e){return e?e.replace(u,""):""}e.exports=function(e,u){if("string"!=typeof e)throw TypeError("First argument must be a string");if(!e)return[];u=u||{};var c=1,f=1;function p(e){var t=e.match(n);t&&(c+=t.length);var r=e.lastIndexOf("\n");f=~r?e.length-r:f+e.length}function h(){var e={line:c,column:f};return function(t){return t.position=new d(e),y(r),t}}function d(e){this.start=e,this.end={line:c,column:f},this.source=u.source}d.prototype.content=e;var m=[];function g(t){var n=Error(u.source+":"+c+":"+f+": "+t);if(n.reason=t,n.filename=u.source,n.line=c,n.column=f,n.source=e,u.silent)m.push(n);else throw n}function y(t){var n=t.exec(e);if(n){var r=n[0];return p(r),e=e.slice(r.length),n}}function k(e){var t;for(e=e||[];t=x();)!1!==t&&e.push(t);return e}function x(){var t=h();if("/"==e.charAt(0)&&"*"==e.charAt(1)){for(var n=2;""!=e.charAt(n)&&("*"!=e.charAt(n)||"/"!=e.charAt(n+1));)++n;if(n+=2,""===e.charAt(n-1))return g("End of comment missing");var r=e.slice(2,n-2);return f+=2,p(r),e=e.slice(n),f+=2,t({type:"comment",comment:r})}}return y(r),function(){var e,n=[];for(k(n);e=function(){var e=h(),n=y(i);if(n){if(x(),!y(l))return g("property missing ':'");var r=y(o),u=e({type:"declaration",property:s(n[0].replace(t,"")),value:r?s(r[0].replace(t,"")):""});return y(a),u}}();)!1!==e&&(n.push(e),k(n));return n}()}},6046:(e,t,n)=>{"use strict";var r=n(6658);n.o(r,"useRouter")&&n.d(t,{useRouter:function(){return r.useRouter}})},4919:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=null;if(!e||"string"!=typeof e)return n;var r=(0,i.default)(e),l="function"==typeof t;return r.forEach(function(e){if("declaration"===e.type){var r=e.property,i=e.value;l?t(r,i,e):i&&((n=n||{})[r]=i)}}),n};var i=r(n(466))},9424:(e,t,n)=>{"use strict";function r(){}function i(){}n.d(t,{HB:()=>i,ok:()=>r})},4737:(e,t,n)=>{"use strict";n.d(t,{d:()=>i});let r={};function i(e,t){let n=t||r;return l(e,"boolean"!=typeof n.includeImageAlt||n.includeImageAlt,"boolean"!=typeof n.includeHtml||n.includeHtml)}function l(e,t,n){if(e&&"object"==typeof e){if("value"in e)return"html"!==e.type||n?e.value:"";if(t&&"alt"in e&&e.alt)return e.alt;if("children"in e)return o(e.children,t,n)}return Array.isArray(e)?o(e,t,n):""}function o(e,t,n){let r=[],i=-1;for(;++i{"use strict";n.d(t,{B:()=>l});var r=n(8090),i=n(565);let l={partial:!0,tokenize:function(e,t,n){return function(t){return(0,i.On)(t)?(0,r.N)(e,l,"linePrefix")(t):l(t)};function l(e){return null===e||(0,i.HP)(e)?t(e):n(e)}}}},8090:(e,t,n)=>{"use strict";n.d(t,{N:()=>i});var r=n(565);function i(e,t,n,i){let l=i?i-1:Number.POSITIVE_INFINITY,o=0;return function(i){return(0,r.On)(i)?(e.enter(n),function i(a){return(0,r.On)(a)&&o++{"use strict";n.d(t,{BM:()=>a,CW:()=>r,Ee:()=>f,HP:()=>c,JQ:()=>o,Ny:()=>d,On:()=>p,cx:()=>l,es:()=>h,lV:()=>i,ok:()=>u,ol:()=>s});let r=m(/[A-Za-z]/),i=m(/[\dA-Za-z]/),l=m(/[#-'*+\--9=?A-Z^-~]/);function o(e){return null!==e&&(e<32||127===e)}let a=m(/\d/),u=m(/[\dA-Fa-f]/),s=m(/[!-/:-@[-`{-~]/);function c(e){return null!==e&&e<-2}function f(e){return null!==e&&(e<0||32===e)}function p(e){return -2===e||-1===e||32===e}let h=m(/\p{P}|\p{S}/u),d=m(/\s/);function m(e){return function(t){return null!==t&&t>-1&&e.test(String.fromCharCode(t))}}},938:(e,t,n)=>{"use strict";function r(e,t,n,r){let i;let l=e.length,o=0;if(t=t<0?-t>l?0:l+t:t>l?l:t,n=n>0?n:0,r.length<1e4)(i=Array.from(r)).unshift(t,n),e.splice(...i);else for(n&&e.splice(t,n);o0?(r(e,e.length,0,t),e):t}n.d(t,{V:()=>i,m:()=>r})},7492:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(565);function i(e){return null===e||(0,r.Ee)(e)||(0,r.Ny)(e)?1:(0,r.es)(e)?2:void 0}},5234:(e,t,n)=>{"use strict";n.d(t,{y:()=>l});var r=n(938);let i={}.hasOwnProperty;function l(e){let t={},n=-1;for(;++n{"use strict";function r(e){return e.replace(/[\t\n\r ]+/g," ").replace(/^ | $/g,"").toLowerCase().toUpperCase()}n.d(t,{B:()=>r})},1028:(e,t,n)=>{"use strict";function r(e,t,n){let r=[],i=-1;for(;++ir})},3435:(e,t,n)=>{"use strict";n.d(t,{k5:()=>c});var r=n(2115),i={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},l=r.createContext&&r.createContext(i),o=["attr","size","title"];function a(){return(a=Object.assign?Object.assign.bind():function(e){for(var t=1;tr.createElement(f,a({attr:s({},e.attr)},t),function e(t){return t&&t.map((t,n)=>r.createElement(t.tag,s({key:n},t.attr),e(t.child)))}(e.child))}function f(e){var t=t=>{var n,{attr:i,size:l,title:u}=e,c=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)){if(t.indexOf(r)>=0)continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,o),f=l||t.size||"1em";return t.className&&(n=t.className),e.className&&(n=(n?n+" ":"")+e.className),r.createElement("svg",a({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},t.attr,i,c,{className:n,style:s(s({color:e.color||t.color},t.style),e.style),height:f,width:f,xmlns:"http://www.w3.org/2000/svg"}),u&&r.createElement("title",null,u),e.children)};return void 0!==l?r.createElement(l.Consumer,null,e=>t(e)):t(i)}},3550:(e,t,n)=>{"use strict";n.d(t,{o:()=>ng});var r={};n.r(r),n.d(r,{boolean:()=>y,booleanish:()=>k,commaOrSpaceSeparated:()=>S,commaSeparated:()=>w,number:()=>v,overloadedBoolean:()=>x,spaceSeparated:()=>b});var i={};n.r(i),n.d(i,{attentionMarkers:()=>ty,contentInitial:()=>tf,disable:()=>tk,document:()=>tc,flow:()=>th,flowInitial:()=>tp,insideSpan:()=>tg,string:()=>td,text:()=>tm});var l=n(9424);let o=/^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u,a=/^[$_\p{ID_Start}][-$_\u{200C}\u{200D}\p{ID_Continue}]*$/u,u={};function s(e,t){return((t||u).jsx?a:o).test(e)}let c=/[ \t\n\f\r]/g;function f(e){return""===e.replace(c,"")}class p{constructor(e,t,n){this.property=e,this.normal=t,n&&(this.space=n)}}function h(e,t){let n={},r={},i=-1;for(;++i"xlink:"+t.slice(5).toLowerCase(),properties:{xLinkActuate:null,xLinkArcRole:null,xLinkHref:null,xLinkRole:null,xLinkShow:null,xLinkTitle:null,xLinkType:null}}),D=I({space:"xml",transform:(e,t)=>"xml:"+t.slice(3).toLowerCase(),properties:{xmlLang:null,xmlBase:null,xmlSpace:null}});function A(e,t){return t in e?e[t]:t}function L(e,t){return A(e,t.toLowerCase())}let F=I({space:"xmlns",attributes:{xmlnsxlink:"xmlns:xlink"},transform:L,properties:{xmlns:null,xmlnsXLink:null}}),N=I({transform:(e,t)=>"role"===t?t:"aria-"+t.slice(4).toLowerCase(),properties:{ariaActiveDescendant:null,ariaAtomic:k,ariaAutoComplete:null,ariaBusy:k,ariaChecked:k,ariaColCount:v,ariaColIndex:v,ariaColSpan:v,ariaControls:b,ariaCurrent:null,ariaDescribedBy:b,ariaDetails:null,ariaDisabled:k,ariaDropEffect:b,ariaErrorMessage:null,ariaExpanded:k,ariaFlowTo:b,ariaGrabbed:k,ariaHasPopup:null,ariaHidden:k,ariaInvalid:null,ariaKeyShortcuts:null,ariaLabel:null,ariaLabelledBy:b,ariaLevel:v,ariaLive:null,ariaModal:k,ariaMultiLine:k,ariaMultiSelectable:k,ariaOrientation:null,ariaOwns:b,ariaPlaceholder:null,ariaPosInSet:v,ariaPressed:k,ariaReadOnly:k,ariaRelevant:null,ariaRequired:k,ariaRoleDescription:b,ariaRowCount:v,ariaRowIndex:v,ariaRowSpan:v,ariaSelected:k,ariaSetSize:v,ariaSort:null,ariaValueMax:v,ariaValueMin:v,ariaValueNow:v,ariaValueText:null,role:null}}),M=I({space:"html",attributes:{acceptcharset:"accept-charset",classname:"class",htmlfor:"for",httpequiv:"http-equiv"},transform:L,mustUseProperty:["checked","multiple","muted","selected"],properties:{abbr:null,accept:w,acceptCharset:b,accessKey:b,action:null,allow:null,allowFullScreen:y,allowPaymentRequest:y,allowUserMedia:y,alt:null,as:null,async:y,autoCapitalize:null,autoComplete:b,autoFocus:y,autoPlay:y,blocking:b,capture:null,charSet:null,checked:y,cite:null,className:b,cols:v,colSpan:null,content:null,contentEditable:k,controls:y,controlsList:b,coords:v|w,crossOrigin:null,data:null,dateTime:null,decoding:null,default:y,defer:y,dir:null,dirName:null,disabled:y,download:x,draggable:k,encType:null,enterKeyHint:null,fetchPriority:null,form:null,formAction:null,formEncType:null,formMethod:null,formNoValidate:y,formTarget:null,headers:b,height:v,hidden:y,high:v,href:null,hrefLang:null,htmlFor:b,httpEquiv:b,id:null,imageSizes:null,imageSrcSet:null,inert:y,inputMode:null,integrity:null,is:null,isMap:y,itemId:null,itemProp:b,itemRef:b,itemScope:y,itemType:b,kind:null,label:null,lang:null,language:null,list:null,loading:null,loop:y,low:v,manifest:null,max:null,maxLength:v,media:null,method:null,min:null,minLength:v,multiple:y,muted:y,name:null,nonce:null,noModule:y,noValidate:y,onAbort:null,onAfterPrint:null,onAuxClick:null,onBeforeMatch:null,onBeforePrint:null,onBeforeToggle:null,onBeforeUnload:null,onBlur:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onContextLost:null,onContextMenu:null,onContextRestored:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnded:null,onError:null,onFocus:null,onFormData:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLanguageChange:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadEnd:null,onLoadStart:null,onMessage:null,onMessageError:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRejectionHandled:null,onReset:null,onResize:null,onScroll:null,onScrollEnd:null,onSecurityPolicyViolation:null,onSeeked:null,onSeeking:null,onSelect:null,onSlotChange:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnhandledRejection:null,onUnload:null,onVolumeChange:null,onWaiting:null,onWheel:null,open:y,optimum:v,pattern:null,ping:b,placeholder:null,playsInline:y,popover:null,popoverTarget:null,popoverTargetAction:null,poster:null,preload:null,readOnly:y,referrerPolicy:null,rel:b,required:y,reversed:y,rows:v,rowSpan:v,sandbox:b,scope:null,scoped:y,seamless:y,selected:y,shadowRootClonable:y,shadowRootDelegatesFocus:y,shadowRootMode:null,shape:null,size:v,sizes:null,slot:null,span:v,spellCheck:k,src:null,srcDoc:null,srcLang:null,srcSet:null,start:v,step:null,style:null,tabIndex:v,target:null,title:null,translate:null,type:null,typeMustMatch:y,useMap:null,value:k,width:v,wrap:null,writingSuggestions:null,align:null,aLink:null,archive:b,axis:null,background:null,bgColor:null,border:v,borderColor:null,bottomMargin:v,cellPadding:null,cellSpacing:null,char:null,charOff:null,classId:null,clear:null,code:null,codeBase:null,codeType:null,color:null,compact:y,declare:y,event:null,face:null,frame:null,frameBorder:null,hSpace:v,leftMargin:v,link:null,longDesc:null,lowSrc:null,marginHeight:v,marginWidth:v,noResize:y,noHref:y,noShade:y,noWrap:y,object:null,profile:null,prompt:null,rev:null,rightMargin:v,rules:null,scheme:null,scrolling:k,standby:null,summary:null,text:null,topMargin:v,valueType:null,version:null,vAlign:null,vLink:null,vSpace:v,allowTransparency:null,autoCorrect:null,autoSave:null,disablePictureInPicture:y,disableRemotePlayback:y,prefix:null,property:null,results:v,security:null,unselectable:null}}),z=I({space:"svg",attributes:{accentHeight:"accent-height",alignmentBaseline:"alignment-baseline",arabicForm:"arabic-form",baselineShift:"baseline-shift",capHeight:"cap-height",className:"class",clipPath:"clip-path",clipRule:"clip-rule",colorInterpolation:"color-interpolation",colorInterpolationFilters:"color-interpolation-filters",colorProfile:"color-profile",colorRendering:"color-rendering",crossOrigin:"crossorigin",dataType:"datatype",dominantBaseline:"dominant-baseline",enableBackground:"enable-background",fillOpacity:"fill-opacity",fillRule:"fill-rule",floodColor:"flood-color",floodOpacity:"flood-opacity",fontFamily:"font-family",fontSize:"font-size",fontSizeAdjust:"font-size-adjust",fontStretch:"font-stretch",fontStyle:"font-style",fontVariant:"font-variant",fontWeight:"font-weight",glyphName:"glyph-name",glyphOrientationHorizontal:"glyph-orientation-horizontal",glyphOrientationVertical:"glyph-orientation-vertical",hrefLang:"hreflang",horizAdvX:"horiz-adv-x",horizOriginX:"horiz-origin-x",horizOriginY:"horiz-origin-y",imageRendering:"image-rendering",letterSpacing:"letter-spacing",lightingColor:"lighting-color",markerEnd:"marker-end",markerMid:"marker-mid",markerStart:"marker-start",navDown:"nav-down",navDownLeft:"nav-down-left",navDownRight:"nav-down-right",navLeft:"nav-left",navNext:"nav-next",navPrev:"nav-prev",navRight:"nav-right",navUp:"nav-up",navUpLeft:"nav-up-left",navUpRight:"nav-up-right",onAbort:"onabort",onActivate:"onactivate",onAfterPrint:"onafterprint",onBeforePrint:"onbeforeprint",onBegin:"onbegin",onCancel:"oncancel",onCanPlay:"oncanplay",onCanPlayThrough:"oncanplaythrough",onChange:"onchange",onClick:"onclick",onClose:"onclose",onCopy:"oncopy",onCueChange:"oncuechange",onCut:"oncut",onDblClick:"ondblclick",onDrag:"ondrag",onDragEnd:"ondragend",onDragEnter:"ondragenter",onDragExit:"ondragexit",onDragLeave:"ondragleave",onDragOver:"ondragover",onDragStart:"ondragstart",onDrop:"ondrop",onDurationChange:"ondurationchange",onEmptied:"onemptied",onEnd:"onend",onEnded:"onended",onError:"onerror",onFocus:"onfocus",onFocusIn:"onfocusin",onFocusOut:"onfocusout",onHashChange:"onhashchange",onInput:"oninput",onInvalid:"oninvalid",onKeyDown:"onkeydown",onKeyPress:"onkeypress",onKeyUp:"onkeyup",onLoad:"onload",onLoadedData:"onloadeddata",onLoadedMetadata:"onloadedmetadata",onLoadStart:"onloadstart",onMessage:"onmessage",onMouseDown:"onmousedown",onMouseEnter:"onmouseenter",onMouseLeave:"onmouseleave",onMouseMove:"onmousemove",onMouseOut:"onmouseout",onMouseOver:"onmouseover",onMouseUp:"onmouseup",onMouseWheel:"onmousewheel",onOffline:"onoffline",onOnline:"ononline",onPageHide:"onpagehide",onPageShow:"onpageshow",onPaste:"onpaste",onPause:"onpause",onPlay:"onplay",onPlaying:"onplaying",onPopState:"onpopstate",onProgress:"onprogress",onRateChange:"onratechange",onRepeat:"onrepeat",onReset:"onreset",onResize:"onresize",onScroll:"onscroll",onSeeked:"onseeked",onSeeking:"onseeking",onSelect:"onselect",onShow:"onshow",onStalled:"onstalled",onStorage:"onstorage",onSubmit:"onsubmit",onSuspend:"onsuspend",onTimeUpdate:"ontimeupdate",onToggle:"ontoggle",onUnload:"onunload",onVolumeChange:"onvolumechange",onWaiting:"onwaiting",onZoom:"onzoom",overlinePosition:"overline-position",overlineThickness:"overline-thickness",paintOrder:"paint-order",panose1:"panose-1",pointerEvents:"pointer-events",referrerPolicy:"referrerpolicy",renderingIntent:"rendering-intent",shapeRendering:"shape-rendering",stopColor:"stop-color",stopOpacity:"stop-opacity",strikethroughPosition:"strikethrough-position",strikethroughThickness:"strikethrough-thickness",strokeDashArray:"stroke-dasharray",strokeDashOffset:"stroke-dashoffset",strokeLineCap:"stroke-linecap",strokeLineJoin:"stroke-linejoin",strokeMiterLimit:"stroke-miterlimit",strokeOpacity:"stroke-opacity",strokeWidth:"stroke-width",tabIndex:"tabindex",textAnchor:"text-anchor",textDecoration:"text-decoration",textRendering:"text-rendering",transformOrigin:"transform-origin",typeOf:"typeof",underlinePosition:"underline-position",underlineThickness:"underline-thickness",unicodeBidi:"unicode-bidi",unicodeRange:"unicode-range",unitsPerEm:"units-per-em",vAlphabetic:"v-alphabetic",vHanging:"v-hanging",vIdeographic:"v-ideographic",vMathematical:"v-mathematical",vectorEffect:"vector-effect",vertAdvY:"vert-adv-y",vertOriginX:"vert-origin-x",vertOriginY:"vert-origin-y",wordSpacing:"word-spacing",writingMode:"writing-mode",xHeight:"x-height",playbackOrder:"playbackorder",timelineBegin:"timelinebegin"},transform:A,properties:{about:S,accentHeight:v,accumulate:null,additive:null,alignmentBaseline:null,alphabetic:v,amplitude:v,arabicForm:null,ascent:v,attributeName:null,attributeType:null,azimuth:v,bandwidth:null,baselineShift:null,baseFrequency:null,baseProfile:null,bbox:null,begin:null,bias:v,by:null,calcMode:null,capHeight:v,className:b,clip:null,clipPath:null,clipPathUnits:null,clipRule:null,color:null,colorInterpolation:null,colorInterpolationFilters:null,colorProfile:null,colorRendering:null,content:null,contentScriptType:null,contentStyleType:null,crossOrigin:null,cursor:null,cx:null,cy:null,d:null,dataType:null,defaultAction:null,descent:v,diffuseConstant:v,direction:null,display:null,dur:null,divisor:v,dominantBaseline:null,download:y,dx:null,dy:null,edgeMode:null,editable:null,elevation:v,enableBackground:null,end:null,event:null,exponent:v,externalResourcesRequired:null,fill:null,fillOpacity:v,fillRule:null,filter:null,filterRes:null,filterUnits:null,floodColor:null,floodOpacity:null,focusable:null,focusHighlight:null,fontFamily:null,fontSize:null,fontSizeAdjust:null,fontStretch:null,fontStyle:null,fontVariant:null,fontWeight:null,format:null,fr:null,from:null,fx:null,fy:null,g1:w,g2:w,glyphName:w,glyphOrientationHorizontal:null,glyphOrientationVertical:null,glyphRef:null,gradientTransform:null,gradientUnits:null,handler:null,hanging:v,hatchContentUnits:null,hatchUnits:null,height:null,href:null,hrefLang:null,horizAdvX:v,horizOriginX:v,horizOriginY:v,id:null,ideographic:v,imageRendering:null,initialVisibility:null,in:null,in2:null,intercept:v,k:v,k1:v,k2:v,k3:v,k4:v,kernelMatrix:S,kernelUnitLength:null,keyPoints:null,keySplines:null,keyTimes:null,kerning:null,lang:null,lengthAdjust:null,letterSpacing:null,lightingColor:null,limitingConeAngle:v,local:null,markerEnd:null,markerMid:null,markerStart:null,markerHeight:null,markerUnits:null,markerWidth:null,mask:null,maskContentUnits:null,maskUnits:null,mathematical:null,max:null,media:null,mediaCharacterEncoding:null,mediaContentEncodings:null,mediaSize:v,mediaTime:null,method:null,min:null,mode:null,name:null,navDown:null,navDownLeft:null,navDownRight:null,navLeft:null,navNext:null,navPrev:null,navRight:null,navUp:null,navUpLeft:null,navUpRight:null,numOctaves:null,observer:null,offset:null,onAbort:null,onActivate:null,onAfterPrint:null,onBeforePrint:null,onBegin:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnd:null,onEnded:null,onError:null,onFocus:null,onFocusIn:null,onFocusOut:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadStart:null,onMessage:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onMouseWheel:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRepeat:null,onReset:null,onResize:null,onScroll:null,onSeeked:null,onSeeking:null,onSelect:null,onShow:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnload:null,onVolumeChange:null,onWaiting:null,onZoom:null,opacity:null,operator:null,order:null,orient:null,orientation:null,origin:null,overflow:null,overlay:null,overlinePosition:v,overlineThickness:v,paintOrder:null,panose1:null,path:null,pathLength:v,patternContentUnits:null,patternTransform:null,patternUnits:null,phase:null,ping:b,pitch:null,playbackOrder:null,pointerEvents:null,points:null,pointsAtX:v,pointsAtY:v,pointsAtZ:v,preserveAlpha:null,preserveAspectRatio:null,primitiveUnits:null,propagate:null,property:S,r:null,radius:null,referrerPolicy:null,refX:null,refY:null,rel:S,rev:S,renderingIntent:null,repeatCount:null,repeatDur:null,requiredExtensions:S,requiredFeatures:S,requiredFonts:S,requiredFormats:S,resource:null,restart:null,result:null,rotate:null,rx:null,ry:null,scale:null,seed:null,shapeRendering:null,side:null,slope:null,snapshotTime:null,specularConstant:v,specularExponent:v,spreadMethod:null,spacing:null,startOffset:null,stdDeviation:null,stemh:null,stemv:null,stitchTiles:null,stopColor:null,stopOpacity:null,strikethroughPosition:v,strikethroughThickness:v,string:null,stroke:null,strokeDashArray:S,strokeDashOffset:null,strokeLineCap:null,strokeLineJoin:null,strokeMiterLimit:v,strokeOpacity:v,strokeWidth:null,style:null,surfaceScale:v,syncBehavior:null,syncBehaviorDefault:null,syncMaster:null,syncTolerance:null,syncToleranceDefault:null,systemLanguage:S,tabIndex:v,tableValues:null,target:null,targetX:v,targetY:v,textAnchor:null,textDecoration:null,textRendering:null,textLength:null,timelineBegin:null,title:null,transformBehavior:null,type:null,typeOf:S,to:null,transform:null,transformOrigin:null,u1:null,u2:null,underlinePosition:v,underlineThickness:v,unicode:null,unicodeBidi:null,unicodeRange:null,unitsPerEm:v,values:null,vAlphabetic:v,vMathematical:v,vectorEffect:null,vHanging:v,vIdeographic:v,version:null,vertAdvY:v,vertOriginX:v,vertOriginY:v,viewBox:null,viewTarget:null,visibility:null,width:null,widths:null,wordSpacing:null,writingMode:null,x:null,x1:null,x2:null,xChannelSelector:null,xHeight:v,y:null,y1:null,y2:null,yChannelSelector:null,z:null,zoomAndPan:null}}),R=h([D,T,F,N,M],"html"),j=h([D,T,F,N,z],"svg"),H=/^data[-\w.:]+$/i,_=/-[a-z]/g,B=/[A-Z]/g;function V(e){return"-"+e.toLowerCase()}function U(e){return e.charAt(1).toUpperCase()}let q={classId:"classID",dataType:"datatype",itemId:"itemID",strokeDashArray:"strokeDasharray",strokeDashOffset:"strokeDashoffset",strokeLineCap:"strokeLinecap",strokeLineJoin:"strokeLinejoin",strokeMiterLimit:"strokeMiterlimit",typeOf:"typeof",xLinkActuate:"xlinkActuate",xLinkArcRole:"xlinkArcrole",xLinkHref:"xlinkHref",xLinkRole:"xlinkRole",xLinkShow:"xlinkShow",xLinkTitle:"xlinkTitle",xLinkType:"xlinkType",xmlnsXLink:"xmlnsXlink"};var W=n(4919);let Y=W.default||W,Q=J("end"),$=J("start");function J(e){return function(t){let n=t&&t.position&&t.position[e]||{};if("number"==typeof n.line&&n.line>0&&"number"==typeof n.column&&n.column>0)return{line:n.line,column:n.column,offset:"number"==typeof n.offset&&n.offset>-1?n.offset:void 0}}}function K(e){return e&&"object"==typeof e?"position"in e||"type"in e?Z(e.position):"start"in e||"end"in e?Z(e):"line"in e||"column"in e?X(e):"":""}function X(e){return G(e&&e.line)+":"+G(e&&e.column)}function Z(e){return X(e&&e.start)+"-"+X(e&&e.end)}function G(e){return e&&"number"==typeof e?e:1}class ee extends Error{constructor(e,t,n){super(),"string"==typeof t&&(n=t,t=void 0);let r="",i={},l=!1;if(t&&(i="line"in t&&"column"in t?{place:t}:"start"in t&&"end"in t?{place:t}:"type"in t?{ancestors:[t],place:t.position}:{...t}),"string"==typeof e?r=e:!i.cause&&e&&(l=!0,r=e.message,i.cause=e),!i.ruleId&&!i.source&&"string"==typeof n){let e=n.indexOf(":");-1===e?i.ruleId=n:(i.source=n.slice(0,e),i.ruleId=n.slice(e+1))}if(!i.place&&i.ancestors&&i.ancestors){let e=i.ancestors[i.ancestors.length-1];e&&(i.place=e.position)}let o=i.place&&"start"in i.place?i.place.start:i.place;this.ancestors=i.ancestors||void 0,this.cause=i.cause||void 0,this.column=o?o.column:void 0,this.fatal=void 0,this.file,this.message=r,this.line=o?o.line:void 0,this.name=K(i.place)||"1:1",this.place=i.place||void 0,this.reason=this.message,this.ruleId=i.ruleId||void 0,this.source=i.source||void 0,this.stack=l&&i.cause&&"string"==typeof i.cause.stack?i.cause.stack:"",this.actual,this.expected,this.note,this.url}}ee.prototype.file="",ee.prototype.name="",ee.prototype.reason="",ee.prototype.message="",ee.prototype.stack="",ee.prototype.column=void 0,ee.prototype.line=void 0,ee.prototype.ancestors=void 0,ee.prototype.cause=void 0,ee.prototype.fatal=void 0,ee.prototype.place=void 0,ee.prototype.ruleId=void 0,ee.prototype.source=void 0;let et={}.hasOwnProperty,en=new Map,er=/[A-Z]/g,ei=/-([a-z])/g,el=new Set(["table","tbody","thead","tfoot","tr"]),eo=new Set(["td","th"]),ea="https://github.com/syntax-tree/hast-util-to-jsx-runtime";function eu(e,t,n){return"element"===t.type?function(e,t,n){let r=e.schema,i=r;"svg"===t.tagName.toLowerCase()&&"html"===r.space&&(i=j,e.schema=i),e.ancestors.push(t);let l=ep(e,t.tagName,!1),o=function(e,t){let n,r;let i={};for(r in t.properties)if("children"!==r&&et.call(t.properties,r)){let l=function(e,t,n){let r=function(e,t){let n=d(t),r=t,i=m;if(n in e.normal)return e.property[e.normal[n]];if(n.length>4&&"data"===n.slice(0,4)&&H.test(t)){if("-"===t.charAt(4)){let e=t.slice(5).replace(_,U);r="data"+e.charAt(0).toUpperCase()+e.slice(1)}else{let e=t.slice(4);if(!_.test(e)){let n=e.replace(B,V);"-"!==n.charAt(0)&&(n="-"+n),t="data"+n}}i=P}return new i(r,t)}(e.schema,t);if(!(null==n||"number"==typeof n&&Number.isNaN(n))){if(Array.isArray(n)&&(n=r.commaSeparated?function(e,t){let n={};return(""===e[e.length-1]?[...e,""]:e).join((n.padRight?" ":"")+","+(!1===n.padLeft?"":" ")).trim()}(n):n.join(" ").trim()),"style"===r.property){let t="object"==typeof n?n:function(e,t){let n={};try{Y(t,function(e,t){let r=e;"--"!==r.slice(0,2)&&("-ms-"===r.slice(0,4)&&(r="ms-"+r.slice(4)),r=r.replace(ei,ed)),n[r]=t})}catch(t){if(!e.ignoreInvalidStyle){let n=new ee("Cannot parse `style` attribute",{ancestors:e.ancestors,cause:t,ruleId:"style",source:"hast-util-to-jsx-runtime"});throw n.file=e.filePath||void 0,n.url=ea+"#cannot-parse-style-attribute",n}}return n}(e,String(n));return"css"===e.stylePropertyNameCase&&(t=function(e){let t;let n={};for(t in e)et.call(e,t)&&(n[function(e){let t=e.replace(er,em);return"ms-"===t.slice(0,3)&&(t="-"+t),t}(t)]=e[t]);return n}(t)),["style",t]}return["react"===e.elementAttributeNameCase&&r.space?q[r.property]||r.property:r.attribute,n]}}(e,r,t.properties[r]);if(l){let[r,o]=l;e.tableCellAlignToStyle&&"align"===r&&"string"==typeof o&&eo.has(t.tagName)?n=o:i[r]=o}}return n&&((i.style||(i.style={}))["css"===e.stylePropertyNameCase?"text-align":"textAlign"]=n),i}(e,t),a=ef(e,t);return el.has(t.tagName)&&(a=a.filter(function(e){return"string"!=typeof e||!("object"==typeof e?"text"===e.type&&f(e.value):f(e))})),es(e,o,l,t),ec(o,a),e.ancestors.pop(),e.schema=r,e.create(t,l,o,n)}(e,t,n):"mdxFlowExpression"===t.type||"mdxTextExpression"===t.type?function(e,t){if(t.data&&t.data.estree&&e.evaluater){let n=t.data.estree.body[0];return(0,l.ok)("ExpressionStatement"===n.type),e.evaluater.evaluateExpression(n.expression)}eh(e,t.position)}(e,t):"mdxJsxFlowElement"===t.type||"mdxJsxTextElement"===t.type?function(e,t,n){let r=e.schema,i=r;"svg"===t.name&&"html"===r.space&&(i=j,e.schema=i),e.ancestors.push(t);let o=null===t.name?e.Fragment:ep(e,t.name,!0),a=function(e,t){let n={};for(let r of t.attributes)if("mdxJsxExpressionAttribute"===r.type){if(r.data&&r.data.estree&&e.evaluater){let t=r.data.estree.body[0];(0,l.ok)("ExpressionStatement"===t.type);let i=t.expression;(0,l.ok)("ObjectExpression"===i.type);let o=i.properties[0];(0,l.ok)("SpreadElement"===o.type),Object.assign(n,e.evaluater.evaluateExpression(o.argument))}else eh(e,t.position)}else{let i;let o=r.name;if(r.value&&"object"==typeof r.value){if(r.value.data&&r.value.data.estree&&e.evaluater){let t=r.value.data.estree.body[0];(0,l.ok)("ExpressionStatement"===t.type),i=e.evaluater.evaluateExpression(t.expression)}else eh(e,t.position)}else i=null===r.value||r.value;n[o]=i}return n}(e,t),u=ef(e,t);return es(e,a,o,t),ec(a,u),e.ancestors.pop(),e.schema=r,e.create(t,o,a,n)}(e,t,n):"mdxjsEsm"===t.type?function(e,t){if(t.data&&t.data.estree&&e.evaluater)return e.evaluater.evaluateProgram(t.data.estree);eh(e,t.position)}(e,t):"root"===t.type?function(e,t,n){let r={};return ec(r,ef(e,t)),e.create(t,e.Fragment,r,n)}(e,t,n):"text"===t.type?t.value:void 0}function es(e,t,n,r){"string"!=typeof n&&n!==e.Fragment&&e.passNode&&(t.node=r)}function ec(e,t){if(t.length>0){let n=t.length>1?t:t[0];n&&(e.children=n)}}function ef(e,t){let n=[],r=-1,i=e.passKeys?new Map:en;for(;++r=this.left.length+this.right.length)throw RangeError("Cannot access index `"+e+"` in a splice buffer of size `"+(this.left.length+this.right.length)+"`");return ethis.left.length?this.right.slice(this.right.length-n+this.left.length,this.right.length-e+this.left.length).reverse():this.left.slice(e).concat(this.right.slice(this.right.length-n+this.left.length).reverse())}splice(e,t,n){this.setCursor(Math.trunc(e));let r=this.right.splice(this.right.length-(t||0),Number.POSITIVE_INFINITY);return n&&eb(this.left,n),r.reverse()}pop(){return this.setCursor(Number.POSITIVE_INFINITY),this.left.pop()}push(e){this.setCursor(Number.POSITIVE_INFINITY),this.left.push(e)}pushMany(e){this.setCursor(Number.POSITIVE_INFINITY),eb(this.left,e)}unshift(e){this.setCursor(0),this.right.push(e)}unshiftMany(e){this.setCursor(0),eb(this.right,e.reverse())}setCursor(e){if(e!==this.left.length&&(!(e>this.left.length)||0!==this.right.length)&&(!(e<0)||0!==this.left.length)){if(er))return;let a=i.events.length,u=a;for(;u--;)if("exit"===i.events[u][0]&&"chunkFlow"===i.events[u][1].type){if(e){n=i.events[u][1].end;break}e=!0}for(g(o),l=a;lt;){let t=l[n];i.containerState=t[1],t[0].exit.call(i,e)}l.length=t}function y(){t.write([null]),n=void 0,t=void 0,i.containerState._closeFlow=void 0}}},eI={tokenize:function(e,t,n){return(0,eC.N)(e,e.attempt(this.parser.constructs.document,t,n),"linePrefix",this.parser.constructs.disable.null.includes("codeIndented")?void 0:4)}};var eT=n(8560);let eD={resolve:function(e){return ew(e),e},tokenize:function(e,t){let n;return function(t){return e.enter("content"),n=e.enter("chunkContent",{contentType:"content"}),r(t)};function r(t){return null===t?i(t):(0,eE.HP)(t)?e.check(eA,l,i)(t):(e.consume(t),r)}function i(n){return e.exit("chunkContent"),e.exit("content"),t(n)}function l(t){return e.consume(t),e.exit("chunkContent"),n.next=e.enter("chunkContent",{contentType:"content",previous:n}),n=n.next,r}}},eA={partial:!0,tokenize:function(e,t,n){let r=this;return function(t){return e.exit("chunkContent"),e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),(0,eC.N)(e,i,"linePrefix")};function i(i){if(null===i||(0,eE.HP)(i))return n(i);let l=r.events[r.events.length-1];return!r.parser.constructs.disable.null.includes("codeIndented")&&l&&"linePrefix"===l[1].type&&l[2].sliceSerialize(l[1],!0).length>=4?t(i):e.interrupt(r.parser.constructs.flow,n,t)(i)}}},eL={tokenize:function(e){let t=this,n=e.attempt(eT.B,function(r){if(null===r){e.consume(r);return}return e.enter("lineEndingBlank"),e.consume(r),e.exit("lineEndingBlank"),t.currentConstruct=void 0,n},e.attempt(this.parser.constructs.flowInitial,r,(0,eC.N)(e,e.attempt(this.parser.constructs.flow,r,e.attempt(eD,r)),"linePrefix")));return n;function r(r){if(null===r){e.consume(r);return}return e.enter("lineEnding"),e.consume(r),e.exit("lineEnding"),t.currentConstruct=void 0,n}}},eF={resolveAll:eR()},eN=ez("string"),eM=ez("text");function ez(e){return{resolveAll:eR("text"===e?ej:void 0),tokenize:function(t){let n=this,r=this.parser.constructs[e],i=t.attempt(r,l,o);return l;function l(e){return u(e)?i(e):o(e)}function o(e){if(null===e){t.consume(e);return}return t.enter("data"),t.consume(e),a}function a(e){return u(e)?(t.exit("data"),i(e)):(t.consume(e),a)}function u(e){if(null===e)return!0;let t=r[e],i=-1;if(t)for(;++i=3&&(null===o||(0,eE.HP)(o))?(e.exit("thematicBreak"),t(o)):n(o)}(l)}}},e_={continuation:{tokenize:function(e,t,n){let r=this;return r.containerState._closeFlow=void 0,e.check(eT.B,function(n){return r.containerState.furtherBlankLines=r.containerState.furtherBlankLines||r.containerState.initialBlankLine,(0,eC.N)(e,t,"listItemIndent",r.containerState.size+1)(n)},function(n){return r.containerState.furtherBlankLines||!(0,eE.On)(n)?(r.containerState.furtherBlankLines=void 0,r.containerState.initialBlankLine=void 0,i(n)):(r.containerState.furtherBlankLines=void 0,r.containerState.initialBlankLine=void 0,e.attempt(eV,t,i)(n))});function i(i){return r.containerState._closeFlow=!0,r.interrupt=void 0,(0,eC.N)(e,e.attempt(e_,t,n),"linePrefix",r.parser.constructs.disable.null.includes("codeIndented")?void 0:4)(i)}}},exit:function(e){e.exit(this.containerState.type)},name:"list",tokenize:function(e,t,n){let r=this,i=r.events[r.events.length-1],l=i&&"linePrefix"===i[1].type?i[2].sliceSerialize(i[1],!0).length:0,o=0;return function(t){let i=r.containerState.type||(42===t||43===t||45===t?"listUnordered":"listOrdered");if("listUnordered"===i?!r.containerState.marker||t===r.containerState.marker:(0,eE.BM)(t)){if(r.containerState.type||(r.containerState.type=i,e.enter(i,{_container:!0})),"listUnordered"===i)return e.enter("listItemPrefix"),42===t||45===t?e.check(eH,n,a)(t):a(t);if(!r.interrupt||49===t)return e.enter("listItemPrefix"),e.enter("listItemValue"),function t(i){return(0,eE.BM)(i)&&++o<10?(e.consume(i),t):(!r.interrupt||o<2)&&(r.containerState.marker?i===r.containerState.marker:41===i||46===i)?(e.exit("listItemValue"),a(i)):n(i)}(t)}return n(t)};function a(t){return e.enter("listItemMarker"),e.consume(t),e.exit("listItemMarker"),r.containerState.marker=r.containerState.marker||t,e.check(eT.B,r.interrupt?n:u,e.attempt(eB,c,s))}function u(e){return r.containerState.initialBlankLine=!0,l++,c(e)}function s(t){return(0,eE.On)(t)?(e.enter("listItemPrefixWhitespace"),e.consume(t),e.exit("listItemPrefixWhitespace"),c):n(t)}function c(n){return r.containerState.size=l+r.sliceSerialize(e.exit("listItemPrefix"),!0).length,t(n)}}},eB={partial:!0,tokenize:function(e,t,n){let r=this;return(0,eC.N)(e,function(e){let i=r.events[r.events.length-1];return!(0,eE.On)(e)&&i&&"listItemPrefixWhitespace"===i[1].type?t(e):n(e)},"listItemPrefixWhitespace",r.parser.constructs.disable.null.includes("codeIndented")?void 0:5)}},eV={partial:!0,tokenize:function(e,t,n){let r=this;return(0,eC.N)(e,function(e){let i=r.events[r.events.length-1];return i&&"listItemIndent"===i[1].type&&i[2].sliceSerialize(i[1],!0).length===r.containerState.size?t(e):n(e)},"listItemIndent",r.containerState.size+1)}},eU={continuation:{tokenize:function(e,t,n){let r=this;return function(t){return(0,eE.On)(t)?(0,eC.N)(e,i,"linePrefix",r.parser.constructs.disable.null.includes("codeIndented")?void 0:4)(t):i(t)};function i(r){return e.attempt(eU,t,n)(r)}}},exit:function(e){e.exit("blockQuote")},name:"blockQuote",tokenize:function(e,t,n){let r=this;return function(t){if(62===t){let n=r.containerState;return n.open||(e.enter("blockQuote",{_container:!0}),n.open=!0),e.enter("blockQuotePrefix"),e.enter("blockQuoteMarker"),e.consume(t),e.exit("blockQuoteMarker"),i}return n(t)};function i(n){return(0,eE.On)(n)?(e.enter("blockQuotePrefixWhitespace"),e.consume(n),e.exit("blockQuotePrefixWhitespace"),e.exit("blockQuotePrefix"),t):(e.exit("blockQuotePrefix"),t(n))}}};function eq(e,t,n,r,i,l,o,a,u){let s=u||Number.POSITIVE_INFINITY,c=0;return function(t){return 60===t?(e.enter(r),e.enter(i),e.enter(l),e.consume(t),e.exit(l),f):null===t||32===t||41===t||(0,eE.JQ)(t)?n(t):(e.enter(r),e.enter(o),e.enter(a),e.enter("chunkString",{contentType:"string"}),d(t))};function f(n){return 62===n?(e.enter(l),e.consume(n),e.exit(l),e.exit(i),e.exit(r),t):(e.enter(a),e.enter("chunkString",{contentType:"string"}),p(n))}function p(t){return 62===t?(e.exit("chunkString"),e.exit(a),f(t)):null===t||60===t||(0,eE.HP)(t)?n(t):(e.consume(t),92===t?h:p)}function h(t){return 60===t||62===t||92===t?(e.consume(t),p):p(t)}function d(i){return!c&&(null===i||41===i||(0,eE.Ee)(i))?(e.exit("chunkString"),e.exit(a),e.exit(o),e.exit(r),t(i)):c999||null===f||91===f||93===f&&!o||94===f&&!u&&"_hiddenFootnoteSupport"in a.parser.constructs?n(f):93===f?(e.exit(l),e.enter(i),e.consume(f),e.exit(i),e.exit(r),t):(0,eE.HP)(f)?(e.enter("lineEnding"),e.consume(f),e.exit("lineEnding"),s):(e.enter("chunkString",{contentType:"string"}),c(f))}function c(t){return null===t||91===t||93===t||(0,eE.HP)(t)||u++>999?(e.exit("chunkString"),s(t)):(e.consume(t),o||(o=!(0,eE.On)(t)),92===t?f:c)}function f(t){return 91===t||92===t||93===t?(e.consume(t),u++,c):c(t)}}function eY(e,t,n,r,i,l){let o;return function(t){return 34===t||39===t||40===t?(e.enter(r),e.enter(i),e.consume(t),e.exit(i),o=40===t?41:t,a):n(t)};function a(n){return n===o?(e.enter(i),e.consume(n),e.exit(i),e.exit(r),t):(e.enter(l),u(n))}function u(t){return t===o?(e.exit(l),a(o)):null===t?n(t):(0,eE.HP)(t)?(e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),(0,eC.N)(e,u,"linePrefix")):(e.enter("chunkString",{contentType:"string"}),s(t))}function s(t){return t===o||null===t||(0,eE.HP)(t)?(e.exit("chunkString"),u(t)):(e.consume(t),92===t?c:s)}function c(t){return t===o||92===t?(e.consume(t),s):s(t)}}function eQ(e,t){let n;return function r(i){return(0,eE.HP)(i)?(e.enter("lineEnding"),e.consume(i),e.exit("lineEnding"),n=!0,r):(0,eE.On)(i)?(0,eC.N)(e,r,n?"linePrefix":"lineSuffix")(i):t(i)}}var e$=n(8213);let eJ={partial:!0,tokenize:function(e,t,n){return function(t){return(0,eE.Ee)(t)?eQ(e,r)(t):n(t)};function r(t){return eY(e,i,n,"definitionTitle","definitionTitleMarker","definitionTitleString")(t)}function i(t){return(0,eE.On)(t)?(0,eC.N)(e,l,"whitespace")(t):l(t)}function l(e){return null===e||(0,eE.HP)(e)?t(e):n(e)}}},eK={name:"codeIndented",tokenize:function(e,t,n){let r=this;return function(t){return e.enter("codeIndented"),(0,eC.N)(e,i,"linePrefix",5)(t)};function i(t){let i=r.events[r.events.length-1];return i&&"linePrefix"===i[1].type&&i[2].sliceSerialize(i[1],!0).length>=4?function t(n){return null===n?l(n):(0,eE.HP)(n)?e.attempt(eX,t,l)(n):(e.enter("codeFlowValue"),function n(r){return null===r||(0,eE.HP)(r)?(e.exit("codeFlowValue"),t(r)):(e.consume(r),n)}(n))}(t):n(t)}function l(n){return e.exit("codeIndented"),t(n)}}},eX={partial:!0,tokenize:function(e,t,n){let r=this;return i;function i(t){return r.parser.lazy[r.now().line]?n(t):(0,eE.HP)(t)?(e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),i):(0,eC.N)(e,l,"linePrefix",5)(t)}function l(e){let l=r.events[r.events.length-1];return l&&"linePrefix"===l[1].type&&l[2].sliceSerialize(l[1],!0).length>=4?t(e):(0,eE.HP)(e)?i(e):n(e)}}},eZ={name:"setextUnderline",resolveTo:function(e,t){let n,r,i,l=e.length;for(;l--;)if("enter"===e[l][0]){if("content"===e[l][1].type){n=l;break}"paragraph"===e[l][1].type&&(r=l)}else"content"===e[l][1].type&&e.splice(l,1),i||"definition"!==e[l][1].type||(i=l);let o={type:"setextHeading",start:{...e[r][1].start},end:{...e[e.length-1][1].end}};return e[r][1].type="setextHeadingText",i?(e.splice(r,0,["enter",o,t]),e.splice(i+1,0,["exit",e[n][1],t]),e[n][1].end={...e[i][1].end}):e[n][1]=o,e.push(["exit",o,t]),e},tokenize:function(e,t,n){let r;let i=this;return function(t){let o,a=i.events.length;for(;a--;)if("lineEnding"!==i.events[a][1].type&&"linePrefix"!==i.events[a][1].type&&"content"!==i.events[a][1].type){o="paragraph"===i.events[a][1].type;break}return!i.parser.lazy[i.now().line]&&(i.interrupt||o)?(e.enter("setextHeadingLine"),r=t,e.enter("setextHeadingLineSequence"),function t(n){return n===r?(e.consume(n),t):(e.exit("setextHeadingLineSequence"),(0,eE.On)(n)?(0,eC.N)(e,l,"lineSuffix")(n):l(n))}(t)):n(t)};function l(r){return null===r||(0,eE.HP)(r)?(e.exit("setextHeadingLine"),t(r)):n(r)}}},eG=["address","article","aside","base","basefont","blockquote","body","caption","center","col","colgroup","dd","details","dialog","dir","div","dl","dt","fieldset","figcaption","figure","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hr","html","iframe","legend","li","link","main","menu","menuitem","nav","noframes","ol","optgroup","option","p","param","search","section","summary","table","tbody","td","tfoot","th","thead","title","tr","track","ul"],e0=["pre","script","style","textarea"],e1={partial:!0,tokenize:function(e,t,n){return function(r){return e.enter("lineEnding"),e.consume(r),e.exit("lineEnding"),e.attempt(eT.B,t,n)}}},e2={partial:!0,tokenize:function(e,t,n){let r=this;return function(t){return(0,eE.HP)(t)?(e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),i):n(t)};function i(e){return r.parser.lazy[r.now().line]?n(e):t(e)}}},e4={partial:!0,tokenize:function(e,t,n){let r=this;return function(t){return null===t?n(t):(e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),i)};function i(e){return r.parser.lazy[r.now().line]?n(e):t(e)}}},e9={concrete:!0,name:"codeFenced",tokenize:function(e,t,n){let r;let i=this,l={partial:!0,tokenize:function(e,t,n){let l=0;return function(t){return e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),o};function o(t){return e.enter("codeFencedFence"),(0,eE.On)(t)?(0,eC.N)(e,u,"linePrefix",i.parser.constructs.disable.null.includes("codeIndented")?void 0:4)(t):u(t)}function u(t){return t===r?(e.enter("codeFencedFenceSequence"),function t(i){return i===r?(l++,e.consume(i),t):l>=a?(e.exit("codeFencedFenceSequence"),(0,eE.On)(i)?(0,eC.N)(e,s,"whitespace")(i):s(i)):n(i)}(t)):n(t)}function s(r){return null===r||(0,eE.HP)(r)?(e.exit("codeFencedFence"),t(r)):n(r)}}},o=0,a=0;return function(t){return function(t){let l=i.events[i.events.length-1];return o=l&&"linePrefix"===l[1].type?l[2].sliceSerialize(l[1],!0).length:0,r=t,e.enter("codeFenced"),e.enter("codeFencedFence"),e.enter("codeFencedFenceSequence"),function t(i){return i===r?(a++,e.consume(i),t):a<3?n(i):(e.exit("codeFencedFenceSequence"),(0,eE.On)(i)?(0,eC.N)(e,u,"whitespace")(i):u(i))}(t)}(t)};function u(l){return null===l||(0,eE.HP)(l)?(e.exit("codeFencedFence"),i.interrupt?t(l):e.check(e4,c,d)(l)):(e.enter("codeFencedFenceInfo"),e.enter("chunkString",{contentType:"string"}),function t(i){return null===i||(0,eE.HP)(i)?(e.exit("chunkString"),e.exit("codeFencedFenceInfo"),u(i)):(0,eE.On)(i)?(e.exit("chunkString"),e.exit("codeFencedFenceInfo"),(0,eC.N)(e,s,"whitespace")(i)):96===i&&i===r?n(i):(e.consume(i),t)}(l))}function s(t){return null===t||(0,eE.HP)(t)?u(t):(e.enter("codeFencedFenceMeta"),e.enter("chunkString",{contentType:"string"}),function t(i){return null===i||(0,eE.HP)(i)?(e.exit("chunkString"),e.exit("codeFencedFenceMeta"),u(i)):96===i&&i===r?n(i):(e.consume(i),t)}(t))}function c(t){return e.attempt(l,d,f)(t)}function f(t){return e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),p}function p(t){return o>0&&(0,eE.On)(t)?(0,eC.N)(e,h,"linePrefix",o+1)(t):h(t)}function h(t){return null===t||(0,eE.HP)(t)?e.check(e4,c,d)(t):(e.enter("codeFlowValue"),function t(n){return null===n||(0,eE.HP)(n)?(e.exit("codeFlowValue"),h(n)):(e.consume(n),t)}(t))}function d(n){return e.exit("codeFenced"),t(n)}}},e3=document.createElement("i");function e5(e){let t="&"+e+";";e3.innerHTML=t;let n=e3.textContent;return(59!==n.charCodeAt(n.length-1)||"semi"===e)&&n!==t&&n}let e6={name:"characterReference",tokenize:function(e,t,n){let r,i;let l=this,o=0;return function(t){return e.enter("characterReference"),e.enter("characterReferenceMarker"),e.consume(t),e.exit("characterReferenceMarker"),a};function a(t){return 35===t?(e.enter("characterReferenceMarkerNumeric"),e.consume(t),e.exit("characterReferenceMarkerNumeric"),u):(e.enter("characterReferenceValue"),r=31,i=eE.lV,s(t))}function u(t){return 88===t||120===t?(e.enter("characterReferenceMarkerHexadecimal"),e.consume(t),e.exit("characterReferenceMarkerHexadecimal"),e.enter("characterReferenceValue"),r=6,i=eE.ok,s):(e.enter("characterReferenceValue"),r=7,i=eE.BM,s(t))}function s(a){if(59===a&&o){let r=e.exit("characterReferenceValue");return i!==eE.lV||e5(l.sliceSerialize(r))?(e.enter("characterReferenceMarker"),e.consume(a),e.exit("characterReferenceMarker"),e.exit("characterReference"),t):n(a)}return i(a)&&o++1&&e[c][1].end.offset-e[c][1].start.offset>1?2:1;let f={...e[n][1].end},p={...e[c][1].start};tu(f,-a),tu(p,a),l={type:a>1?"strongSequence":"emphasisSequence",start:f,end:{...e[n][1].end}},o={type:a>1?"strongSequence":"emphasisSequence",start:{...e[c][1].start},end:p},i={type:a>1?"strongText":"emphasisText",start:{...e[n][1].end},end:{...e[c][1].start}},r={type:a>1?"strong":"emphasis",start:{...l.start},end:{...o.end}},e[n][1].end={...l.start},e[c][1].start={...o.end},u=[],e[n][1].end.offset-e[n][1].start.offset&&(u=(0,ex.V)(u,[["enter",e[n][1],t],["exit",e[n][1],t]])),u=(0,ex.V)(u,[["enter",r,t],["enter",l,t],["exit",l,t],["enter",i,t]]),u=(0,ex.V)(u,(0,te.W)(t.parser.constructs.insideSpan.null,e.slice(n+1,c),t)),u=(0,ex.V)(u,[["exit",i,t],["enter",o,t],["exit",o,t],["exit",r,t]]),e[c][1].end.offset-e[c][1].start.offset?(s=2,u=(0,ex.V)(u,[["enter",e[c][1],t],["exit",e[c][1],t]])):s=0,(0,ex.m)(e,n-1,c-n+3,u),c=n+u.length-s-2;break}}for(c=-1;++cl&&"whitespace"===e[i][1].type&&(i-=2),"atxHeadingSequence"===e[i][1].type&&(l===i-1||i-4>l&&"whitespace"===e[i-2][1].type)&&(i-=l+1===i?2:4),i>l&&(n={type:"atxHeadingText",start:e[l][1].start,end:e[i][1].end},r={type:"chunkText",start:e[l][1].start,end:e[i][1].end,contentType:"text"},(0,ex.m)(e,l,i-l+1,[["enter",n,t],["enter",r,t],["exit",r,t],["exit",n,t]])),e},tokenize:function(e,t,n){let r=0;return function(i){return e.enter("atxHeading"),e.enter("atxHeadingSequence"),function i(l){return 35===l&&r++<6?(e.consume(l),i):null===l||(0,eE.Ee)(l)?(e.exit("atxHeadingSequence"),function n(r){return 35===r?(e.enter("atxHeadingSequence"),function t(r){return 35===r?(e.consume(r),t):(e.exit("atxHeadingSequence"),n(r))}(r)):null===r||(0,eE.HP)(r)?(e.exit("atxHeading"),t(r)):(0,eE.On)(r)?(0,eC.N)(e,n,"whitespace")(r):(e.enter("atxHeadingText"),function t(r){return null===r||35===r||(0,eE.Ee)(r)?(e.exit("atxHeadingText"),n(r)):(e.consume(r),t)}(r))}(l)):n(l)}(i)}}},42:eH,45:[eZ,eH],60:{concrete:!0,name:"htmlFlow",resolveTo:function(e){let t=e.length;for(;t--&&("enter"!==e[t][0]||"htmlFlow"!==e[t][1].type););return t>1&&"linePrefix"===e[t-2][1].type&&(e[t][1].start=e[t-2][1].start,e[t+1][1].start=e[t-2][1].start,e.splice(t-2,2)),e},tokenize:function(e,t,n){let r,i,l,o,a;let u=this;return function(t){return e.enter("htmlFlow"),e.enter("htmlFlowData"),e.consume(t),s};function s(o){return 33===o?(e.consume(o),c):47===o?(e.consume(o),i=!0,h):63===o?(e.consume(o),r=3,u.interrupt?t:L):(0,eE.CW)(o)?(e.consume(o),l=String.fromCharCode(o),d):n(o)}function c(i){return 45===i?(e.consume(i),r=2,f):91===i?(e.consume(i),r=5,o=0,p):(0,eE.CW)(i)?(e.consume(i),r=4,u.interrupt?t:L):n(i)}function f(r){return 45===r?(e.consume(r),u.interrupt?t:L):n(r)}function p(r){let i="CDATA[";return r===i.charCodeAt(o++)?(e.consume(r),o===i.length)?u.interrupt?t:C:p:n(r)}function h(t){return(0,eE.CW)(t)?(e.consume(t),l=String.fromCharCode(t),d):n(t)}function d(o){if(null===o||47===o||62===o||(0,eE.Ee)(o)){let a=47===o,s=l.toLowerCase();return!a&&!i&&e0.includes(s)?(r=1,u.interrupt?t(o):C(o)):eG.includes(l.toLowerCase())?(r=6,a)?(e.consume(o),m):u.interrupt?t(o):C(o):(r=7,u.interrupt&&!u.parser.lazy[u.now().line]?n(o):i?function t(n){return(0,eE.On)(n)?(e.consume(n),t):w(n)}(o):g(o))}return 45===o||(0,eE.lV)(o)?(e.consume(o),l+=String.fromCharCode(o),d):n(o)}function m(r){return 62===r?(e.consume(r),u.interrupt?t:C):n(r)}function g(t){return 47===t?(e.consume(t),w):58===t||95===t||(0,eE.CW)(t)?(e.consume(t),y):(0,eE.On)(t)?(e.consume(t),g):w(t)}function y(t){return 45===t||46===t||58===t||95===t||(0,eE.lV)(t)?(e.consume(t),y):k(t)}function k(t){return 61===t?(e.consume(t),x):(0,eE.On)(t)?(e.consume(t),k):g(t)}function x(t){return null===t||60===t||61===t||62===t||96===t?n(t):34===t||39===t?(e.consume(t),a=t,v):(0,eE.On)(t)?(e.consume(t),x):function t(n){return null===n||34===n||39===n||47===n||60===n||61===n||62===n||96===n||(0,eE.Ee)(n)?k(n):(e.consume(n),t)}(t)}function v(t){return t===a?(e.consume(t),a=null,b):null===t||(0,eE.HP)(t)?n(t):(e.consume(t),v)}function b(e){return 47===e||62===e||(0,eE.On)(e)?g(e):n(e)}function w(t){return 62===t?(e.consume(t),S):n(t)}function S(t){return null===t||(0,eE.HP)(t)?C(t):(0,eE.On)(t)?(e.consume(t),S):n(t)}function C(t){return 45===t&&2===r?(e.consume(t),I):60===t&&1===r?(e.consume(t),T):62===t&&4===r?(e.consume(t),F):63===t&&3===r?(e.consume(t),L):93===t&&5===r?(e.consume(t),A):(0,eE.HP)(t)&&(6===r||7===r)?(e.exit("htmlFlowData"),e.check(e1,N,E)(t)):null===t||(0,eE.HP)(t)?(e.exit("htmlFlowData"),E(t)):(e.consume(t),C)}function E(t){return e.check(e2,P,N)(t)}function P(t){return e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),O}function O(t){return null===t||(0,eE.HP)(t)?E(t):(e.enter("htmlFlowData"),C(t))}function I(t){return 45===t?(e.consume(t),L):C(t)}function T(t){return 47===t?(e.consume(t),l="",D):C(t)}function D(t){if(62===t){let n=l.toLowerCase();return e0.includes(n)?(e.consume(t),F):C(t)}return(0,eE.CW)(t)&&l.length<8?(e.consume(t),l+=String.fromCharCode(t),D):C(t)}function A(t){return 93===t?(e.consume(t),L):C(t)}function L(t){return 62===t?(e.consume(t),F):45===t&&2===r?(e.consume(t),L):C(t)}function F(t){return null===t||(0,eE.HP)(t)?(e.exit("htmlFlowData"),N(t)):(e.consume(t),F)}function N(n){return e.exit("htmlFlow"),t(n)}}},61:eZ,95:eH,96:e9,126:e9},td={38:e6,92:e7},tm={[-5]:e8,[-4]:e8,[-3]:e8,33:tl,38:e6,42:ta,60:[{name:"autolink",tokenize:function(e,t,n){let r=0;return function(t){return e.enter("autolink"),e.enter("autolinkMarker"),e.consume(t),e.exit("autolinkMarker"),e.enter("autolinkProtocol"),i};function i(t){return(0,eE.CW)(t)?(e.consume(t),l):64===t?n(t):a(t)}function l(t){return 43===t||45===t||46===t||(0,eE.lV)(t)?(r=1,function t(n){return 58===n?(e.consume(n),r=0,o):(43===n||45===n||46===n||(0,eE.lV)(n))&&r++<32?(e.consume(n),t):(r=0,a(n))}(t)):a(t)}function o(r){return 62===r?(e.exit("autolinkProtocol"),e.enter("autolinkMarker"),e.consume(r),e.exit("autolinkMarker"),e.exit("autolink"),t):null===r||32===r||60===r||(0,eE.JQ)(r)?n(r):(e.consume(r),o)}function a(t){return 64===t?(e.consume(t),u):(0,eE.cx)(t)?(e.consume(t),a):n(t)}function u(i){return(0,eE.lV)(i)?function i(l){return 46===l?(e.consume(l),r=0,u):62===l?(e.exit("autolinkProtocol").type="autolinkEmail",e.enter("autolinkMarker"),e.consume(l),e.exit("autolinkMarker"),e.exit("autolink"),t):function t(l){if((45===l||(0,eE.lV)(l))&&r++<63){let n=45===l?t:i;return e.consume(l),n}return n(l)}(l)}(i):n(i)}}},{name:"htmlText",tokenize:function(e,t,n){let r,i,l;let o=this;return function(t){return e.enter("htmlText"),e.enter("htmlTextData"),e.consume(t),a};function a(t){return 33===t?(e.consume(t),u):47===t?(e.consume(t),v):63===t?(e.consume(t),k):(0,eE.CW)(t)?(e.consume(t),w):n(t)}function u(t){return 45===t?(e.consume(t),s):91===t?(e.consume(t),i=0,h):(0,eE.CW)(t)?(e.consume(t),y):n(t)}function s(t){return 45===t?(e.consume(t),p):n(t)}function c(t){return null===t?n(t):45===t?(e.consume(t),f):(0,eE.HP)(t)?(l=c,D(t)):(e.consume(t),c)}function f(t){return 45===t?(e.consume(t),p):c(t)}function p(e){return 62===e?T(e):45===e?f(e):c(e)}function h(t){let r="CDATA[";return t===r.charCodeAt(i++)?(e.consume(t),i===r.length?d:h):n(t)}function d(t){return null===t?n(t):93===t?(e.consume(t),m):(0,eE.HP)(t)?(l=d,D(t)):(e.consume(t),d)}function m(t){return 93===t?(e.consume(t),g):d(t)}function g(t){return 62===t?T(t):93===t?(e.consume(t),g):d(t)}function y(t){return null===t||62===t?T(t):(0,eE.HP)(t)?(l=y,D(t)):(e.consume(t),y)}function k(t){return null===t?n(t):63===t?(e.consume(t),x):(0,eE.HP)(t)?(l=k,D(t)):(e.consume(t),k)}function x(e){return 62===e?T(e):k(e)}function v(t){return(0,eE.CW)(t)?(e.consume(t),b):n(t)}function b(t){return 45===t||(0,eE.lV)(t)?(e.consume(t),b):function t(n){return(0,eE.HP)(n)?(l=t,D(n)):(0,eE.On)(n)?(e.consume(n),t):T(n)}(t)}function w(t){return 45===t||(0,eE.lV)(t)?(e.consume(t),w):47===t||62===t||(0,eE.Ee)(t)?S(t):n(t)}function S(t){return 47===t?(e.consume(t),T):58===t||95===t||(0,eE.CW)(t)?(e.consume(t),C):(0,eE.HP)(t)?(l=S,D(t)):(0,eE.On)(t)?(e.consume(t),S):T(t)}function C(t){return 45===t||46===t||58===t||95===t||(0,eE.lV)(t)?(e.consume(t),C):function t(n){return 61===n?(e.consume(n),E):(0,eE.HP)(n)?(l=t,D(n)):(0,eE.On)(n)?(e.consume(n),t):S(n)}(t)}function E(t){return null===t||60===t||61===t||62===t||96===t?n(t):34===t||39===t?(e.consume(t),r=t,P):(0,eE.HP)(t)?(l=E,D(t)):(0,eE.On)(t)?(e.consume(t),E):(e.consume(t),O)}function P(t){return t===r?(e.consume(t),r=void 0,I):null===t?n(t):(0,eE.HP)(t)?(l=P,D(t)):(e.consume(t),P)}function O(t){return null===t||34===t||39===t||60===t||61===t||96===t?n(t):47===t||62===t||(0,eE.Ee)(t)?S(t):(e.consume(t),O)}function I(e){return 47===e||62===e||(0,eE.Ee)(e)?S(e):n(e)}function T(r){return 62===r?(e.consume(r),e.exit("htmlTextData"),e.exit("htmlText"),t):n(r)}function D(t){return e.exit("htmlTextData"),e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),A}function A(t){return(0,eE.On)(t)?(0,eC.N)(e,L,"linePrefix",o.parser.constructs.disable.null.includes("codeIndented")?void 0:4)(t):L(t)}function L(t){return e.enter("htmlTextData"),l(t)}}}],91:ts,92:[{name:"hardBreakEscape",tokenize:function(e,t,n){return function(t){return e.enter("hardBreakEscape"),e.consume(t),r};function r(r){return(0,eE.HP)(r)?(e.exit("hardBreakEscape"),t(r)):n(r)}}},e7],93:tt,95:ta,96:{name:"codeText",previous:function(e){return 96!==e||"characterEscape"===this.events[this.events.length-1][1].type},resolve:function(e){let t,n,r=e.length-4,i=3;if(("lineEnding"===e[3][1].type||"space"===e[i][1].type)&&("lineEnding"===e[r][1].type||"space"===e[r][1].type)){for(t=i;++t13&&n<32||n>126&&n<160||n>55295&&n<57344||n>64975&&n<65008||(65535&n)==65535||(65535&n)==65534||n>1114111?"�":String.fromCodePoint(n)}let tb=/\\([!-/:-@[-`{-~])|&(#(?:\d{1,7}|x[\da-f]{1,6})|[\da-z]{1,31});/gi;function tw(e,t,n){if(t)return t;if(35===n.charCodeAt(0)){let e=n.charCodeAt(1),t=120===e||88===e;return tv(n.slice(t?2:1),t?16:10)}return e5(n)||e}let tS={}.hasOwnProperty;function tC(e){return{line:e.line,column:e.column,offset:e.offset}}function tE(e,t){if(e)throw Error("Cannot close `"+e.type+"` ("+K({start:e.start,end:e.end})+"): a different token (`"+t.type+"`, "+K({start:t.start,end:t.end})+") is open");throw Error("Cannot close document, a token (`"+t.type+"`, "+K({start:t.start,end:t.end})+") is still open")}function tP(e){let t=this;t.parser=function(n){var r,l;let o,a,u,s;return"string"!=typeof(r={...t.data("settings"),...e,extensions:t.data("micromarkExtensions")||[],mdastExtensions:t.data("fromMarkdownExtensions")||[]})&&(l=r,r=void 0),(function(e){let t={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:r(y),autolinkProtocol:s,autolinkEmail:s,atxHeading:r(d),blockQuote:r(function(){return{type:"blockquote",children:[]}}),characterEscape:s,characterReference:s,codeFenced:r(h),codeFencedFenceInfo:i,codeFencedFenceMeta:i,codeIndented:r(h,i),codeText:r(function(){return{type:"inlineCode",value:""}},i),codeTextData:s,data:s,codeFlowValue:s,definition:r(function(){return{type:"definition",identifier:"",label:null,title:null,url:""}}),definitionDestinationString:i,definitionLabelString:i,definitionTitleString:i,emphasis:r(function(){return{type:"emphasis",children:[]}}),hardBreakEscape:r(m),hardBreakTrailing:r(m),htmlFlow:r(g,i),htmlFlowData:s,htmlText:r(g,i),htmlTextData:s,image:r(function(){return{type:"image",title:null,url:"",alt:null}}),label:i,link:r(y),listItem:r(function(e){return{type:"listItem",spread:e._spread,checked:null,children:[]}}),listItemValue:function(e){this.data.expectingFirstListItemValue&&(this.stack[this.stack.length-2].start=Number.parseInt(this.sliceSerialize(e),10),this.data.expectingFirstListItemValue=void 0)},listOrdered:r(k,function(){this.data.expectingFirstListItemValue=!0}),listUnordered:r(k),paragraph:r(function(){return{type:"paragraph",children:[]}}),reference:function(){this.data.referenceType="collapsed"},referenceString:i,resourceDestinationString:i,resourceTitleString:i,setextHeading:r(d),strong:r(function(){return{type:"strong",children:[]}}),thematicBreak:r(function(){return{type:"thematicBreak"}})},exit:{atxHeading:o(),atxHeadingSequence:function(e){let t=this.stack[this.stack.length-1];if(!t.depth){let n=this.sliceSerialize(e).length;t.depth=n}},autolink:o(),autolinkEmail:function(e){c.call(this,e),this.stack[this.stack.length-1].url="mailto:"+this.sliceSerialize(e)},autolinkProtocol:function(e){c.call(this,e),this.stack[this.stack.length-1].url=this.sliceSerialize(e)},blockQuote:o(),characterEscapeValue:c,characterReferenceMarkerHexadecimal:p,characterReferenceMarkerNumeric:p,characterReferenceValue:function(e){let t;let n=this.sliceSerialize(e),r=this.data.characterReferenceType;r?(t=tv(n,"characterReferenceMarkerNumeric"===r?10:16),this.data.characterReferenceType=void 0):t=e5(n);let i=this.stack[this.stack.length-1];i.value+=t},characterReference:function(e){this.stack.pop().position.end=tC(e.end)},codeFenced:o(function(){let e=this.resume();this.stack[this.stack.length-1].value=e.replace(/^(\r?\n|\r)|(\r?\n|\r)$/g,""),this.data.flowCodeInside=void 0}),codeFencedFence:function(){this.data.flowCodeInside||(this.buffer(),this.data.flowCodeInside=!0)},codeFencedFenceInfo:function(){let e=this.resume();this.stack[this.stack.length-1].lang=e},codeFencedFenceMeta:function(){let e=this.resume();this.stack[this.stack.length-1].meta=e},codeFlowValue:c,codeIndented:o(function(){let e=this.resume();this.stack[this.stack.length-1].value=e.replace(/(\r?\n|\r)$/g,"")}),codeText:o(function(){let e=this.resume();this.stack[this.stack.length-1].value=e}),codeTextData:c,data:c,definition:o(),definitionDestinationString:function(){let e=this.resume();this.stack[this.stack.length-1].url=e},definitionLabelString:function(e){let t=this.resume(),n=this.stack[this.stack.length-1];n.label=t,n.identifier=(0,e$.B)(this.sliceSerialize(e)).toLowerCase()},definitionTitleString:function(){let e=this.resume();this.stack[this.stack.length-1].title=e},emphasis:o(),hardBreakEscape:o(f),hardBreakTrailing:o(f),htmlFlow:o(function(){let e=this.resume();this.stack[this.stack.length-1].value=e}),htmlFlowData:c,htmlText:o(function(){let e=this.resume();this.stack[this.stack.length-1].value=e}),htmlTextData:c,image:o(function(){let e=this.stack[this.stack.length-1];if(this.data.inReference){let t=this.data.referenceType||"shortcut";e.type+="Reference",e.referenceType=t,delete e.url,delete e.title}else delete e.identifier,delete e.label;this.data.referenceType=void 0}),label:function(){let e=this.stack[this.stack.length-1],t=this.resume(),n=this.stack[this.stack.length-1];if(this.data.inReference=!0,"link"===n.type){let t=e.children;n.children=t}else n.alt=t},labelText:function(e){let t=this.sliceSerialize(e),n=this.stack[this.stack.length-2];n.label=t.replace(tb,tw),n.identifier=(0,e$.B)(t).toLowerCase()},lineEnding:function(e){let n=this.stack[this.stack.length-1];if(this.data.atHardBreak){n.children[n.children.length-1].position.end=tC(e.end),this.data.atHardBreak=void 0;return}!this.data.setextHeadingSlurpLineEnding&&t.canContainEols.includes(n.type)&&(s.call(this,e),c.call(this,e))},link:o(function(){let e=this.stack[this.stack.length-1];if(this.data.inReference){let t=this.data.referenceType||"shortcut";e.type+="Reference",e.referenceType=t,delete e.url,delete e.title}else delete e.identifier,delete e.label;this.data.referenceType=void 0}),listItem:o(),listOrdered:o(),listUnordered:o(),paragraph:o(),referenceString:function(e){let t=this.resume(),n=this.stack[this.stack.length-1];n.label=t,n.identifier=(0,e$.B)(this.sliceSerialize(e)).toLowerCase(),this.data.referenceType="full"},resourceDestinationString:function(){let e=this.resume();this.stack[this.stack.length-1].url=e},resourceTitleString:function(){let e=this.resume();this.stack[this.stack.length-1].title=e},resource:function(){this.data.inReference=void 0},setextHeading:o(function(){this.data.setextHeadingSlurpLineEnding=void 0}),setextHeadingLineSequence:function(e){this.stack[this.stack.length-1].depth=61===this.sliceSerialize(e).codePointAt(0)?1:2},setextHeadingText:function(){this.data.setextHeadingSlurpLineEnding=!0},strong:o(),thematicBreak:o()}};(function e(t,n){let r=-1;for(;++r0){let e=o.tokenStack[o.tokenStack.length-1];(e[1]||tE).call(o,void 0,e[0])}for(r.position={start:tC(e.length>0?e[0][1].start:{line:1,column:1,offset:0}),end:tC(e.length>0?e[e.length-2][1].end:{line:1,column:1,offset:0})},c=-1;++c-1){let e=n[0];"string"==typeof e?n[0]=e.slice(i):n.shift()}o>0&&n.push(e[l].slice(0,o))}return n}(o,e)}function p(){let{_bufferIndex:e,_index:t,line:n,column:i,offset:l}=r;return{_bufferIndex:e,_index:t,line:n,column:i,offset:l}}function h(e,t){t.restore()}function d(e,t){return function(n,i,l){let o,c,f,h;return Array.isArray(n)?d(n):"tokenize"in n?d([n]):function(e){let t=null!==e&&n[e],r=null!==e&&n.null;return d([...Array.isArray(t)?t:t?[t]:[],...Array.isArray(r)?r:r?[r]:[]])(e)};function d(e){return(o=e,c=0,0===e.length)?l:m(e[c])}function m(e){return function(n){return(h=function(){let e=p(),t=s.previous,n=s.currentConstruct,i=s.events.length,l=Array.from(a);return{from:i,restore:function(){r=e,s.previous=t,s.currentConstruct=n,s.events.length=i,a=l,g()}}}(),f=e,e.partial||(s.currentConstruct=e),e.name&&s.parser.constructs.disable.null.includes(e.name))?k(n):e.tokenize.call(t?Object.assign(Object.create(s),t):s,u,y,k)(n)}}function y(t){return e(f,h),i}function k(e){return(h.restore(),++c{let n=(t,n)=>(e.set(n,t),t),r=i=>{if(e.has(i))return e.get(i);let[l,o]=t[i];switch(l){case 0:case -1:return n(o,i);case 1:{let e=n([],i);for(let t of o)e.push(r(t));return e}case 2:{let e=n({},i);for(let[t,n]of o)e[r(t)]=r(n);return e}case 3:return n(new Date(o),i);case 4:{let{source:e,flags:t}=o;return n(new RegExp(e,t),i)}case 5:{let e=n(new Map,i);for(let[t,n]of o)e.set(r(t),r(n));return e}case 6:{let e=n(new Set,i);for(let t of o)e.add(r(t));return e}case 7:{let{name:e,message:t}=o;return n(new tO[e](t),i)}case 8:return n(BigInt(o),i);case"BigInt":return n(Object(BigInt(o)),i);case"ArrayBuffer":return n(new Uint8Array(o).buffer,o);case"DataView":{let{buffer:e}=new Uint8Array(o);return n(new DataView(e),o)}}return n(new tO[l](o),i)};return r},tT=e=>tI(new Map,e)(0),{toString:tD}={},{keys:tA}=Object,tL=e=>{let t=typeof e;if("object"!==t||!e)return[0,t];let n=tD.call(e).slice(8,-1);switch(n){case"Array":return[1,""];case"Object":return[2,""];case"Date":return[3,""];case"RegExp":return[4,""];case"Map":return[5,""];case"Set":return[6,""];case"DataView":return[1,n]}return n.includes("Array")?[1,n]:n.includes("Error")?[7,n]:[2,n]},tF=([e,t])=>0===e&&("function"===t||"symbol"===t),tN=(e,t,n,r)=>{let i=(e,t)=>{let i=r.push(e)-1;return n.set(t,i),i},l=r=>{if(n.has(r))return n.get(r);let[o,a]=tL(r);switch(o){case 0:{let t=r;switch(a){case"bigint":o=8,t=r.toString();break;case"function":case"symbol":if(e)throw TypeError("unable to serialize "+a);t=null;break;case"undefined":return i([-1],r)}return i([o,t],r)}case 1:{if(a){let e=r;return"DataView"===a?e=new Uint8Array(r.buffer):"ArrayBuffer"===a&&(e=new Uint8Array(r)),i([a,[...e]],r)}let e=[],t=i([o,e],r);for(let t of r)e.push(l(t));return t}case 2:{if(a)switch(a){case"BigInt":return i([a,r.toString()],r);case"Boolean":case"Number":case"String":return i([a,r.valueOf()],r)}if(t&&"toJSON"in r)return l(r.toJSON());let n=[],u=i([o,n],r);for(let t of tA(r))(e||!tF(tL(r[t])))&&n.push([l(t),l(r[t])]);return u}case 3:return i([o,r.toISOString()],r);case 4:{let{source:e,flags:t}=r;return i([o,{source:e,flags:t}],r)}case 5:{let t=[],n=i([o,t],r);for(let[n,i]of r)(e||!(tF(tL(n))||tF(tL(i))))&&t.push([l(n),l(i)]);return n}case 6:{let t=[],n=i([o,t],r);for(let n of r)(e||!tF(tL(n)))&&t.push(l(n));return n}}let{message:u}=r;return i([o,{name:a,message:u}],r)};return l},tM=(e,{json:t,lossy:n}={})=>{let r=[];return tN(!(t||n),!!t,new Map,r)(e),r},tz="function"==typeof structuredClone?(e,t)=>t&&("json"in t||"lossy"in t)?tT(tM(e,t)):structuredClone(e):(e,t)=>tT(tM(e,t));function tR(e){let t=[],n=-1,r=0,i=0;for(;++n55295&&l<57344){let t=e.charCodeAt(n+1);l<56320&&t>56319&&t<57344?(o=String.fromCharCode(l,t),i=1):o="�"}else o=String.fromCharCode(l);o&&(t.push(e.slice(r,n),encodeURIComponent(o)),r=n+i+1,o=""),i&&(n+=i,i=0)}return t.join("")+e.slice(r)}function tj(e,t){let n=[{type:"text",value:"↩"}];return t>1&&n.push({type:"element",tagName:"sup",properties:{},children:[{type:"text",value:String(t)}]}),n}function tH(e,t){return"Back to reference "+(e+1)+(t>1?"-"+t:"")}var t_=n(7885);function tB(e,t){let n=t.referenceType,r="]";if("collapsed"===n?r+="[]":"full"===n&&(r+="["+(t.label||t.identifier)+"]"),"imageReference"===t.type)return[{type:"text",value:"!["+t.alt+r}];let i=e.all(t),l=i[0];l&&"text"===l.type?l.value="["+l.value:i.unshift({type:"text",value:"["});let o=i[i.length-1];return o&&"text"===o.type?o.value+=r:i.push({type:"text",value:r}),i}function tV(e){let t=e.spread;return null==t?e.children.length>1:t}function tU(e,t,n){let r=0,i=e.length;if(t){let t=e.codePointAt(r);for(;9===t||32===t;)r++,t=e.codePointAt(r)}if(n){let t=e.codePointAt(i-1);for(;9===t||32===t;)i--,t=e.codePointAt(i-1)}return i>r?e.slice(r,i):""}let tq={blockquote:function(e,t){let n={type:"element",tagName:"blockquote",properties:{},children:e.wrap(e.all(t),!0)};return e.patch(t,n),e.applyData(t,n)},break:function(e,t){let n={type:"element",tagName:"br",properties:{},children:[]};return e.patch(t,n),[e.applyData(t,n),{type:"text",value:"\n"}]},code:function(e,t){let n=t.value?t.value+"\n":"",r={};t.lang&&(r.className=["language-"+t.lang]);let i={type:"element",tagName:"code",properties:r,children:[{type:"text",value:n}]};return t.meta&&(i.data={meta:t.meta}),e.patch(t,i),i={type:"element",tagName:"pre",properties:{},children:[i=e.applyData(t,i)]},e.patch(t,i),i},delete:function(e,t){let n={type:"element",tagName:"del",properties:{},children:e.all(t)};return e.patch(t,n),e.applyData(t,n)},emphasis:function(e,t){let n={type:"element",tagName:"em",properties:{},children:e.all(t)};return e.patch(t,n),e.applyData(t,n)},footnoteReference:function(e,t){let n;let r="string"==typeof e.options.clobberPrefix?e.options.clobberPrefix:"user-content-",i=String(t.identifier).toUpperCase(),l=tR(i.toLowerCase()),o=e.footnoteOrder.indexOf(i),a=e.footnoteCounts.get(i);void 0===a?(a=0,e.footnoteOrder.push(i),n=e.footnoteOrder.length):n=o+1,a+=1,e.footnoteCounts.set(i,a);let u={type:"element",tagName:"a",properties:{href:"#"+r+"fn-"+l,id:r+"fnref-"+l+(a>1?"-"+a:""),dataFootnoteRef:!0,ariaDescribedBy:["footnote-label"]},children:[{type:"text",value:String(n)}]};e.patch(t,u);let s={type:"element",tagName:"sup",properties:{},children:[u]};return e.patch(t,s),e.applyData(t,s)},heading:function(e,t){let n={type:"element",tagName:"h"+t.depth,properties:{},children:e.all(t)};return e.patch(t,n),e.applyData(t,n)},html:function(e,t){if(e.options.allowDangerousHtml){let n={type:"raw",value:t.value};return e.patch(t,n),e.applyData(t,n)}},imageReference:function(e,t){let n=String(t.identifier).toUpperCase(),r=e.definitionById.get(n);if(!r)return tB(e,t);let i={src:tR(r.url||""),alt:t.alt};null!==r.title&&void 0!==r.title&&(i.title=r.title);let l={type:"element",tagName:"img",properties:i,children:[]};return e.patch(t,l),e.applyData(t,l)},image:function(e,t){let n={src:tR(t.url)};null!==t.alt&&void 0!==t.alt&&(n.alt=t.alt),null!==t.title&&void 0!==t.title&&(n.title=t.title);let r={type:"element",tagName:"img",properties:n,children:[]};return e.patch(t,r),e.applyData(t,r)},inlineCode:function(e,t){let n={type:"text",value:t.value.replace(/\r?\n|\r/g," ")};e.patch(t,n);let r={type:"element",tagName:"code",properties:{},children:[n]};return e.patch(t,r),e.applyData(t,r)},linkReference:function(e,t){let n=String(t.identifier).toUpperCase(),r=e.definitionById.get(n);if(!r)return tB(e,t);let i={href:tR(r.url||"")};null!==r.title&&void 0!==r.title&&(i.title=r.title);let l={type:"element",tagName:"a",properties:i,children:e.all(t)};return e.patch(t,l),e.applyData(t,l)},link:function(e,t){let n={href:tR(t.url)};null!==t.title&&void 0!==t.title&&(n.title=t.title);let r={type:"element",tagName:"a",properties:n,children:e.all(t)};return e.patch(t,r),e.applyData(t,r)},listItem:function(e,t,n){let r=e.all(t),i=n?function(e){let t=!1;if("list"===e.type){t=e.spread||!1;let n=e.children,r=-1;for(;!t&&++r0&&e.children.unshift({type:"text",value:" "}),e.children.unshift({type:"element",tagName:"input",properties:{type:"checkbox",checked:t.checked,disabled:!0},children:[]}),l.className=["task-list-item"]}let a=-1;for(;++a0){let r={type:"element",tagName:"tbody",properties:{},children:e.wrap(n,!0)},l=$(t.children[1]),o=Q(t.children[t.children.length-1]);l&&o&&(r.position={start:l,end:o}),i.push(r)}let l={type:"element",tagName:"table",properties:{},children:e.wrap(i,!0)};return e.patch(t,l),e.applyData(t,l)},tableCell:function(e,t){let n={type:"element",tagName:"td",properties:{},children:e.all(t)};return e.patch(t,n),e.applyData(t,n)},tableRow:function(e,t,n){let r=n?n.children:void 0,i=0===(r?r.indexOf(t):1)?"th":"td",l=n&&"table"===n.type?n.align:void 0,o=l?l.length:t.children.length,a=-1,u=[];for(;++a0,!0),r[0]),i=r.index+r[0].length,r=n.exec(t);return l.push(tU(t.slice(i),i>0,!1)),l.join("")}(String(t.value))};return e.patch(t,n),e.applyData(t,n)},thematicBreak:function(e,t){let n={type:"element",tagName:"hr",properties:{},children:[]};return e.patch(t,n),e.applyData(t,n)},toml:tW,yaml:tW,definition:tW,footnoteDefinition:tW};function tW(){}let tY={}.hasOwnProperty,tQ={};function t$(e,t){e.position&&(t.position=function(e){let t=$(e),n=Q(e);if(t&&n)return{start:t,end:n}}(e))}function tJ(e,t){let n=t;if(e&&e.data){let t=e.data.hName,r=e.data.hChildren,i=e.data.hProperties;"string"==typeof t&&("element"===n.type?n.tagName=t:n={type:"element",tagName:t,properties:{},children:"children"in n?n.children:[n]}),"element"===n.type&&i&&Object.assign(n.properties,tz(i)),"children"in n&&n.children&&null!=r&&(n.children=r)}return n}function tK(e,t){let n=[],r=-1;for(t&&n.push({type:"text",value:"\n"});++r0&&n.push({type:"text",value:"\n"}),n}function tX(e){let t=0,n=e.charCodeAt(t);for(;9===n||32===n;)t++,n=e.charCodeAt(t);return e.slice(t)}function tZ(e,t){let n=function(e,t){let n=t||tQ,r=new Map,i=new Map,l={all:function(e){let t=[];if("children"in e){let n=e.children,r=-1;for(;++r0&&f.push({type:"text",value:" "});let e="string"==typeof n?n:n(u,c);"string"==typeof e&&(e={type:"text",value:e}),f.push({type:"element",tagName:"a",properties:{href:"#"+t+"fnref-"+s+(c>1?"-"+c:""),dataFootnoteBackref:"",ariaLabel:"string"==typeof r?r:r(u,c),className:["data-footnote-backref"]},children:Array.isArray(e)?e:[e]})}let h=l[l.length-1];if(h&&"element"===h.type&&"p"===h.tagName){let e=h.children[h.children.length-1];e&&"text"===e.type?e.value+=" ":h.children.push({type:"text",value:" "}),h.children.push(...f)}else l.push(...f);let d={type:"element",tagName:"li",properties:{id:t+"fn-"+s},children:e.wrap(l,!0)};e.patch(i,d),a.push(d)}if(0!==a.length)return{type:"element",tagName:"section",properties:{dataFootnotes:!0,className:["footnotes"]},children:[{type:"element",tagName:l,properties:{...tz(o),id:"footnote-label"},children:[{type:"text",value:i}]},{type:"text",value:"\n"},{type:"element",tagName:"ol",properties:{},children:e.wrap(a,!0)},{type:"text",value:"\n"}]}}(n),o=Array.isArray(r)?{type:"root",children:r}:r||{type:"root",children:[]};return i&&((0,l.ok)("children"in o),o.children.push({type:"text",value:"\n"},i)),o}function tG(e,t){return e&&"run"in e?async function(n,r){let i=tZ(n,{file:r,...t});await e.run(i,r)}:function(n,r){return tZ(n,{file:r,...e||t})}}function t0(e){if(e)throw e}var t1=n(9721);function t2(e){if("object"!=typeof e||null===e)return!1;let t=Object.getPrototypeOf(e);return(null===t||t===Object.prototype||null===Object.getPrototypeOf(t))&&!(Symbol.toStringTag in e)&&!(Symbol.iterator in e)}let t4={basename:function(e,t){let n;if(void 0!==t&&"string"!=typeof t)throw TypeError('"ext" argument must be a string');t9(e);let r=0,i=-1,l=e.length;if(void 0===t||0===t.length||t.length>e.length){for(;l--;)if(47===e.codePointAt(l)){if(n){r=l+1;break}}else i<0&&(n=!0,i=l+1);return i<0?"":e.slice(r,i)}if(t===e)return"";let o=-1,a=t.length-1;for(;l--;)if(47===e.codePointAt(l)){if(n){r=l+1;break}}else o<0&&(n=!0,o=l+1),a>-1&&(e.codePointAt(l)===t.codePointAt(a--)?a<0&&(i=l):(a=-1,i=o));return r===i?i=o:i<0&&(i=e.length),e.slice(r,i)},dirname:function(e){let t;if(t9(e),0===e.length)return".";let n=-1,r=e.length;for(;--r;)if(47===e.codePointAt(r)){if(t){n=r;break}}else t||(t=!0);return n<0?47===e.codePointAt(0)?"/":".":1===n&&47===e.codePointAt(0)?"//":e.slice(0,n)},extname:function(e){let t;t9(e);let n=e.length,r=-1,i=0,l=-1,o=0;for(;n--;){let a=e.codePointAt(n);if(47===a){if(t){i=n+1;break}continue}r<0&&(t=!0,r=n+1),46===a?l<0?l=n:1!==o&&(o=1):l>-1&&(o=-1)}return l<0||r<0||0===o||1===o&&l===r-1&&l===i+1?"":e.slice(l,r)},join:function(...e){let t,n=-1;for(;++n2){if((r=i.lastIndexOf("/"))!==i.length-1){r<0?(i="",l=0):l=(i=i.slice(0,r)).length-1-i.lastIndexOf("/"),o=u,a=0;continue}}else if(i.length>0){i="",l=0,o=u,a=0;continue}}t&&(i=i.length>0?i+"/..":"..",l=2)}else i.length>0?i+="/"+e.slice(o+1,u):i=e.slice(o+1,u),l=u-o-1;o=u,a=0}else 46===n&&a>-1?a++:a=-1}return i}(e,!t);return 0!==n.length||t||(n="."),n.length>0&&47===e.codePointAt(e.length-1)&&(n+="/"),t?"/"+n:n}(t)},sep:"/"};function t9(e){if("string"!=typeof e)throw TypeError("Path must be a string. Received "+JSON.stringify(e))}let t3={cwd:function(){return"/"}};function t5(e){return!!(null!==e&&"object"==typeof e&&"href"in e&&e.href&&"protocol"in e&&e.protocol&&void 0===e.auth)}let t6=["history","path","basename","stem","extname","dirname"];class t7{constructor(e){let t,n;t=e?t5(e)?{path:e}:"string"==typeof e||function(e){return!!(e&&"object"==typeof e&&"byteLength"in e&&"byteOffset"in e)}(e)?{value:e}:e:{},this.cwd="cwd"in t?"":t3.cwd(),this.data={},this.history=[],this.messages=[],this.value,this.map,this.result,this.stored;let r=-1;for(;++rt.length;o&&t.push(r);try{l=e.apply(this,t)}catch(e){if(o&&n)throw e;return r(e)}o||(l&&l.then&&"function"==typeof l.then?l.then(i,r):l instanceof Error?r(l):i(l))};function r(e,...i){n||(n=!0,t(e,...i))}function i(e){r(null,e)}})(a,i)(...o):r(null,...o)})(null,...t)},use:function(n){if("function"!=typeof n)throw TypeError("Expected `middelware` to be a function, not "+n);return e.push(n),t}};return t}()}copy(){let e=new ni,t=-1;for(;++t0){let[r,...l]=t,o=n[i][1];t2(o)&&t2(r)&&(r=t1(!0,o,r)),n[i]=[e,r,...l]}}}}let nl=new ni().freeze();function no(e,t){if("function"!=typeof t)throw TypeError("Cannot `"+e+"` without `parser`")}function na(e,t){if("function"!=typeof t)throw TypeError("Cannot `"+e+"` without `compiler`")}function nu(e,t){if(t)throw Error("Cannot call `"+e+"` on a frozen processor.\nCreate a new processor first, by calling it: use `processor()` instead of `processor`.")}function ns(e){if(!t2(e)||"string"!=typeof e.type)throw TypeError("Expected node, got `"+e+"`")}function nc(e,t,n){if(!n)throw Error("`"+e+"` finished async. Use `"+t+"` instead")}function nf(e){return e&&"object"==typeof e&&"message"in e&&"messages"in e?e:new t7(e)}let np=[],nh={allowDangerousHtml:!0},nd=/^(https?|ircs?|mailto|xmpp)$/i,nm=[{from:"astPlugins",id:"remove-buggy-html-in-markdown-parser"},{from:"allowDangerousHtml",id:"remove-buggy-html-in-markdown-parser"},{from:"allowNode",id:"replace-allownode-allowedtypes-and-disallowedtypes",to:"allowElement"},{from:"allowedTypes",id:"replace-allownode-allowedtypes-and-disallowedtypes",to:"allowedElements"},{from:"disallowedTypes",id:"replace-allownode-allowedtypes-and-disallowedtypes",to:"disallowedElements"},{from:"escapeHtml",id:"remove-buggy-html-in-markdown-parser"},{from:"includeElementIndex",id:"#remove-includeelementindex"},{from:"includeNodeIndex",id:"change-includenodeindex-to-includeelementindex"},{from:"linkTarget",id:"remove-linktarget"},{from:"plugins",id:"change-plugins-to-remarkplugins",to:"remarkPlugins"},{from:"rawSourcePos",id:"#remove-rawsourcepos"},{from:"renderers",id:"change-renderers-to-components",to:"components"},{from:"source",id:"change-source-to-children",to:"children"},{from:"sourcePos",id:"#remove-sourcepos"},{from:"transformImageUri",id:"#add-urltransform",to:"urlTransform"},{from:"transformLinkUri",id:"#add-urltransform",to:"urlTransform"}];function ng(e){let t=e.allowedElements,n=e.allowElement,r=e.children||"",i=e.className,o=e.components,a=e.disallowedElements,u=e.rehypePlugins||np,s=e.remarkPlugins||np,c=e.remarkRehypeOptions?{...e.remarkRehypeOptions,...nh}:nh,f=e.skipHtml,p=e.unwrapDisallowed,h=e.urlTransform||ny,d=nl().use(tP).use(s).use(tG,c).use(u),m=new t7;for(let n of("string"==typeof r?m.value=r:(0,l.HB)("Unexpected value `"+r+"` for `children` prop, expected `string`"),t&&a&&(0,l.HB)("Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other"),nm))Object.hasOwn(e,n.from)&&(0,l.HB)("Unexpected `"+n.from+"` prop, "+(n.to?"use `"+n.to+"` instead":"remove it")+" (see for more info)");let g=d.parse(m),y=d.runSync(g,m);return i&&(y={type:"element",tagName:"div",properties:{className:i},children:"root"===y.type?y.children:[y]}),(0,t_.YR)(y,function(e,r,i){if("raw"===e.type&&i&&"number"==typeof r)return f?i.children.splice(r,1):i.children[r]={type:"text",value:e.value},r;if("element"===e.type){let t;for(t in eg)if(Object.hasOwn(eg,t)&&Object.hasOwn(e.properties,t)){let n=e.properties[t],r=eg[t];(null===r||r.includes(e.tagName))&&(e.properties[t]=h(String(n||""),t,e))}}if("element"===e.type){let l=t?!t.includes(e.tagName):!!a&&a.includes(e.tagName);if(!l&&n&&"number"==typeof r&&(l=!n(e,r,i)),l&&i&&"number"==typeof r)return p&&e.children?i.children.splice(r,1,...e.children):i.children.splice(r,1),r}}),function(e,t){var n,r,i;let l;if(!t||void 0===t.Fragment)throw TypeError("Expected `Fragment` in options");let o=t.filePath||void 0;if(t.development){if("function"!=typeof t.jsxDEV)throw TypeError("Expected `jsxDEV` in options when `development: true`");n=t.jsxDEV,l=function(e,t,r,i){let l=Array.isArray(r.children),a=$(e);return n(t,r,i,l,{columnNumber:a?a.column-1:void 0,fileName:o,lineNumber:a?a.line:void 0},void 0)}}else{if("function"!=typeof t.jsx)throw TypeError("Expected `jsx` in production options");if("function"!=typeof t.jsxs)throw TypeError("Expected `jsxs` in production options");r=t.jsx,i=t.jsxs,l=function(e,t,n,l){let o=Array.isArray(n.children)?i:r;return l?o(t,n,l):o(t,n)}}let a={Fragment:t.Fragment,ancestors:[],components:t.components||{},create:l,elementAttributeNameCase:t.elementAttributeNameCase||"react",evaluater:t.createEvaluater?t.createEvaluater():void 0,filePath:o,ignoreInvalidStyle:t.ignoreInvalidStyle||!1,passKeys:!1!==t.passKeys,passNode:t.passNode||!1,schema:"svg"===t.space?j:R,stylePropertyNameCase:t.stylePropertyNameCase||"dom",tableCellAlignToStyle:!1!==t.tableCellAlignToStyle},u=eu(a,e,void 0);return u&&"string"!=typeof u?u:a.create(e,a.Fragment,{children:u||void 0},void 0)}(y,{Fragment:ey.Fragment,components:o,ignoreInvalidStyle:!0,jsx:ey.jsx,jsxs:ey.jsxs,passKeys:!0,passNode:!0})}function ny(e){let t=e.indexOf(":"),n=e.indexOf("?"),r=e.indexOf("#"),i=e.indexOf("/");return -1===t||-1!==i&&t>i||-1!==n&&t>n||-1!==r&&t>r||nd.test(e.slice(0,t))?e:""}},6246:(e,t,n)=>{"use strict";function r(e,t){let n=String(e);if("string"!=typeof t)throw TypeError("Expected character");let r=0,i=n.indexOf(t);for(;-1!==i;)r++,i=n.indexOf(t,i+t.length);return r}n.d(t,{A:()=>eN});var i=n(9424),l=n(565),o=n(7795),a=n(7816);let u="phrasing",s=["autolink","link","image","label"];function c(e){this.enter({type:"link",title:null,url:"",children:[]},e)}function f(e){this.config.enter.autolinkProtocol.call(this,e)}function p(e){this.config.exit.autolinkProtocol.call(this,e)}function h(e){this.config.exit.data.call(this,e);let t=this.stack[this.stack.length-1];(0,i.ok)("link"===t.type),t.url="http://"+this.sliceSerialize(e)}function d(e){this.config.exit.autolinkEmail.call(this,e)}function m(e){this.exit(e)}function g(e){!function(e,t,n){let r=(0,a.C)((n||{}).ignore||[]),i=function(e){let t=[];if(!Array.isArray(e))throw TypeError("Expected find and replace tuple or list of tuples");let n=!e[0]||Array.isArray(e[0])?e:[e],r=-1;for(;++r0?{type:"text",value:l}:void 0),!1===l?r.lastIndex=n+1:(a!==n&&c.push({type:"text",value:e.value.slice(a,n)}),Array.isArray(l)?c.push(...l):l&&c.push(l),a=n+f[0].length,s=!0),!r.global)break;f=r.exec(e.value)}return s?(a?\]}]+$/.exec(e);if(!t)return[e,void 0];e=e.slice(0,t.index);let n=t[0],i=n.indexOf(")"),l=r(e,"("),o=r(e,")");for(;-1!==i&&l>o;)e+=n.slice(0,i+1),i=(n=n.slice(i+1)).indexOf(")"),o++;return[e,n]}(n+i);if(!a[0])return!1;let u={type:"link",title:null,url:o+t+a[0],children:[{type:"text",value:t+a[0]}]};return a[1]?[u,{type:"text",value:a[1]}]:u}function k(e,t,n,r){return!(!x(r,!0)||/[-\d_]$/.test(n))&&{type:"link",title:null,url:"mailto:"+t+"@"+n,children:[{type:"text",value:t+"@"+n}]}}function x(e,t){let n=e.input.charCodeAt(e.index-1);return(0===e.index||(0,l.Ny)(n)||(0,l.es)(n))&&(!t||47!==n)}var v=n(8213);function b(){this.buffer()}function w(e){this.enter({type:"footnoteReference",identifier:"",label:""},e)}function S(){this.buffer()}function C(e){this.enter({type:"footnoteDefinition",identifier:"",label:"",children:[]},e)}function E(e){let t=this.resume(),n=this.stack[this.stack.length-1];(0,i.ok)("footnoteReference"===n.type),n.identifier=(0,v.B)(this.sliceSerialize(e)).toLowerCase(),n.label=t}function P(e){this.exit(e)}function O(e){let t=this.resume(),n=this.stack[this.stack.length-1];(0,i.ok)("footnoteDefinition"===n.type),n.identifier=(0,v.B)(this.sliceSerialize(e)).toLowerCase(),n.label=t}function I(e){this.exit(e)}function T(e,t,n,r){let i=n.createTracker(r),l=i.move("[^"),o=n.enter("footnoteReference"),a=n.enter("reference");return l+=i.move(n.safe(n.associationId(e),{after:"]",before:l})),a(),o(),l+=i.move("]")}function D(e,t,n){return 0===t?e:A(e,t,n)}function A(e,t,n){return(n?"":" ")+e}T.peek=function(){return"["};let L=["autolink","destinationLiteral","destinationRaw","reference","titleQuote","titleApostrophe"];function F(e){this.enter({type:"delete",children:[]},e)}function N(e){this.exit(e)}function M(e,t,n,r){let i=n.createTracker(r),l=n.enter("strikethrough"),o=i.move("~~");return o+=n.containerPhrasing(e,{...i.current(),before:o,after:"~"}),o+=i.move("~~"),l(),o}function z(e){return e.length}function R(e){let t="string"==typeof e?e.codePointAt(0):0;return 67===t||99===t?99:76===t||108===t?108:82===t||114===t?114:0}M.peek=function(){return"~"};var j=n(7492);n(7885);var H=n(4737);function _(e,t,n){let r=e.value||"",i="`",l=-1;for(;RegExp("(^|[^`])"+i+"([^`]|$)").test(r);)i+="`";for(/[^ \r\n]/.test(r)&&(/^[ \r\n]/.test(r)&&/[ \r\n]$/.test(r)||/^`|`$/.test(r))&&(r=" "+r+" ");++l-1?t.start:1)+(!1===n.options.incrementListMarker?0:t.children.indexOf(e))+l);let o=l.length+1;("tab"===i||"mixed"===i&&(t&&"list"===t.type&&t.spread||e.spread))&&(o=4*Math.ceil(o/4));let a=n.createTracker(r);a.move(l+" ".repeat(o-l.length)),a.shift(o);let u=n.enter("listItem"),s=n.indentLines(n.containerFlow(e,a.current()),function(e,t,n){return t?(n?"":" ".repeat(o))+e:(n?l:l+" ".repeat(o-l.length))+e});return u(),s}};function V(e){let t=e._align;(0,i.ok)(t,"expected `_align` on table"),this.enter({type:"table",align:t.map(function(e){return"none"===e?null:e}),children:[]},e),this.data.inTable=!0}function U(e){this.exit(e),this.data.inTable=void 0}function q(e){this.enter({type:"tableRow",children:[]},e)}function W(e){this.exit(e)}function Y(e){this.enter({type:"tableCell",children:[]},e)}function Q(e){let t=this.resume();this.data.inTable&&(t=t.replace(/\\([\\|])/g,$));let n=this.stack[this.stack.length-1];(0,i.ok)("inlineCode"===n.type),n.value=t,this.exit(e)}function $(e,t){return"|"===t?t:e}function J(e){let t=this.stack[this.stack.length-2];(0,i.ok)("listItem"===t.type),t.checked="taskListCheckValueChecked"===e.type}function K(e){let t=this.stack[this.stack.length-2];if(t&&"listItem"===t.type&&"boolean"==typeof t.checked){let e=this.stack[this.stack.length-1];(0,i.ok)("paragraph"===e.type);let n=e.children[0];if(n&&"text"===n.type){let r;let i=t.children,l=-1;for(;++l0&&!n&&(e[e.length-1][1]._gfmAutolinkLiteralWalkedInto=!0),n}ea[43]=eo,ea[45]=eo,ea[46]=eo,ea[95]=eo,ea[72]=[eo,el],ea[104]=[eo,el],ea[87]=[eo,ei],ea[119]=[eo,ei];var ed=n(8560),em=n(8090);let eg={tokenize:function(e,t,n){let r=this;return(0,em.N)(e,function(e){let i=r.events[r.events.length-1];return i&&"gfmFootnoteDefinitionIndent"===i[1].type&&4===i[2].sliceSerialize(i[1],!0).length?t(e):n(e)},"gfmFootnoteDefinitionIndent",5)},partial:!0};function ey(e,t,n){let r;let i=this,l=i.events.length,o=i.parser.gfmFootnotes||(i.parser.gfmFootnotes=[]);for(;l--;){let e=i.events[l][1];if("labelImage"===e.type){r=e;break}if("gfmFootnoteCall"===e.type||"labelLink"===e.type||"label"===e.type||"image"===e.type||"link"===e.type)break}return function(l){if(!r||!r._balanced)return n(l);let a=(0,v.B)(i.sliceSerialize({start:r.end,end:i.now()}));return 94===a.codePointAt(0)&&o.includes(a.slice(1))?(e.enter("gfmFootnoteCallLabelMarker"),e.consume(l),e.exit("gfmFootnoteCallLabelMarker"),t(l)):n(l)}}function ek(e,t){let n=e.length;for(;n--;)if("labelImage"===e[n][1].type&&"enter"===e[n][0]){e[n][1];break}e[n+1][1].type="data",e[n+3][1].type="gfmFootnoteCallLabelMarker";let r={type:"gfmFootnoteCall",start:Object.assign({},e[n+3][1].start),end:Object.assign({},e[e.length-1][1].end)},i={type:"gfmFootnoteCallMarker",start:Object.assign({},e[n+3][1].end),end:Object.assign({},e[n+3][1].end)};i.end.column++,i.end.offset++,i.end._bufferIndex++;let l={type:"gfmFootnoteCallString",start:Object.assign({},i.end),end:Object.assign({},e[e.length-1][1].start)},o={type:"chunkString",contentType:"string",start:Object.assign({},l.start),end:Object.assign({},l.end)},a=[e[n+1],e[n+2],["enter",r,t],e[n+3],e[n+4],["enter",i,t],["exit",i,t],["enter",l,t],["enter",o,t],["exit",o,t],["exit",l,t],e[e.length-2],e[e.length-1],["exit",r,t]];return e.splice(n,e.length-n+1,...a),e}function ex(e,t,n){let r;let i=this,o=i.parser.gfmFootnotes||(i.parser.gfmFootnotes=[]),a=0;return function(t){return e.enter("gfmFootnoteCall"),e.enter("gfmFootnoteCallLabelMarker"),e.consume(t),e.exit("gfmFootnoteCallLabelMarker"),u};function u(t){return 94!==t?n(t):(e.enter("gfmFootnoteCallMarker"),e.consume(t),e.exit("gfmFootnoteCallMarker"),e.enter("gfmFootnoteCallString"),e.enter("chunkString").contentType="string",s)}function s(u){if(a>999||93===u&&!r||null===u||91===u||(0,l.Ee)(u))return n(u);if(93===u){e.exit("chunkString");let r=e.exit("gfmFootnoteCallString");return o.includes((0,v.B)(i.sliceSerialize(r)))?(e.enter("gfmFootnoteCallLabelMarker"),e.consume(u),e.exit("gfmFootnoteCallLabelMarker"),e.exit("gfmFootnoteCall"),t):n(u)}return(0,l.Ee)(u)||(r=!0),a++,e.consume(u),92===u?c:s}function c(t){return 91===t||92===t||93===t?(e.consume(t),a++,s):s(t)}}function ev(e,t,n){let r,i;let o=this,a=o.parser.gfmFootnotes||(o.parser.gfmFootnotes=[]),u=0;return function(t){return e.enter("gfmFootnoteDefinition")._container=!0,e.enter("gfmFootnoteDefinitionLabel"),e.enter("gfmFootnoteDefinitionLabelMarker"),e.consume(t),e.exit("gfmFootnoteDefinitionLabelMarker"),s};function s(t){return 94===t?(e.enter("gfmFootnoteDefinitionMarker"),e.consume(t),e.exit("gfmFootnoteDefinitionMarker"),e.enter("gfmFootnoteDefinitionLabelString"),e.enter("chunkString").contentType="string",c):n(t)}function c(t){if(u>999||93===t&&!i||null===t||91===t||(0,l.Ee)(t))return n(t);if(93===t){e.exit("chunkString");let n=e.exit("gfmFootnoteDefinitionLabelString");return r=(0,v.B)(o.sliceSerialize(n)),e.enter("gfmFootnoteDefinitionLabelMarker"),e.consume(t),e.exit("gfmFootnoteDefinitionLabelMarker"),e.exit("gfmFootnoteDefinitionLabel"),p}return(0,l.Ee)(t)||(i=!0),u++,e.consume(t),92===t?f:c}function f(t){return 91===t||92===t||93===t?(e.consume(t),u++,c):c(t)}function p(t){return 58===t?(e.enter("definitionMarker"),e.consume(t),e.exit("definitionMarker"),a.includes(r)||a.push(r),(0,em.N)(e,h,"gfmFootnoteDefinitionWhitespace")):n(t)}function h(e){return t(e)}}function eb(e,t,n){return e.check(ed.B,t,e.attempt(eg,t,n))}function ew(e){e.exit("gfmFootnoteDefinition")}var eS=n(938),eC=n(1028);class eE{constructor(){this.map=[]}add(e,t,n){!function(e,t,n,r){let i=0;if(0!==n||0!==r.length){for(;i0;)t-=1,n.push(e.slice(this.map[t][0]+this.map[t][1]),this.map[t][2]),e.length=this.map[t][0];n.push(e.slice()),e.length=0;let r=n.pop();for(;r;){for(let t of r)e.push(t);r=n.pop()}this.map.length=0}}function eP(e,t,n){let r;let i=this,o=0,a=0;return function(e){let t=i.events.length-1;for(;t>-1;){let e=i.events[t][1].type;if("lineEnding"===e||"linePrefix"===e)t--;else break}let r=t>-1?i.events[t][1].type:null,l="tableHead"===r||"tableRow"===r?x:u;return l===x&&i.parser.lazy[i.now().line]?n(e):l(e)};function u(t){return e.enter("tableHead"),e.enter("tableRow"),124===t||(r=!0,a+=1),s(t)}function s(t){return null===t?n(t):(0,l.HP)(t)?a>1?(a=0,i.interrupt=!0,e.exit("tableRow"),e.enter("lineEnding"),e.consume(t),e.exit("lineEnding"),p):n(t):(0,l.On)(t)?(0,em.N)(e,s,"whitespace")(t):(a+=1,r&&(r=!1,o+=1),124===t)?(e.enter("tableCellDivider"),e.consume(t),e.exit("tableCellDivider"),r=!0,s):(e.enter("data"),c(t))}function c(t){return null===t||124===t||(0,l.Ee)(t)?(e.exit("data"),s(t)):(e.consume(t),92===t?f:c)}function f(t){return 92===t||124===t?(e.consume(t),c):c(t)}function p(t){return(i.interrupt=!1,i.parser.lazy[i.now().line])?n(t):(e.enter("tableDelimiterRow"),r=!1,(0,l.On)(t))?(0,em.N)(e,h,"linePrefix",i.parser.constructs.disable.null.includes("codeIndented")?void 0:4)(t):h(t)}function h(t){return 45===t||58===t?m(t):124===t?(r=!0,e.enter("tableCellDivider"),e.consume(t),e.exit("tableCellDivider"),d):n(t)}function d(t){return(0,l.On)(t)?(0,em.N)(e,m,"whitespace")(t):m(t)}function m(t){return 58===t?(a+=1,r=!0,e.enter("tableDelimiterMarker"),e.consume(t),e.exit("tableDelimiterMarker"),g):45===t?(a+=1,g(t)):null===t||(0,l.HP)(t)?k(t):n(t)}function g(t){return 45===t?(e.enter("tableDelimiterFiller"),function t(n){return 45===n?(e.consume(n),t):58===n?(r=!0,e.exit("tableDelimiterFiller"),e.enter("tableDelimiterMarker"),e.consume(n),e.exit("tableDelimiterMarker"),y):(e.exit("tableDelimiterFiller"),y(n))}(t)):n(t)}function y(t){return(0,l.On)(t)?(0,em.N)(e,k,"whitespace")(t):k(t)}function k(i){return 124===i?h(i):null===i||(0,l.HP)(i)?r&&o===a?(e.exit("tableDelimiterRow"),e.exit("tableHead"),t(i)):n(i):n(i)}function x(t){return e.enter("tableRow"),v(t)}function v(n){return 124===n?(e.enter("tableCellDivider"),e.consume(n),e.exit("tableCellDivider"),v):null===n||(0,l.HP)(n)?(e.exit("tableRow"),t(n)):(0,l.On)(n)?(0,em.N)(e,v,"whitespace")(n):(e.enter("data"),b(n))}function b(t){return null===t||124===t||(0,l.Ee)(t)?(e.exit("data"),v(t)):(e.consume(t),92===t?w:b)}function w(t){return 92===t||124===t?(e.consume(t),b):b(t)}}function eO(e,t){let n,r,i,l=-1,o=!0,a=0,u=[0,0,0,0],s=[0,0,0,0],c=!1,f=0,p=new eE;for(;++ln[2]+1){let t=n[2]+1,r=n[3]-n[2]-1;e.add(t,r,[])}}e.add(n[3]+1,0,[["exit",o,t]])}return void 0!==i&&(l.end=Object.assign({},eD(t.events,i)),e.add(i,0,[["exit",l,t]]),l=void 0),l}function eT(e,t,n,r,i){let l=[],o=eD(t.events,n);i&&(i.end=Object.assign({},o),l.push(["exit",i,t])),r.end=Object.assign({},o),l.push(["exit",r,t]),e.add(n+1,0,l)}function eD(e,t){let n=e[t],r="enter"===n[0]?"start":"end";return n[1][r]}let eA={name:"tasklistCheck",tokenize:function(e,t,n){let r=this;return function(t){return null===r.previous&&r._gfmTasklistFirstContentOfListItem?(e.enter("taskListCheck"),e.enter("taskListCheckMarker"),e.consume(t),e.exit("taskListCheckMarker"),i):n(t)};function i(t){return(0,l.Ee)(t)?(e.enter("taskListCheckValueUnchecked"),e.consume(t),e.exit("taskListCheckValueUnchecked"),o):88===t||120===t?(e.enter("taskListCheckValueChecked"),e.consume(t),e.exit("taskListCheckValueChecked"),o):n(t)}function o(t){return 93===t?(e.enter("taskListCheckMarker"),e.consume(t),e.exit("taskListCheckMarker"),e.exit("taskListCheck"),a):n(t)}function a(r){return(0,l.HP)(r)?t(r):(0,l.On)(r)?e.check({tokenize:eL},t,n)(r):n(r)}}};function eL(e,t,n){return(0,em.N)(e,function(e){return null===e?n(e):t(e)},"whitespace")}let eF={};function eN(e){let t;let n=e||eF,r=this.data(),i=r.micromarkExtensions||(r.micromarkExtensions=[]),l=r.fromMarkdownExtensions||(r.fromMarkdownExtensions=[]),o=r.toMarkdownExtensions||(r.toMarkdownExtensions=[]);i.push((0,Z.y)([{text:ea},{document:{91:{name:"gfmFootnoteDefinition",tokenize:ev,continuation:{tokenize:eb},exit:ew}},text:{91:{name:"gfmFootnoteCall",tokenize:ex},93:{name:"gfmPotentialFootnoteCall",add:"after",tokenize:ey,resolveTo:ek}}},function(e){let t=(e||{}).singleTilde,n={name:"strikethrough",tokenize:function(e,n,r){let i=this.previous,l=this.events,o=0;return function(a){return 126===i&&"characterEscape"!==l[l.length-1][1].type?r(a):(e.enter("strikethroughSequenceTemporary"),function l(a){let u=(0,j.S)(i);if(126===a)return o>1?r(a):(e.consume(a),o++,l);if(o<2&&!t)return r(a);let s=e.exit("strikethroughSequenceTemporary"),c=(0,j.S)(a);return s._open=!c||2===c&&!!u,s._close=!u||2===u&&!!c,n(a)}(a))}},resolveAll:function(e,t){let n=-1;for(;++n0&&(l.shift(4),o+=l.move((t?"\n":" ")+r.indentLines(r.containerFlow(e,l.current()),t?A:D))),a(),o},footnoteReference:T},unsafe:[{character:"[",inConstruct:["label","phrasing","reference"]}]}),{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:L}],handlers:{delete:M}},function(e){let t=e||{},n=t.tableCellPadding,r=t.tablePipeAlign,i=t.stringLength,l=n?" ":"|";return{unsafe:[{character:"\r",inConstruct:"tableCell"},{character:"\n",inConstruct:"tableCell"},{atBreak:!0,character:"|",after:"[ :-]"},{character:"|",inConstruct:"tableCell"},{atBreak:!0,character:":",after:"-"},{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{inlineCode:function(e,t,n){let r=B.inlineCode(e,t,n);return n.stack.includes("tableCell")&&(r=r.replace(/\|/g,"\\$&")),r},table:function(e,t,n,r){return a(function(e,t,n){let r=e.children,i=-1,l=[],o=t.enter("table");for(;++is&&(s=e[c].length);++lu[l])&&(u[l]=e)}t.push(o)}o[c]=t,a[c]=r}let p=-1;if("object"==typeof r&&"length"in r)for(;++pu[p]&&(u[p]=i),d[p]=i),h[p]=o}o.splice(1,0,h),a.splice(1,0,d),c=-1;let m=[];for(;++c{"use strict";n.d(t,{C:()=>r});let r=function(e){if(null==e)return l;if("function"==typeof e)return i(e);if("object"==typeof e)return Array.isArray(e)?function(e){let t=[],n=-1;for(;++n{"use strict";n.d(t,{dc:()=>l,VG:()=>o});var r=n(7816);let i=[],l=!1;function o(e,t,n,o){let a;"function"==typeof t&&"function"!=typeof n?(o=n,n=t):a=t;let u=(0,r.C)(a),s=o?-1:1;(function e(r,a,c){let f=r&&"object"==typeof r?r:{};if("string"==typeof f.type){let e="string"==typeof f.tagName?f.tagName:"string"==typeof f.name?f.name:void 0;Object.defineProperty(p,"name",{value:"node ("+r.type+(e?"<"+e+">":"")+")"})}return p;function p(){var f;let p,h,d,m=i;if((!t||u(r,a,c[c.length-1]||void 0))&&(m=Array.isArray(f=n(r,c))?f:"number"==typeof f?[!0,f]:null==f?i:[f])[0]===l)return m;if("children"in r&&r.children&&r.children&&"skip"!==m[0])for(h=(o?r.children.length:-1)+s,d=c.concat(r);h>-1&&h{"use strict";n.d(t,{YR:()=>i});var r=n(7795);function i(e,t,n,i){let l,o,a;"function"==typeof t&&"function"!=typeof n?(o=void 0,a=t,l=n):(o=t,a=n,l=i),(0,r.VG)(e,o,function(e,t){let n=t[t.length-1],r=n?n.children.indexOf(e):void 0;return a(e,r,n)},l)}}}]); \ No newline at end of file diff --git a/_next/static/chunks/795d4814-6ed8d3b2717688f6.js b/_next/static/chunks/795d4814-6ed8d3b2717688f6.js new file mode 100644 index 0000000..703a4b1 --- /dev/null +++ b/_next/static/chunks/795d4814-6ed8d3b2717688f6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[479],{648:(t,h,a)=>{a.d(h,{e8G:()=>l,y9h:()=>i});var c=a(3435);function l(t){return(0,c.k5)({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"},child:[]}]})(t)}function i(t){return(0,c.k5)({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0V0z"},child:[]},{tag:"path",attr:{d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"},child:[]}]})(t)}}}]); \ No newline at end of file diff --git a/_next/static/chunks/8e1d74a4-cfd329457e90dfbc.js b/_next/static/chunks/8e1d74a4-cfd329457e90dfbc.js new file mode 100644 index 0000000..558e92c --- /dev/null +++ b/_next/static/chunks/8e1d74a4-cfd329457e90dfbc.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[711],{1536:(c,t,a)=>{a.d(t,{QVr:()=>l});var e=a(3435);function l(c){return(0,e.k5)({tag:"svg",attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"},child:[]}]})(c)}}}]); \ No newline at end of file diff --git a/_next/static/chunks/app/[slug]/page-1ad8078ba5d2eeda.js b/_next/static/chunks/app/[slug]/page-1ad8078ba5d2eeda.js new file mode 100644 index 0000000..8124ac1 --- /dev/null +++ b/_next/static/chunks/app/[slug]/page-1ad8078ba5d2eeda.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[182],{9187:(e,s,t)=>{Promise.resolve().then(t.bind(t,5577))},5577:(e,s,t)=>{"use strict";t.d(s,{default:()=>d});var r=t(5155),n=t(2115),a=t(3550),l=t(6246),i=t(1536),c=t(648),o=t(6046);function d(e){let{content:s,data:t}=e,d=(0,o.useRouter)(),[u,x]=(0,n.useState)(!1),m=()=>{d.push("/")},h=()=>{navigator.clipboard.writeText(window.location.href).then(()=>{x(!0),setTimeout(()=>{x(!1)},3e3)}).catch(e=>{x(!1)})};return(0,r.jsxs)("div",{className:"max-w-4xl mx-auto p-8",children:[(0,r.jsxs)("div",{className:"markdown-container",children:[(0,r.jsxs)("div",{className:"flex flex-wrap items-center justify-start gap-4 mb-5",children:[(0,r.jsx)("button",{onClick:m,className:"p-4 rounded-lg cursor-pointer ",children:(0,r.jsx)(i.QVr,{})}),(0,r.jsx)("h1",{className:"text-4xl font-bold ",children:t.title})]}),(0,r.jsx)("blockquote",{className:"underline font-semibold",children:new Date(t.date).toLocaleDateString("en-GB",{day:"2-digit",month:"long",year:"numeric"})}),(0,r.jsx)("hr",{}),(0,r.jsx)(a.o,{remarkPlugins:[l.A],className:"prose",children:s})]}),(0,r.jsxs)("div",{className:"flex justify-between mt-8",children:[(0,r.jsx)("button",{onClick:m,className:"px-4 py-2 rounded-lg cursor-pointer ",children:(0,r.jsx)(i.QVr,{})}),(0,r.jsx)("button",{onClick:()=>{u||h()},className:"px-4 py-2 rounded-lg cursor-pointer",children:u?(0,r.jsx)(c.e8G,{className:"text-emerald-700"}):(0,r.jsx)(c.y9h,{})})]})]})}}},e=>{var s=s=>e(e.s=s);e.O(0,[479,711,528,441,517,358],()=>s(9187)),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/app/[slug]/page-3040c8084edc429c.js b/_next/static/chunks/app/[slug]/page-3040c8084edc429c.js deleted file mode 100644 index e8a0ca7..0000000 --- a/_next/static/chunks/app/[slug]/page-3040c8084edc429c.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[182],{4441:()=>{}},_=>{var e=e=>_(_.s=e);_.O(0,[441,517,358],()=>e(4441)),_N_E=_.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/app/_not-found/page-0043d75de3bc49f5.js b/_next/static/chunks/app/_not-found/page-b4c74ff42944bf3b.js similarity index 100% rename from _next/static/chunks/app/_not-found/page-0043d75de3bc49f5.js rename to _next/static/chunks/app/_not-found/page-b4c74ff42944bf3b.js diff --git a/_next/static/chunks/app/page-91639fe7c172535c.js b/_next/static/chunks/app/page-28d4954a8febb4bc.js similarity index 100% rename from _next/static/chunks/app/page-91639fe7c172535c.js rename to _next/static/chunks/app/page-28d4954a8febb4bc.js diff --git a/_next/static/chunks/webpack-20770062d26aa750.js b/_next/static/chunks/webpack-20770062d26aa750.js deleted file mode 100644 index 21af97d..0000000 --- a/_next/static/chunks/webpack-20770062d26aa750.js +++ /dev/null @@ -1 +0,0 @@ -(()=>{"use strict";var e={},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var a=t[o]={exports:{}},i=!0;try{e[o](a,a.exports,r),i=!1}finally{i&&delete t[o]}return a.exports}r.m=e,(()=>{var e=[];r.O=(t,o,n,a)=>{if(o){a=a||0;for(var i=e.length;i>0&&e[i-1][2]>a;i--)e[i]=e[i-1];e[i]=[o,n,a];return}for(var u=1/0,i=0;i=a)&&Object.keys(r.O).every(e=>r.O[e](o[c]))?o.splice(c--,1):(l=!1,a{var e,t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__;r.t=function(o,n){if(1&n&&(o=this(o)),8&n||"object"==typeof o&&o&&(4&n&&o.__esModule||16&n&&"function"==typeof o.then))return o;var a=Object.create(null);r.r(a);var i={};e=e||[null,t({}),t([]),t(t)];for(var u=2&n&&o;"object"==typeof u&&!~e.indexOf(u);u=t(u))Object.getOwnPropertyNames(u).forEach(e=>i[e]=()=>o[e]);return i.default=()=>o,r.d(a,i),a}})(),r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((t,o)=>(r.f[o](e,t),t),[])),r.u=e=>"static/chunks/"+e+"."+({203:"2b4c1ee4fbe3a7cf",218:"57a830a2c55ba802"})[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={},t="_N_E:";r.l=(o,n,a,i)=>{if(e[o]){e[o].push(n);return}if(void 0!==a)for(var u,l,c=document.getElementsByTagName("script"),d=0;d{u.onerror=u.onload=null,clearTimeout(p);var n=e[o];if(delete e[o],u.parentNode&&u.parentNode.removeChild(u),n&&n.forEach(e=>e(r)),t)return t(r)},p=setTimeout(f.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=f.bind(null,u.onerror),u.onload=f.bind(null,u.onload),l&&document.head.appendChild(u)}})(),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:e=>e},"undefined"!=typeof trustedTypes&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("nextjs#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="/me/_next/",(()=>{var e={68:0,261:0};r.f.j=(t,o)=>{var n=r.o(e,t)?e[t]:void 0;if(0!==n){if(n)o.push(n[2]);else if(/^(261|68)$/.test(t))e[t]=0;else{var a=new Promise((r,o)=>n=e[t]=[r,o]);o.push(n[2]=a);var i=r.p+r.u(t),u=Error();r.l(i,o=>{if(r.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var a=o&&("load"===o.type?"missing":o.type),i=o&&o.target&&o.target.src;u.message="Loading chunk "+t+" failed.\n("+a+": "+i+")",u.name="ChunkLoadError",u.type=a,u.request=i,n[1](u)}},"chunk-"+t,t)}}},r.O.j=t=>0===e[t];var t=(t,o)=>{var n,a,[i,u,l]=o,c=0;if(i.some(t=>0!==e[t])){for(n in u)r.o(u,n)&&(r.m[n]=u[n]);if(l)var d=l(r)}for(t&&t(o);c{"use strict";var e={},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var a=t[o]={exports:{}},i=!0;try{e[o].call(a.exports,a,a.exports,r),i=!1}finally{i&&delete t[o]}return a.exports}r.m=e,(()=>{var e=[];r.O=(t,o,n,a)=>{if(o){a=a||0;for(var i=e.length;i>0&&e[i-1][2]>a;i--)e[i]=e[i-1];e[i]=[o,n,a];return}for(var u=1/0,i=0;i=a)&&Object.keys(r.O).every(e=>r.O[e](o[d]))?o.splice(d--,1):(l=!1,a{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},(()=>{var e,t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__;r.t=function(o,n){if(1&n&&(o=this(o)),8&n||"object"==typeof o&&o&&(4&n&&o.__esModule||16&n&&"function"==typeof o.then))return o;var a=Object.create(null);r.r(a);var i={};e=e||[null,t({}),t([]),t(t)];for(var u=2&n&&o;"object"==typeof u&&!~e.indexOf(u);u=t(u))Object.getOwnPropertyNames(u).forEach(e=>i[e]=()=>o[e]);return i.default=()=>o,r.d(a,i),a}})(),r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((t,o)=>(r.f[o](e,t),t),[])),r.u=e=>"static/chunks/"+e+"."+({203:"2b4c1ee4fbe3a7cf",218:"57a830a2c55ba802"})[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={},t="_N_E:";r.l=(o,n,a,i)=>{if(e[o]){e[o].push(n);return}if(void 0!==a)for(var u,l,d=document.getElementsByTagName("script"),c=0;c{u.onerror=u.onload=null,clearTimeout(p);var n=e[o];if(delete e[o],u.parentNode&&u.parentNode.removeChild(u),n&&n.forEach(e=>e(r)),t)return t(r)},p=setTimeout(f.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=f.bind(null,u.onerror),u.onload=f.bind(null,u.onload),l&&document.head.appendChild(u)}})(),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:e=>e},"undefined"!=typeof trustedTypes&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("nextjs#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="/me/_next/",(()=>{var e={68:0,261:0};r.f.j=(t,o)=>{var n=r.o(e,t)?e[t]:void 0;if(0!==n){if(n)o.push(n[2]);else if(/^(261|68)$/.test(t))e[t]=0;else{var a=new Promise((r,o)=>n=e[t]=[r,o]);o.push(n[2]=a);var i=r.p+r.u(t),u=Error();r.l(i,o=>{if(r.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var a=o&&("load"===o.type?"missing":o.type),i=o&&o.target&&o.target.src;u.message="Loading chunk "+t+" failed.\n("+a+": "+i+")",u.name="ChunkLoadError",u.type=a,u.request=i,n[1](u)}},"chunk-"+t,t)}}},r.O.j=t=>0===e[t];var t=(t,o)=>{var n,a,[i,u,l]=o,d=0;if(i.some(t=>0!==e[t])){for(n in u)r.o(u,n)&&(r.m[n]=u[n]);if(l)var c=l(r)}for(t&&t(o);d:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.rounded-lg{border-radius:.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{--background:#fffdfc;--foreground:#261b00;--dark-color:#261c02;--primary-color:#2b1b01;--secondary-color:#8a7145;--topic-color:#281d03;--highlight-color:#fbeed2;--quote-color:#f1e6c3;--element-background-color:#faf7ef;--element-foreground-color:#b6a87f}body{background:var(--background);font-family:var(--font-geist-sans),Helvetica,sans-serif;font-size:17px}body,hr{color:var(--foreground)}hr{margin:10px 0;opacity:.5;height:10px}button{background-color:var(--element-background-color);color:var(--element-foreground-color)}.markdown-container strong{color:var(--dark-color)}.markdown-container ul{margin-bottom:20px}.markdown-container ul li{list-style-type:disc;margin-left:20px;margin-bottom:5px}h1{color:var(--topic-color);font-size:32px}h2{font-size:28px;font-weight:500}h2,h3{color:var(--primary-color)}h3{font-size:24px}.markdown-container pre{width:100%;padding:20px;background:var(--highlight-color);margin:20px 0;font-family:Courier New,Courier,monospace;font-size:16px;overflow-x:scroll;border-radius:10px}.markdown-container pre::-webkit-scrollbar{height:10px}.markdown-container pre::-webkit-scrollbar-track{background:transparent;border-radius:10px}.markdown-container pre::-webkit-scrollbar-thumb{background:var(--quote-color);border-radius:10px}.markdown-container pre::-webkit-scrollbar-thumb:hover{background:var(--topic-color)}.markdown-container pre code{background:transparent;color:var(--secondary-color)}.markdown-container pre code::selection{background-color:var(--element-foreground-color)}blockquote{border-left:5px solid var(--quote-color);padding:5px 10px;margin:5px 0}.markdown-container>div>ul>li>{height:7px;width:7px;border-radius:50%}.markdown-container>div>ul>li>ul>li>{height:7px;width:7px;background-color:transparent;border-style:solid;border-radius:50%;border-width:1px}.markdown-container .markdown-preview-section>div>ul>li>ul>li>ul>li>{height:7px;width:7px;border-radius:0}.markdown-container .markdown-preview-section>div>ul>li>ul>li>ul>li>ul>li>{height:0;width:0;background-color:transparent;border-radius:0;border-color:transparent currentcolor;border-style:solid;border-width:5px 0 5px 8px}.markdown-container>div>ul>li>ul>li>ul>li>ul>li>ul>li>{height:4px;width:4px;border-radius:50%}:root table{border-collapse:separate;border-spacing:0;margin:10px 0}th:first-of-type{border-top-left-radius:8px}th:last-of-type{border-top-right-radius:8px}tr:last-of-type td:first-of-type{border-bottom-left-radius:8px}tr:last-of-type td:last-of-type{border-bottom-right-radius:8px}:root :is(td,th){border-width:2px 1px 1px 2px;padding:5px}Link,a{text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-skip-ink:none;font-weight:600;color:var(--secondary-color)}Link:hover,a:hover{text-decoration:none;font-weight:600} \ No newline at end of file +*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-8{margin-bottom:2rem}.mt-8{margin-top:2rem}.flex{display:flex}.max-w-4xl{max-width:56rem}.cursor-pointer{cursor:pointer}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.rounded-lg{border-radius:.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{--background:#fffdfc;--foreground:#261b00;--dark-color:#261c02;--primary-color:#2b1b01;--secondary-color:#8a7145;--topic-color:#281d03;--highlight-color:#fbeed2;--quote-color:#f1e6c3;--element-background-color:#faf7ef;--element-foreground-color:#b6a87f}body{background:var(--background);font-family:var(--font-geist-sans),Helvetica,sans-serif;font-size:17px}body,hr{color:var(--foreground)}hr{margin:10px 0;opacity:.5;height:10px}button{background-color:var(--element-background-color);color:var(--element-foreground-color)}.markdown-container strong{color:var(--dark-color)}.markdown-container ul{margin-bottom:20px}.markdown-container ul li{list-style-type:disc;margin-left:20px;margin-bottom:5px}h1{color:var(--topic-color);font-size:32px}h2{font-size:28px;font-weight:500}h2,h3{color:var(--primary-color)}h3{font-size:24px}.markdown-container pre{width:100%;padding:20px;background:var(--highlight-color);margin:20px 0;font-family:Courier New,Courier,monospace;font-size:16px;overflow-x:scroll;border-radius:10px}.markdown-container pre::-webkit-scrollbar{height:10px}.markdown-container pre::-webkit-scrollbar-track{background:transparent;border-radius:10px}.markdown-container pre::-webkit-scrollbar-thumb{background:var(--quote-color);border-radius:10px}.markdown-container pre::-webkit-scrollbar-thumb:hover{background:var(--topic-color)}.markdown-container pre code{background:transparent;color:var(--secondary-color)}.markdown-container pre code::selection{background-color:var(--element-foreground-color)}blockquote{border-left:5px solid var(--quote-color);padding:5px 10px;margin:5px 0}.markdown-container>div>ul>li>{height:7px;width:7px;border-radius:50%}.markdown-container>div>ul>li>ul>li>{height:7px;width:7px;background-color:transparent;border-style:solid;border-radius:50%;border-width:1px}.markdown-container .markdown-preview-section>div>ul>li>ul>li>ul>li>{height:7px;width:7px;border-radius:0}.markdown-container .markdown-preview-section>div>ul>li>ul>li>ul>li>ul>li>{height:0;width:0;background-color:transparent;border-radius:0;border-color:transparent currentcolor;border-style:solid;border-width:5px 0 5px 8px}.markdown-container>div>ul>li>ul>li>ul>li>ul>li>ul>li>{height:4px;width:4px;border-radius:50%}:root table{border-collapse:separate;border-spacing:0;margin:10px 0}th:first-of-type{border-top-left-radius:8px}th:last-of-type{border-top-right-radius:8px}tr:last-of-type td:first-of-type{border-bottom-left-radius:8px}tr:last-of-type td:last-of-type{border-bottom-right-radius:8px}:root :is(td,th){border-width:2px 1px 1px 2px;padding:5px}Link,a{text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-skip-ink:none;font-weight:600;color:var(--secondary-color)}Link:hover,a:hover{text-decoration:none;font-weight:600} \ No newline at end of file diff --git a/assets/readmes/Components in React.md b/assets/readmes/Components in React.md new file mode 100644 index 0000000..9a10dbe --- /dev/null +++ b/assets/readmes/Components in React.md @@ -0,0 +1,144 @@ +--- +date : 2024-12-01T21:25:51+05:30 +draft : false +title : Components in React +--- + +React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces. + +--- +### Functional Components vs Class Components + +| **Aspect** | **Functional Components** | **Class Components** | +| ------------------------ | --------------------------------------------------------------------- | ---------------------------------------------------- | +| **Definition** | Plain JavaScript functions that return JSX. | ES6 classes that extend `React.Component`. | +| **State** | Uses the `useState` and `useEffect` hooks (introduced in React 16.8). | Uses `this.state` for managing state. | +| **Lifecycle Methods** | Replaced by hooks like `useEffect`. | Explicit lifecycle methods like `componentDidMount`. | +| **Syntax** | Simpler and more concise. | More verbose due to class structure. | +| **Performance** | Generally lighter and faster. | Slightly heavier because of class overhead. | +| **Example** | | | +| Functional Component: | Class Component: | | +| ```jsx | ```jsx | | +| function Greet() { | class Greet extends React.Component { | | +| return `

Hello

`; | render() { | | +| } | return `

Hello

`; | | +| ``` | } | | + +--- +### When to Use? + +- Use functional components whenever possible; they are the modern and preferred approach. Class components are now rarely used in new projects. + +--- +### How to Create and Export Components + +1. Creating a Functional Component + ```jsx + // Greet.jsx + function Greet() { + return

Hello, World!

; + } + export default Greet; + ``` + +2. Creating a Class Component + ```jsx + // Welcome.jsx + import React, { Component } from 'react'; + class Welcome extends Component { + render() { + return

Welcome to React!

; + } + } + export default Welcome; + ``` + +3. Named Exports + You can export multiple components from a file: +```jsx +// Greetings.jsx +export function Hello() { + return

Hello!

; +} + +export function Goodbye() { + return

Goodbye!

; +} + +``` + +--- +### Importing Components and Using Them Inside Other Components + +1. Default Export + Import and use a default exported component +```jsx +import Greet from './Greet'; + +function App() { + return ( +
+ +
+ ); +} +export default App; + +``` + +2. Named Exports + Import and use named exported components +```jsx +import { Hello, Goodbye } from './Greetings'; + +function App() { + return ( +
+ + +
+ ); +} +export default App; +``` + +3. Aliasing Components + Rename components during import +```jsx +import { Hello as Hi } from './Greetings'; + +function App() { + return ; +} +export default App; +``` + +4. Composing Components + Use components inside other components to build a hierarchy +```jsx +import Greet from './Greet'; + +function Header() { + return ( +
+ +

This is a header

+
+ ); +} + +export default Header; +``` + +--- +### Summary + +- **Functional Components** are the modern standard due to hooks and simplicity. +- Components can be exported as default or named exports. +- You can compose a rich UI by importing and using components inside other components. + This modular structure makes React scalable and maintainable. + +--- +# References + +- https://www.freecodecamp.org/news/function-component-vs-class-component-in-react/ \ No newline at end of file diff --git a/assets/readmes/Conditional Rendering in React.md b/assets/readmes/Conditional Rendering in React.md new file mode 100644 index 0000000..9e4849a --- /dev/null +++ b/assets/readmes/Conditional Rendering in React.md @@ -0,0 +1,129 @@ +--- +date : 2024-12-01T21:35:23+05:30 +draft : false +title : Conditional Rendering in React +--- + +Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component. + +--- + +### 1. Using `if-else` Statements + +You can use standard JavaScript `if-else` statements for conditional rendering within a component. Typically, you would do this outside of the JSX return statement, such as within the render function or directly before the return. + +#### Example: Using `if-else` + +```jsx +function Greeting({ isLoggedIn }) { + let message; + + if (isLoggedIn) { + message =

Welcome Back!

; + } else { + message =

Please Sign In

; + } + + return
{message}
; +} +``` + +In this example, `if-else` is used to set the value of `message` based on the `isLoggedIn` prop, which is then rendered inside the component. + +--- + +### 2. Using Ternary Operators + +A **ternary operator** is a shorthand for `if-else` and is commonly used for inline conditional rendering within JSX. It has the following syntax: + +```jsx +condition ? expression_if_true : expression_if_false; +``` + +#### Example: Using Ternary Operator + +```jsx +function Greeting({ isLoggedIn }) { + return ( +
+ {isLoggedIn ?

Welcome Back!

:

Please Sign In

} +
+ ); +} +``` + +In this example, if `isLoggedIn` is `true`, "Welcome Back!" is rendered; otherwise, "Please Sign In" is shown. Ternary operators are great for simple conditions. + +--- + +### 3. Using `&&` (Logical AND) Operator + +The `&&` (logical AND) operator can be used for conditional rendering when you want to display something only if a condition is `true`. This is useful for scenarios where you only want to render an element when a certain condition holds. + +#### Example: Using `&&` Operator + +```jsx +function Notification({ message }) { + return ( +
+ {message &&

{message}

} +
+ ); +} +``` + +In this example, the paragraph will only be rendered if `message` is truthy. If `message` is `null` or `undefined`, nothing will be displayed. + +--- + +### 4. Conditional Rendering Based on Multiple Conditions + +You can also combine `if-else`, ternary operators, and `&&` logic for more complex conditions. + +#### Example: Multiple Conditions + +```jsx +function UserStatus({ user }) { + return ( +
+ {user ? ( + user.isAdmin ? ( +

Welcome, Admin!

+ ) : ( +

Welcome, {user.name}!

+ ) + ) : ( +

Please log in

+ )} +
+ ); +} +``` + +In this example, multiple conditions are checked using nested ternary operators to display different messages based on whether the user is logged in and whether they are an admin. + +--- + +### Summary of Conditional Rendering Methods + +|**Method**|**Use Case**|**Example**| +|---|---|---| +|**`if-else`**|For more complex conditions or multiple branches|`if (isLoggedIn) { return

Welcome!

; } else { return

Please Sign In

; }`| +|**Ternary Operator**|Inline conditionals, simpler cases|`{isLoggedIn ?

Welcome!

:

Please Sign In

}`| +|**`&&` (Logical AND)**|When you want to render something only if a condition is true|`{isLoggedIn &&

Welcome!

}`| + +--- + +### Best Practices + +- Use **ternary operators** for simple conditions, especially within JSX. +- Use **`&&`** for conditional rendering when you only want to render an element when a condition is true. +- For more complex logic, prefer **`if-else` statements** outside of JSX. + +By using these techniques, you can conditionally render content in React based on various states, props, or conditions, enabling dynamic and interactive user interfaces. + +--- +# References + +- https://www.w3schools.com/react/react_conditional_rendering.asp +- https://legacy.reactjs.org/docs/conditional-rendering.html \ No newline at end of file diff --git a/assets/readmes/Deploying a React App.md b/assets/readmes/Deploying a React App.md new file mode 100644 index 0000000..cf7a2ac --- /dev/null +++ b/assets/readmes/Deploying a React App.md @@ -0,0 +1,105 @@ +--- +date : 2024-12-01T21:44:35+05:30 +draft : false +title : Deploying a React App +--- + +Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the `npm run build` command, which creates an optimized version of your app for deployment. + +--- + +### 1. Preparing the App for Production Using `npm run build` + +When you’re ready to deploy your React app, the first step is to create a **production build**. React provides a command `npm run build` that bundles your app into static files optimized for performance. This build includes minified JavaScript, optimized assets, and a structure that can be served by a static server. + +#### Steps to Prepare Your React App for Production + +1. **Ensure the Project is Ready:** + + - Before building your app, make sure all code is final and all features are working as expected. + - Test your app thoroughly in development mode (`npm start`). +2. **Create a Production Build:** To create a production-ready build, open your terminal and run: + + ```bash + npm run build + ``` + + This command does the following: + + - **Minifies** and **bundles** your JavaScript and CSS files for faster loading. + - Optimizes images and other assets. + - Adds **hashing** to filenames to improve caching. + - Ensures that the app is ready for deployment to a web server. + + After running the command, a new folder named `build/` will be created in your project directory. + +3. **Inspect the Build Folder:** The `build/` folder will contain the following files: + + - `index.html`: The main HTML file that includes links to your bundled JavaScript and CSS. + - `static/`: A folder containing all the assets (images, fonts, etc.) and minified JavaScript and CSS files. + - `asset-manifest.json`: Contains a list of files with their hash for cache management. + + This build folder is ready to be deployed to a static server. + +4. **Environment Variables:** Ensure that all necessary environment variables are set for production. You can define them in `.env` files or directly in the server environment. + + For example, if you need to specify a different **API URL** for production, you can use: + + ```bash + REACT_APP_API_URL=https://api.yourdomain.com + ``` + + These environment variables are automatically replaced during the build process. + +5. **Check the Build:** It's a good idea to test the build locally before deploying. You can use a simple static server like **serve** to serve your production build. + + First, install `serve` globally if you don’t have it: + + ```bash + npm install -g serve + ``` + + Then, run the following command to serve your build: + + ```bash + serve -s build + ``` + + This will start a local server that serves your production build, allowing you to check if everything is working as expected before deploying it to a live server. + + +--- + +### 2. Key Benefits of Using `npm run build` + +- **Performance Optimization:** The `build` command optimizes your React app for production by reducing the file sizes (through minification), removing unnecessary code, and making the app load faster. +- **Caching:** The build process generates hashed filenames for assets, improving cache management on the client side. This means that once assets are cached, users won't have to re-download them unless they change. +- **Compatibility:** The production build is optimized to run on most modern web servers, making it easier to deploy to different hosting platforms. + +--- + +### 3. Deploying the Production Build + +Once the build is ready, you can deploy it to your desired hosting platform. Some common platforms for deploying React apps include: + +- **Netlify:** Simple, free hosting for static sites. Just drag and drop the `build/` folder or link your GitHub repository. +- **Vercel:** Another popular platform for static apps that integrates well with React. It automatically optimizes the build during deployment. +- **GitHub Pages:** Free hosting for static websites directly from your GitHub repository. +- **Firebase Hosting:** Provides fast, secure hosting for web apps with a free tier available. +- **AWS S3 & CloudFront:** For more complex or scalable deployments. + +--- + +### Summary + +- **`npm run build`** is the key command for preparing your React app for production. It bundles and optimizes your app for performance and scalability. +- After building the app, you will have a `build/` folder containing all the optimized assets ready to be deployed. +- Ensure that environment variables are correctly set for production, and test the build locally before deploying it. +- Popular platforms for deploying React apps include Netlify, Vercel, Firebase, and GitHub Pages. + +By following these steps, you’ll ensure your React app is production-ready and performs optimally for end-users. + +--- +# References + +- https://www.geeksforgeeks.org/how-do-you-deploy-a-react-application/ \ No newline at end of file diff --git a/assets/readmes/Event Handling in React.md b/assets/readmes/Event Handling in React.md new file mode 100644 index 0000000..84554ee --- /dev/null +++ b/assets/readmes/Event Handling in React.md @@ -0,0 +1,190 @@ +--- +date : 2024-12-01T21:33:30+05:30 +draft : false +title : Event Handling in React +--- + +React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React's virtual DOM. + +--- + +### 1. Handling Events in React + +##### Key Points: + +- Event handlers in React are written as camelCase (e.g., `onClick`, `onChange`). +- Handlers are passed as functions, not strings (e.g., `onClick={() => alert('Clicked!')}`). + +##### Common Event Handlers + +- **Click Events**: Triggered when an element is clicked. +- **Input Events**: Triggered when input fields change. +- **Form Events**: Triggered during form submission. + +--- + +#### Handling Click Events + +```jsx +function ClickHandler() { + const handleClick = () => { + alert('Button clicked!'); + }; + + return ; +} +``` + +--- + +#### Handling Input Events + +```jsx +function InputHandler() { + const handleChange = (event) => { + console.log(event.target.value); + }; + + return ; +} +``` + +--- + +### Handling Form Submission + +```jsx +function FormHandler() { + const handleSubmit = (event) => { + event.preventDefault(); // Prevents default form submission behavior + alert('Form submitted!'); + }; + + return ( +
+ +
+ ); +} +``` + +--- + +### 2. Event Binding and Passing Data with Event Handlers + +#### Event Binding + +In React, event handlers automatically bind to the component instance, so you usually don't need explicit binding as in class components. However, in class components, you can bind methods in three ways: + +1. **Arrow Functions in JSX** (recommended): + + ```jsx + + ``` + +2. **Bind in the Constructor**: + + ```jsx + constructor() { + super(); + this.handleClick = this.handleClick.bind(this); + } + ``` + +3. **Class Properties (ES6)**: + + ```jsx + handleClick = () => { + console.log('Button clicked!'); + }; + ``` + + +--- + +### Passing Data with Event Handlers + +1. **Using Arrow Functions**: + + ```jsx + function Greet({ name }) { + const handleClick = () => { + alert(`Hello, ${name}!`); + }; + + return ; + } + + function App() { + return ; + } + ``` + +2. **Passing Arguments**: + + - Use an arrow function to pass arguments: + + ```jsx + function Button({ message }) { + const handleClick = (msg) => { + alert(msg); + }; + + return ; + } + ``` + + +--- + +### 3. Preventing Default Behavior + +- Use `event.preventDefault()` to stop default browser actions: + + ```jsx + function LinkHandler() { + const handleClick = (event) => { + event.preventDefault(); + alert('Default action prevented!'); + }; + + return Click Me; + } + ``` + + +--- + +### 4. Accessing Event Data + +React's event handling uses a synthetic event system, which wraps the browser's native event and normalizes cross-browser compatibility. + +- Access event properties like `target`, `type`, etc.: + + ```jsx + function InputLogger() { + const handleInput = (event) => { + console.log(`Input value: ${event.target.value}`); + }; + + return ; + } + ``` + + +--- + +### Summary + +|**Event**|**Handler**|**Example**| +|---|---|---| +|**Click**|`onClick`|``| +|**Input Change**|`onChange`|``| +|**Form Submission**|`onSubmit`|`
`| +|**Prevent Default**|`event.preventDefault()`|`Link`| +|**Passing Data**|Arrow functions or bind|``| + +By combining event handlers with state or props, React allows for building dynamic and interactive UIs. + +--- +# References diff --git a/assets/readmes/Lists and Keys in React.md b/assets/readmes/Lists and Keys in React.md new file mode 100644 index 0000000..ab0de4e --- /dev/null +++ b/assets/readmes/Lists and Keys in React.md @@ -0,0 +1,136 @@ +--- +date : 2024-12-01T21:37:30+05:30 +draft : false +title : Lists and Keys in React +--- + +Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like `.map()`. Additionally, using **keys** is important for optimizing rendering and maintaining state in lists. + +--- + +#### 1. Rendering Lists with `.map()` + +In React, the `.map()` function is commonly used to iterate over an array of data and return an array of elements that can be rendered. This is especially useful for rendering dynamic data like lists of items. + +##### Example: Rendering a List of Items + +```jsx +function ItemList() { + const items = ['Apple', 'Banana', 'Cherry']; + + return ( +
    + {items.map((item, index) => ( +
  • {item}
    • + ))} +
+ ); +} +``` + +In this example: + +- We use the `.map()` method to iterate over the `items` array. +- For each item, we return a list item (`
  • `) containing the `item` text. + +--- + +#### 2. Importance of Keys in List Rendering + +**Keys** help React identify which items have changed, been added, or removed, allowing for efficient updates to the virtual DOM and the UI. When rendering lists, React needs a unique identifier for each element to keep track of their position and improve performance. + +##### Why are Keys Important? + +- **Efficient Updates**: Without keys, React would have to re-render all list items when one item changes. With keys, React only re-renders the changed items. +- **Unique Identification**: Keys ensure that React can distinguish between individual elements in a list. + +##### Best Practices for Keys: + +- Keys must be **unique** among siblings (elements at the same level in the list). +- Avoid using **array indices** as keys when the list can change dynamically (e.g., items can be added or removed). + +##### Example: Using Unique Keys + +```jsx +function ItemList() { + const items = [ + { id: 1, name: 'Apple' }, + { id: 2, name: 'Banana' }, + { id: 3, name: 'Cherry' } + ]; + + return ( +
      + {items.map((item) => ( +
    • {item.name}
      • + ))} +
    + ); +} +``` + +In this example: + +- Each list item has a unique `id` which is used as the key. +- This ensures that React can efficiently track changes to the list. + +--- + +#### 3. Handling Dynamic List Changes + +When the list data changes (e.g., items are added, removed, or reordered), keys help React know how to efficiently update the UI. Without keys or with incorrect keys, React may not be able to identify which items are changing and might re-render the entire list unnecessarily. + +##### Example: Reordering List Items + +```jsx +function ItemList() { + const [items, setItems] = useState([ + { id: 1, name: 'Apple' }, + { id: 2, name: 'Banana' }, + { id: 3, name: 'Cherry' } + ]); + + const reorderItems = () => { + setItems([items[2], items[1], items[0]]); + }; + + return ( +
    + +
      + {items.map((item) => ( +
    • {item.name}
      • + ))} +
    +
    + ); +} +``` + +In this example: + +- If the `key` were not unique, React might not correctly update the UI after the items are reordered. +- With the unique `id` as the key, React efficiently reorders the items in the list without unnecessary re-renders. + +--- + +### Summary of Lists and Keys + +|**Method**|**Description**|**Example**| +|---|---|---| +|**Rendering Lists with `.map()`**|Iterates over an array to create an array of elements.|`{items.map(item =>
  • {item.name}
    • )}`| +|**Importance of Keys**|Keys help React identify items and optimize re-renders.|`key={item.id}` ensures React optimally updates lists.| +|**Best Practices for Keys**|Use unique identifiers (not array indices) as keys.|Prefer `key={item.id}` over `key={index}`.| + +--- + +### Conclusion + +- Use **`.map()`** to render lists dynamically in React. +- Always provide a **unique `key`** for each item in the list to improve performance and ensure accurate updates during re-renders. +- Avoid using array indices as keys, especially when the list can be modified, as it may lead to issues with the state and rendering. + +--- +# References + +- https://legacy.reactjs.org/docs/lists-and-keys.html \ No newline at end of file diff --git a/assets/readmes/Props in React.md b/assets/readmes/Props in React.md new file mode 100644 index 0000000..dae61f9 --- /dev/null +++ b/assets/readmes/Props in React.md @@ -0,0 +1,59 @@ +--- +date : 2024-12-01T21:29:05+05:30 +draft : false +title : Props in React +--- + +**Props** (short for properties) are used to pass data from a parent component to a child component. Props are **read-only**, meaning they cannot be modified by the child component receiving them. + +--- +### Key Features of Props + +- Passed as an object to the component. +- Immutable (cannot be changed by the component receiving them). +- Used for dynamic data and reusability. + +--- +### How to Pass Props Between Components + +1. Define props in the parent component + ```jsx + function Parent() { + const name = "John"; + return ; + } + ``` + +2. Access props in the child component + ```jsx + function Child(props) { + return

    Hello, {props.name}!

    ; + } + ``` + +3. Destructure props for cleaner syntax + ```jsx + function Child({ name }) { + return

    Hello, {name}!

    ; + } + ``` + +___ +### Example of Props + +```jsx +function Button({ label, onClick }) { + return ; +} + +function App() { + const handleClick = () => alert("Button clicked!"); + return + + ); +} +``` + +In this example: + +- The effect runs only when the `count` state changes, and it updates the document title with the current count. + +--- + +### 5. Use Case Examples of `useEffect` + +- **Fetching data on mount:** + + ```jsx + useEffect(() => { + fetchData(); + }, []); // Runs once after component mount + ``` + +- **Subscribing to an event:** + + ```jsx + useEffect(() => { + const handleResize = () => { + console.log('Window resized'); + }; + window.addEventListener('resize', handleResize); + + // Cleanup on component unmount + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); // Runs once + ``` + +- **Setting up a timer:** + + ```jsx + useEffect(() => { + const timer = setInterval(() => { + console.log('Timer ticked'); + }, 1000); + + return () => clearInterval(timer); // Cleanup on unmount + }, []); + ``` + + +--- + +### Summary of `useEffect` + +|**Feature**|**Description**|**Example**| +|---|---|---| +|**Basic usage**|Handles side effects like fetching data, setting up timers, etc.|`useEffect(() => { fetchData(); }, []);`| +|**Dependencies**|Array of values that the effect depends on.|`useEffect(() => { console.log(count); }, [count]);`| +|**Cleanup function**|Cleans up after effects (e.g., clearing timers).|`return () => { clearInterval(timer); }`| +|**Conditional execution**|Control when the effect runs by setting dependencies.|`useEffect(() => { console.log('Mounted!'); }, []);`| + +--- + +### Conclusion + +- **`useEffect`** is a powerful hook for managing side effects in functional components. +- It allows you to **fetch data**, **subscribe to events**, and handle **cleanups** in a declarative way. +- By using the dependency array, you can control when the effect should run, making it highly flexible and efficient. + +--- +# References + +- https://www.freecodecamp.org/news/react-lifecycle-methods-and-hooks-for-beginners/ \ No newline at end of file diff --git a/assets/readmes/React Reusable Components.md b/assets/readmes/React Reusable Components.md new file mode 100644 index 0000000..802a4ef --- /dev/null +++ b/assets/readmes/React Reusable Components.md @@ -0,0 +1,83 @@ +--- +date : 2024-12-01T20:41:07+05:30 +draft : false +title : React Reusable Components +--- + +- Reusable components are building blocks of a React application designed to be reused in multiple places. +- They promote modularity, maintainability, and efficiency. + +--- +### Key Benefits + +- **Code Reusability**: Write once, use multiple times. +- **Consistency**: Maintain consistent design and behavior across the app. +- **Ease of Maintenance**: Updates to a component reflect across all its instances. +- **Efficiency**: Reduces the need for duplicate code. + +--- +### Best Practices for Creating Reusable Components + +- **Single Responsibility Principle**: Each component should have one clear purpose. +- **Props**: Use props to make components configurable and dynamic. +- **Composition Over Inheritance**: Combine smaller components to build larger ones. +- **Avoid Hardcoding**: Parameterize data through props instead of hardcoding values. +- **Styling Flexibility**: Use CSS modules, styled-components, or className props for flexible styling. +- **Granularity**: Balance between too granular (many small components) and too monolithic (large components). + +--- +### Examples of Reusable Components + +1. Button + +```jsx +const Button = ({ onClick, children, style }) => ( + +); +``` + +2. Input Field + +```jsx +const Input = ({ type, value, onChange, placeholder }) => ( + +); + +``` + +3. Card + +```jsx +const Card = ({ children, style }) => ( +
    + {children} +
    +); + +const defaultStyle = { + border: "1px solid #ccc", + padding: "10px", + borderRadius: "5px", +}; + +``` + +--- +### Tips + +- **Test Components**: Ensure each component works in isolation. +- **Prop Validation**: Use `PropTypes` or TypeScript for better validation and type safety. +- **Document Components**: Add comments or maintain documentation to explain usage. + +--- +# References + +- https://www.freecodecamp.org/news/how-to-build-reusable-react-components/ +- https://buttercms.com/blog/building-reusable-components-using-react/ \ No newline at end of file diff --git a/assets/readmes/React Virtual DOM.md b/assets/readmes/React Virtual DOM.md new file mode 100644 index 0000000..ed2e549 --- /dev/null +++ b/assets/readmes/React Virtual DOM.md @@ -0,0 +1,95 @@ +--- +date : 2024-12-01T20:54:27+05:30 +draft : false +title : React Virtual DOM +--- + +- The **Virtual DOM (VDOM)** is a lightweight in-memory representation of the real DOM. +- React uses the VDOM to manage updates efficiently without directly manipulating the real DOM. + +--- +### Key Concepts + +- The actual structure rendered in the browser. +- Updating it is slow because it triggers reflows and repaints. + +--- +### How the Virtual DOM Works + +- **Initial Render**: + - React creates a VDOM representation of the UI. + - The VDOM is then used to create the real DOM for the browser. +- **Updating State or Props**: + - React creates a new VDOM tree based on the updated state/props. + - It compares the new VDOM tree with the previous one (a process called **diffing**). + - Only the differences (changes) are applied to the real DOM. +- **Efficient Updates**: + - React batches multiple updates and applies them in one operation to minimize performance costs. + +--- + +### Benefits of the Virtual DOM + +- **Performance**: + - Reduces direct interactions with the real DOM. + - Optimizes updates by calculating the smallest number of changes. +- **Declarative UI**: + - Developers focus on what the UI should look like, and React handles how to update the DOM. +- **Cross-Browser Compatibility**: + - React abstracts browser-specific quirks in DOM manipulation. + +--- + +### Real-Life Analogy + +- Think of updating the DOM like editing a book. +- Instead of rewriting the entire book (real DOM), React keeps a draft copy (virtual DOM), compares the draft with the original, and only updates the changed parts. + +--- + +### Virtual DOM Diffing Algorithm + +- **Tree Comparison**: React compares the new VDOM tree with the old one. +- **Key-Based Optimization**: + - Keys in lists help React identify moved or updated elements efficiently. +- **Minimal Updates**: + - React calculates and applies only the minimal required changes to the real DOM. + +--- +### Example + +```jsx +function App() { + const [count, setCount] = React.useState(0); + + return ( +
    +

    Count: {count}

    + +
    + ); +} +``` + +When the button is clicked: + +1. React updates the state (`count`). +2. React creates a new VDOM tree for ``. +3. It compares the new tree with the old one. +4. Only the `

    ` element is updated in the real DOM. + +--- +### Summary + +The Virtual DOM is a powerful feature of React that: + +- Improves performance. +- Simplifies the UI development process. +- Provides a smooth and efficient user experience. + +--- +# References + +- https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/ +- https://legacy.reactjs.org/docs/faq-internals.html +- https://www.geeksforgeeks.org/reactjs-virtual-dom/ \ No newline at end of file diff --git a/assets/readmes/React fundamentals.md b/assets/readmes/React fundamentals.md new file mode 100644 index 0000000..7a9f5b0 --- /dev/null +++ b/assets/readmes/React fundamentals.md @@ -0,0 +1,52 @@ +--- +date : 2024-12-01T20:36:06+05:30 +draft : false +title : React Fundamentals +--- + +1. **Introduction** + - What is React and Why use React ? + - [React Reusable Components](../react-reusable-components) + - [React Virtual DOM](../react-virtual-dom) + - Large Community Support + - [Real-world Examples of apps build with React](../real-world-examples-of-apps-build-with-react) + +2. [**Setting Up the Development Environment for React with Vite**](../setting-up-the-development-environment-for-react-with-vite) + - Installing Node.js and npm. + - Setting up a React Project. + - Overview of the project folder structure. + +3. **Understanding JSX / TSX** + - [What is JSX, TSX and How It Differs from HTML](../what-is-jsx-tsx-and-how-ut-differs-from-html) + - JSX/TSX attributes and how to use them. + +4. [**Components in React**](../components-in-react) + - Functional Components vs Class Components. + - How to create and export components. + - Importing components and using them inside other components. + +5. **Props and State** [Props in React](../props-in-react), [State in React](../state-in-react) + - Introduction to props and how to pass data between components. + - Introduction to state and `useState` hook. + - Updating and managing state. + +6. [**Event Handling in React** ](../event-handling-in-react) + - How to handle events like clicks, inputs, and form submissions. + - Event binding and passing data with event handlers. + +7. [**Conditional Rendering in React**](../conditional-rendering-in-react) + - How to conditionally render components using `if-else`, `ternary operators`, and `&&` logic. + +8. [**Lists and Keys in React**](../lists-and-keys-in-react) + - How to render lists in React using `.map()`. + - Importance of keys in list rendering. + +9. [**React Lifecycle and Hooks**](../react-lifecycle-and-hooks) + - Introduction to React hooks: `useEffect` for handling side effects. + +10. [**Styling in React**](../styling-in-react) + - Inline styles vs External CSS vs CSS Modules. + - Introduction to styling libraries like Styled Components or Tailwind CSS. + +11. [**Deploying a React App**](../deploying-a-react-app) + - Preparing the app for production using `npm run build`. \ No newline at end of file diff --git a/assets/readmes/Real-world Examples of apps build with React.md b/assets/readmes/Real-world Examples of apps build with React.md new file mode 100644 index 0000000..512ac42 --- /dev/null +++ b/assets/readmes/Real-world Examples of apps build with React.md @@ -0,0 +1,38 @@ +--- +date : 2024-12-01T20:58:46+05:30 +draft : false +title : Real World Examples of Apps Build With React +--- + +This is some real world examples that build with react + +--- + +| **Application** | **Description** | **Key Features** | +| ------------------------ | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | +| **Facebook** | Social media platform, React's origin. | News feed, notifications, live chat, real-time updates, and interactive UI. | +| **Instagram** | Photo and video sharing platform owned by Meta. | Stories, filters, reels, dynamic user feeds, and push notifications. | +| **WhatsApp Web** | Web version of the popular messaging app. | Real-time messaging, live updates, QR login, and responsive design. | +| **Netflix** | Streaming platform for movies and TV shows. | Dynamic user interface, personalized recommendations, and optimized streaming experiences. | +| **Airbnb** | Marketplace for lodging, primarily short-term rentals. | Interactive maps, real-time search results, and responsive layouts for booking accommodations. | +| **Uber** | Ridesharing platform for booking cabs and delivery services. | Live tracking, dynamic pricing, and real-time updates. | +| **Pinterest** | Visual discovery engine for sharing ideas and inspirations. | Infinite scrolling, dynamic pin recommendations, and smooth user interactions. | +| **Slack** | Collaboration platform for messaging and workplace tools. | Real-time messaging, file sharing, and integrated third-party tools. | +| **Shopify** | E-commerce platform for businesses to create online stores. | Dynamic dashboards, real-time inventory updates, and responsive store designs. | +| **Discord** | Voice, video, and text communication platform for communities and gamers. | Real-time messaging, custom UIs for servers, and seamless voice/video integration. | +| **Dropbox** | Cloud storage platform for storing and sharing files. | Interactive UI for file uploads, drag-and-drop functionality, and real-time collaboration tools. | +| **Trello** | Project management tool for task organization. | Drag-and-drop Kanban boards, real-time updates, and interactive UI elements. | +| **Asana** | Task and project management application for teams. | Real-time task tracking, dynamic boards, and visual project timelines. | +| **BBC** | News website offering global and local news. | Dynamic content updates, real-time notifications, and seamless video playback. | +| **Medium** | Blogging platform for writers and readers. | Interactive editor, personalized reading lists, and infinite scrolling for articles. | +| **Khan Academy** | Online learning platform offering free courses and lessons. | Interactive learning tools, real-time quizzes, and progress tracking. | +| **GitHub (Front End)** | Code hosting platform for version control and collaboration. | Interactive dashboards, real-time updates on pull requests, and code comparison tools. | +| **CodeSandbox** | Online code editor for web development. | Real-time collaborative editing, live previews, and seamless integration with GitHub. | +| **Spotify (Web Player)** | Music streaming platform for discovering and playing music. | Real-time search, dynamic playlists, and audio playback optimization. | + +These examples showcase React's versatility in building scalable, interactive, and high-performing applications across various domains like social media, e-commerce, streaming, and productivity tools. + +--- +# References + +- https://www.netflix.com/ \ No newline at end of file diff --git a/assets/readmes/Setting Up the Development Environment for React with Vite.md b/assets/readmes/Setting Up the Development Environment for React with Vite.md new file mode 100644 index 0000000..632bf14 --- /dev/null +++ b/assets/readmes/Setting Up the Development Environment for React with Vite.md @@ -0,0 +1,88 @@ +--- +date : 2024-12-01T21:08:32+05:30 +draft : false +title : Setting Up the Development Environment for React With Vite +--- + +### 1. Installing Node.js and npm + +Node.js and npm (Node Package Manager) are prerequisites for creating and running React applications. + +1. **Download and Install Node.js**: + - Visit the [Node.js official website](https://nodejs.org). + - Download the **LTS** version for stability. + - Follow the installation instructions for your operating system. +2. **Verify Installation**: + - Open a terminal and run the following commands: +```bash +node -v +npm -v +``` + +- These commands will display the installed versions of Node.js and npm. + +--- + +### 2. Setting up a React Project + +1. Install Vite + Vite is a fast frontend build tool. + - Open a terminal and run +```bash +npm create vite@latest my-react-app --template react +``` + + - Replace `my-react-app` with your desired project name. + +2. **Navigate to the Project Directory**: +```bash +cd my-react-app +``` + +3. **Install Dependencies** + Run the following command to install all the dependencies + ```bash + npm install + ``` + +4. **Run the Development Server** + Start the Vite development server to preview your app + ```bash + npm run dev + ``` + + - The terminal will display a URL (e.g., `http://localhost:5173`) where you can view your app in the browser. + +--- +### 3. Overview of the Project Folder Structure + +Once the setup is complete, your project folder will look like this: + +```perl +my-react-app/ +├── node_modules/ # Installed npm packages +├── public/ # Static assets (e.g., images, icons) +│ └── vite.svg # Default Vite logo +├── src/ # Source code of your application +│ ├── App.css # Styles for the App component +│ ├── App.jsx # Main React component +│ ├── main.jsx # Entry point for the application +│ └── index.css # Global styles +├── .gitignore # Files and folders to ignore in Git +├── package.json # Project metadata and dependencies +├── vite.config.js # Configuration file for Vite +└── README.md # Project documentation +``` + +**Key Files and Folders**: + +- **`src/main.jsx`**: Entry point for your React app. It renders the root component (`App.jsx`). +- **`src/App.jsx`**: Default React component created by Vite. Customize this file to start building your app. +- **`public/`**: Store static assets like images or fonts. +- **`package.json`**: Manages dependencies, scripts, and project metadata. +- **`vite.config.js`**: Customize the build tool's behavior (e.g., plugins, server options). + +--- +# References + +- https://vite.dev/guide/ \ No newline at end of file diff --git a/assets/readmes/State in React.md b/assets/readmes/State in React.md new file mode 100644 index 0000000..becf749 --- /dev/null +++ b/assets/readmes/State in React.md @@ -0,0 +1,104 @@ +--- +date : 2024-12-01T21:31:26+05:30 +draft : false +title : State in React +--- + +**State** is used to manage data that changes within a component. Unlike props, state is **mutable** and controlled by the component itself. + +--- +### Using the `useState` Hook + +1. Import `useState` + ```jsx + import { useState } from 'react'; + ``` + +2. Initialize state + ```jsx + const [count, setCount] = useState(0); + ``` + +3. Update state + ```jsx + setCount(count + 1); + ``` + +--- +### Example of State + +```jsx +function Counter() { + const [count, setCount] = useState(0); + + return ( +

    +

    Count: {count}

    + +
    + ); +} +``` + +--- +### Updating and Managing State + +1. Updating State + - State updates are asynchronous. React batches multiple state updates for performance. + - Use the previous state for calculations + ```jsx + setCount((prevCount) => prevCount + 1); + ``` + +2. Managing Complex State + - For objects or arrays, update using the spread operator + ```jsx + const [user, setUser] = useState({ name: "John", age: 25 }); + setUser((prevUser) => ({ ...prevUser, age: 26 })); + ``` + +3. Conditional Rendering Based on State + ```jsx + function Toggle() { + const [isOn, setIsOn] = useState(false); + + return ( + + ); + } + ``` + +4. State in Forms + Manage input fields using state + ```jsx + function Form() { + const [name, setName] = useState(""); + + return ( + setName(e.target.value)} + /> + ); + } + ``` + +--- +### Summary + +|**Feature**|**Props**|**State**| +|---|---|---| +|**Mutability**|Immutable (read-only)|Mutable (can be updated)| +|**Scope**|Passed from parent to child|Local to the component| +|**Use Case**|Passing data between components|Managing dynamic, interactive data| +|**Example**|``|`const [count, setCount] = useState(0)`| +- **Props** make components reusable by passing dynamic data. +- **State** manages component-specific data that changes over time. + +--- +# References + +- https://www.freecodecamp.org/news/full-guide-to-react-hooks/ \ No newline at end of file diff --git a/assets/readmes/Styling in React.md b/assets/readmes/Styling in React.md new file mode 100644 index 0000000..4fb8c46 --- /dev/null +++ b/assets/readmes/Styling in React.md @@ -0,0 +1,235 @@ +--- +date : 2024-12-01T21:42:01+05:30 +draft : false +title : Styling in React +--- + +In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like **Styled Components** and utility-first frameworks like **Tailwind CSS**. This note will explore these approaches and when to use each. + +--- + +### 1. Inline Styles vs External CSS vs CSS Modules + +#### 1.1 Inline Styles + +Inline styles are applied directly within a component using a JavaScript object. Each style property is written in camelCase instead of hyphenated format. + +**Advantages**: + +- Simple and quick for small styles or individual components. +- Styles are scoped to the component, preventing accidental global styles. + +**Disadvantages**: + +- Not ideal for complex styles or media queries. +- Limited to basic styles and does not support pseudo-classes like `:hover` or `:focus`. + +#### Example of Inline Styles: + +```jsx +function MyComponent() { + const buttonStyle = { + backgroundColor: 'blue', + color: 'white', + padding: '10px', + borderRadius: '5px' + }; + + return ; +} +``` + +#### 1.2 External CSS + +External CSS is the traditional way of styling websites. You create a `.css` file, and then link it to your React component by importing it. This approach is great for global styles and standard CSS features like pseudo-classes, media queries, and more. + +**Advantages**: + +- Good for global styles and shared styles between components. +- Easier to maintain for larger projects. + +**Disadvantages**: + +- Global scope can lead to unintended side effects (i.e., styles affecting unrelated components). +- No automatic scoping of styles, which can lead to conflicts. + +#### Example of External CSS: + +1. **Create a CSS file** (`styles.css`): + +```css +/* styles.css */ +.button { + background-color: blue; + color: white; + padding: 10px; + border-radius: 5px; +} +``` + +2. **Import and use in a React component**: + +```jsx +import './styles.css'; + +function MyComponent() { + return ; +} +``` + +#### 1.3 CSS Modules + +CSS Modules help in **scoping CSS locally** to the component, meaning styles are applied only to the specific component and won't interfere with other components. They use a unique class name behind the scenes to prevent style conflicts. + +**Advantages**: + +- Localized styling, meaning styles are scoped to the component. +- Prevents class name conflicts. + +**Disadvantages**: + +- Can become verbose if not structured well. +- Requires an additional setup (though this is done automatically in most React build tools). + +#### Example of CSS Modules + +1. **Create a CSS Module file** (`MyComponent.module.css`): + +```css +/* MyComponent.module.css */ +.button { + background-color: blue; + color: white; + padding: 10px; + border-radius: 5px; +} +``` + +2. **Import and use the CSS Module in the component**: + +```jsx +import styles from './MyComponent.module.css'; + +function MyComponent() { + return ; +} +``` + +--- + +### 2. Introduction to Styling Libraries + +#### 2.1 Styled Components (CSS-in-JS) + +**Styled Components** is a popular **CSS-in-JS** library that allows you to write CSS directly in your JavaScript/JSX files. It provides the benefit of scoped styling (like CSS Modules), but also supports more dynamic styles by utilizing JavaScript to control the style based on props or state. + +**Advantages**: + +- Styles are scoped to the component by default. +- Supports dynamic styles based on props or state. +- Full access to JavaScript logic in styling (e.g., conditional styles). + +**Disadvantages**: + +- May add some overhead for small projects. +- Can result in larger JavaScript bundles due to the CSS-in-JS runtime. + +#### Example of Styled Components: + +1. **Install Styled Components**: + +```bash +npm install styled-components +``` + +2. **Usage in a Component**: + +```jsx +import styled from 'styled-components'; + +const Button = styled.button` + background-color: blue; + color: white; + padding: 10px; + border-radius: 5px; + + &:hover { + background-color: darkblue; + } +`; + +function MyComponent() { + return ; +} +``` + +In this example, the `Button` component is styled using `styled-components`, and the styles are applied only to that component. + +--- + +#### 2.2 Tailwind CSS + +**Tailwind CSS** is a utility-first CSS framework that provides low-level utility classes to build custom designs. It’s often used with React to create fast and responsive UIs without writing custom CSS. + +**Advantages**: + +- Fast to develop with, as it avoids the need to write custom CSS. +- Encourages reusable and consistent styles with utility classes. +- Built-in responsive design and other common design patterns. + +**Disadvantages**: + +- May result in long class names in JSX, which can be harder to read. +- Over-reliance on utility classes can lead to repetitive code. + +#### Example of Tailwind CSS: + +1. **Install Tailwind CSS**: + +```bash +npm install tailwindcss +npx tailwindcss init +``` + +2. **Setup and use in your React component**: + +```jsx +function MyComponent() { + return ( + + ); +} +``` + +In this example, Tailwind utility classes are used to style the `button` element with background color, text color, padding, rounded corners, and a hover effect. + +--- + +### Summary of Styling in React + +|**Method**|**Advantages**|**Disadvantages**| +|---|---|---| +|**Inline Styles**|Quick to implement, scoped to component|Limited features (no pseudo-classes), not ideal for complex styles| +|**External CSS**|Great for global styles and easy to maintain|Global scope can lead to conflicts, no automatic scoping| +|**CSS Modules**|Scoped to components, prevents style conflicts|Requires extra setup, can become verbose| +|**Styled Components (CSS-in-JS)**|Scoped styles, dynamic styling based on props or state|Can add overhead, larger bundle sizes| +|**Tailwind CSS**|Fast development, utility classes for consistent design|Long class names in JSX, can result in repetitive code| + +--- + +### Conclusion + +- **Inline styles** are useful for simple, scoped styling but are limited for complex scenarios. +- **External CSS** is great for global styles but can cause conflicts in larger projects. +- **CSS Modules** provide scoped styles without the global leakage of external CSS. +- **Styled Components** offer powerful, dynamic styling capabilities within React using JavaScript. +- **Tailwind CSS** is an efficient utility-first CSS framework that speeds up development with a consistent design pattern. + +Choosing the right approach depends on the project size, requirements, and preferences. For small projects, inline styles or external CSS might suffice, while larger projects may benefit from CSS Modules, Styled Components, or Tailwind CSS. + +--- +# References + +- https://legacy.reactjs.org/docs/faq-styling.html \ No newline at end of file diff --git a/build-and-deploy-project-to-github.html b/build-and-deploy-project-to-github.html index 06c4126..b302f1f 100644 --- a/build-and-deploy-project-to-github.html +++ b/build-and-deploy-project-to-github.html @@ -1,4 +1,4 @@ -Kavindu Udara

    build and deploy project to github

    12 February 2025

    Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project:

    +Kavindu Udara

    build and deploy project to github

    12 February 2025

    Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project:

    1. Install gh-pages: @@ -82,4 +82,4 @@

      Resources not loading - vite config error

    -

    This should fix the asset paths and make sure your deployed site loads correctly. If you encounter any more issues or need further assistance, feel free to let me know!

    \ No newline at end of file +

    This should fix the asset paths and make sure your deployed site loads correctly. If you encounter any more issues or need further assistance, feel free to let me know!

    \ No newline at end of file diff --git a/build-and-deploy-project-to-github.txt b/build-and-deploy-project-to-github.txt index 249c38e..9678bd8 100644 --- a/build-and-deploy-project-to-github.txt +++ b/build-and-deploy-project-to-github.txt @@ -5,9 +5,103 @@ 7:I[6213,[],"MetadataBoundary"] 9:I[6213,[],"ViewportBoundary"] b:I[4835,[],""] -:HL["/me/_next/static/css/7cdffd469baeb000.css","style"] -0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["","build-and-deploy-project-to-github"],"i":false,"f":[[["",{"children":[["slug","build-and-deploy-project-to-github","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","build-and-deploy-project-to-github","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","WFIZ4KjhAnYgpToqLorpa",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} -4:["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":["$","div",null,{"className":"markdown-container","children":[["$","div",null,{"className":"flex flex-wrap items-center justify-start gap-4 mb-5","children":[["$","button",null,{"className":"p-4 rounded-lg cursor-pointer ","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 448 512","children":["$undefined",[["$","path","0",{"d":"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z","children":[]}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","h1",null,{"className":"text-4xl font-bold ","children":"build and deploy project to github"}]]}],["$","blockquote",null,{"className":"underline font-semibold","children":"12 February 2025"}],["$","hr",null,{}],["$","div",null,{"className":"prose","children":[["$","p","p-0",{"children":"Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project:"}],"\n",["$","ol","ol-0",{"children":["\n",["$","li","li-0",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Install gh-pages"}],":\nFirst, you need to install the ",["$","code","code-0",{"children":"gh-pages"}]," package as a dev dependency. Open your terminal and run the following command:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"npm install gh-pages --save-dev\n"}]}],"\n"]}],"\n",["$","li","li-1",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Update package.json"}],":\nNext, you need to make some updates to your ",["$","code","code-0",{"children":"package.json"}]," file. Add the following properties:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-json","children":"{\n \"homepage\": \"https://your-username.github.io/your-repo-name\",\n \"scripts\": {\n \"predeploy\": \"npm run build\",\n \"deploy\": \"gh-pages -d build\"\n }\n}\n"}]}],"\n",["$","p","p-1",{"children":["Replace ",["$","code","code-0",{"children":"your-username"}]," with your GitHub username and ",["$","code","code-1",{"children":"your-repo-name"}]," with the name of your repository."]}],"\n"]}],"\n",["$","li","li-2",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Build and deploy"}],":\nFinally, run the following command in your terminal to build and deploy your project:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"npm run deploy\n"}]}],"\n"]}],"\n"]}],"\n",["$","p","p-1",{"children":["This will create a production build of your React project and push it to a branch named ",["$","code","code-0",{"children":"gh-pages"}]," in your GitHub repository. Your site will be available at ",["$","code","code-1",{"children":"https://your-username.github.io/your-repo-name"}],"."]}],"\n",["$","p","p-2",{"children":"If you need any more help or run into any issues, feel free to ask!"}],"\n",["$","hr","hr-0",{}],"\n",["$","h1","h1-0",{"children":"Update the changes"}],"\n",["$","p","p-3",{"children":"Updating your deployed page on GitHub Pages after making changes to your project is quite straightforward. All you need to do is follow these steps:"}],"\n",["$","ol","ol-1",{"children":["\n",["$","li","li-0",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Make Changes"}],": First, make the necessary changes to your project locally."]}],"\n"]}],"\n",["$","li","li-1",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Commit Changes"}],": Save and commit your changes to your local repository:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"git add .\ngit commit -m \"Your commit message\"\n"}]}],"\n"]}],"\n",["$","li","li-2",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Push Changes"}],": Push your changes to your GitHub repository:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"git push origin main\n"}]}],"\n",["$","p","p-1",{"children":["Replace ",["$","code","code-0",{"children":"main"}]," with your branch name if it's different."]}],"\n"]}],"\n",["$","li","li-3",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Deploy Again"}],": Run the deploy script again to update the GitHub Pages with your latest changes:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"npm run deploy\n"}]}],"\n"]}],"\n"]}],"\n",["$","p","p-4",{"children":["This will rebuild your project and push the new build to the ",["$","code","code-0",{"children":"gh-pages"}]," branch, updating your deployed page."]}],"\n",["$","p","p-5",{"children":"By following these steps, your live site will reflect the latest changes you've made to your project. If you run into any issues or need further assistance, feel free to ask!"}],"\n",["$","hr","hr-1",{}],"\n",["$","h1","h1-1",{"children":"Resources not loading - vite config error"}],"\n",["$","p","p-6",{"children":["It looks like the problem is that your assets are not being found at the correct paths. This usually happens because of incorrect relative paths or base URL configuration. In Vite, you can fix this by setting the ",["$","code","code-0",{"children":"base"}]," property in ",["$","code","code-1",{"children":"vite.config.js"}]," to match your repository name."]}],"\n",["$","p","p-7",{"children":["Here’s how you can update your ",["$","code","code-0",{"children":"vite.config.js"}]," file:"]}],"\n",["$","ol","ol-2",{"children":["\n",["$","li","li-0",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Create or edit vite.config.js"}],":\nIf you don't have a ",["$","code","code-0",{"children":"vite.config.js"}]," file, create one in the root of your project. Add the following content:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-js","children":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n base: '/react-music-player/', // Replace with your repo name\n plugins: [react()],\n});\n"}]}],"\n",["$","p","p-1",{"children":["If you already have a ",["$","code","code-0",{"children":"vite.config.js"}]," file, just add or update the ",["$","code","code-1",{"children":"base"}]," property as shown above."]}],"\n"]}],"\n",["$","li","li-1",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Rebuild and redeploy"}],":\nNow, rebuild your project and deploy it again:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"npm run build\nnpm run deploy\n"}]}],"\n"]}],"\n"]}],"\n",["$","p","p-8",{"children":"This should fix the asset paths and make sure your deployed site loads correctly. If you encounter any more issues or need further assistance, feel free to let me know!"}]]}]]}]}] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","build-and-deploy-project-to-github"],"i":false,"f":[[["",{"children":[["slug","build-and-deploy-project-to-github","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","build-and-deploy-project-to-github","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","KWxV4gj02iTFUO1MRS_Nb",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:Td47, +Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project: + +1. **Install gh-pages**: + First, you need to install the `gh-pages` package as a dev dependency. Open your terminal and run the following command: + ```sh + npm install gh-pages --save-dev + ``` + +2. **Update package.json**: + Next, you need to make some updates to your `package.json` file. Add the following properties: + ```json + { + "homepage": "https://your-username.github.io/your-repo-name", + "scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build" + } + } + ``` + Replace `your-username` with your GitHub username and `your-repo-name` with the name of your repository. + +3. **Build and deploy**: + Finally, run the following command in your terminal to build and deploy your project: + ```sh + npm run deploy + ``` + +This will create a production build of your React project and push it to a branch named `gh-pages` in your GitHub repository. Your site will be available at `https://your-username.github.io/your-repo-name`. + +If you need any more help or run into any issues, feel free to ask! + +--- + +# Update the changes + +Updating your deployed page on GitHub Pages after making changes to your project is quite straightforward. All you need to do is follow these steps: + +1. **Make Changes**: First, make the necessary changes to your project locally. + +2. **Commit Changes**: Save and commit your changes to your local repository: + ```sh + git add . + git commit -m "Your commit message" + ``` + +3. **Push Changes**: Push your changes to your GitHub repository: + ```sh + git push origin main + ``` + Replace `main` with your branch name if it's different. + +4. **Deploy Again**: Run the deploy script again to update the GitHub Pages with your latest changes: + ```sh + npm run deploy + ``` + +This will rebuild your project and push the new build to the `gh-pages` branch, updating your deployed page. + +By following these steps, your live site will reflect the latest changes you've made to your project. If you run into any issues or need further assistance, feel free to ask! + +--- + +# Resources not loading - vite config error + +It looks like the problem is that your assets are not being found at the correct paths. This usually happens because of incorrect relative paths or base URL configuration. In Vite, you can fix this by setting the `base` property in `vite.config.js` to match your repository name. + +Here’s how you can update your `vite.config.js` file: + +1. **Create or edit vite.config.js**: + If you don't have a `vite.config.js` file, create one in the root of your project. Add the following content: + + ```js + // vite.config.js + import { defineConfig } from 'vite'; + import react from '@vitejs/plugin-react'; + + export default defineConfig({ + base: '/react-music-player/', // Replace with your repo name + plugins: [react()], + }); + ``` + + If you already have a `vite.config.js` file, just add or update the `base` property as shown above. + +2. **Rebuild and redeploy**: + Now, rebuild your project and deploy it again: + + ```sh + npm run build + npm run deploy + ``` + +This should fix the asset paths and make sure your deployed site loads correctly. If you encounter any more issues or need further assistance, feel free to let me know!4:["$","$Lc",null,{"content":"$d","data":{"date":"2025-02-12T11:12:58+0530","draft":true,"title":"build and deploy project to github"}}] a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] 6:null diff --git a/components-in-react.html b/components-in-react.html new file mode 100644 index 0000000..86fd6f7 --- /dev/null +++ b/components-in-react.html @@ -0,0 +1,123 @@ +Kavindu Udara

    Components in React

    01 December 2024

    React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces.

    +
    +

    Functional Components vs Class Components

    +
    AspectFunctional ComponentsClass Components
    DefinitionPlain JavaScript functions that return JSX.ES6 classes that extend React.Component.
    StateUses the useState and useEffect hooks (introduced in React 16.8).Uses this.state for managing state.
    Lifecycle MethodsReplaced by hooks like useEffect.Explicit lifecycle methods like componentDidMount.
    SyntaxSimpler and more concise.More verbose due to class structure.
    PerformanceGenerally lighter and faster.Slightly heavier because of class overhead.
    Example
    Functional Component:Class Component:
    ```jsx```jsx
    function Greet() {class Greet extends React.Component {
    return <h1>Hello</h1>;render() {
    }return <h1>Hello</h1>;
    ```}
    +
    +

    When to Use?

    +
      +
    • Use functional components whenever possible; they are the modern and preferred approach. Class components are now rarely used in new projects.
      • +
    +
    +

    How to Create and Export Components

    +
      +
    1. +

      Creating a Functional Component

      +
      // Greet.jsx
+function Greet() {
+return <h1>Hello, World!</h1>;
+}
+export default Greet;
+
      +
      2. +
    2. +

      Creating a Class Component

      +
      // Welcome.jsx
+import React, { Component } from 'react';
+class Welcome extends Component {
+render() {
+    return <h1>Welcome to React!</h1>;
+    }
+}
+export default Welcome;
+
      +
      3. +
    3. +

      Named Exports +You can export multiple components from a file:

      +
      4. +
    +
    // Greetings.jsx
+export function Hello() {
+    return <h1>Hello!</h1>;
+}
+
+export function Goodbye() {
+    return <h1>Goodbye!</h1>;
+}
+
+
    +
    +

    Importing Components and Using Them Inside Other Components

    +
      +
    1. Default Export +Import and use a default exported component
      2. +
    +
    import Greet from './Greet';
+
+function App() {
+    return (
+        <div>
+            <Greet />
+        </div>
+    );
+}
+export default App;
+
+
    +
      +
    1. Named Exports +Import and use named exported components
      2. +
    +
    import { Hello, Goodbye } from './Greetings';
+
+function App() {
+    return (
+        <div>
+            <Hello />
+            <Goodbye />
+        </div>
+    );
+}
+export default App;
+
    +
      +
    1. Aliasing Components +Rename components during import
      2. +
    +
    import { Hello as Hi } from './Greetings';
+
+function App() {
+    return <Hi />;
+}
+export default App;
+
    +
      +
    1. Composing Components +Use components inside other components to build a hierarchy
      2. +
    +
    import Greet from './Greet';
+
+function Header() {
+    return (
+        <header>
+            <Greet />
+            <h2>This is a header</h2>
+        </header>
+    );
+}
+
+export default Header;
+
    +
    +

    Summary

    +
      +
    • Functional Components are the modern standard due to hooks and simplicity.
      • +
    • Components can be exported as default or named exports.
      • +
    • You can compose a rich UI by importing and using components inside other components.
      +This modular structure makes React scalable and maintainable.
      • +
    +
    +

    References

    +
    \ No newline at end of file diff --git a/components-in-react.txt b/components-in-react.txt new file mode 100644 index 0000000..61db6d0 --- /dev/null +++ b/components-in-react.txt @@ -0,0 +1,152 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","components-in-react"],"i":false,"f":[[["",{"children":[["slug","components-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","components-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","fzAiIk6IGkXF1VmCsgKxh",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T1273, +React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces. + +--- +### Functional Components vs Class Components + +| **Aspect** | **Functional Components** | **Class Components** | +| ------------------------ | --------------------------------------------------------------------- | ---------------------------------------------------- | +| **Definition** | Plain JavaScript functions that return JSX. | ES6 classes that extend `React.Component`. | +| **State** | Uses the `useState` and `useEffect` hooks (introduced in React 16.8). | Uses `this.state` for managing state. | +| **Lifecycle Methods** | Replaced by hooks like `useEffect`. | Explicit lifecycle methods like `componentDidMount`. | +| **Syntax** | Simpler and more concise. | More verbose due to class structure. | +| **Performance** | Generally lighter and faster. | Slightly heavier because of class overhead. | +| **Example** | | | +| Functional Component: | Class Component: | | +| ```jsx | ```jsx | | +| function Greet() { | class Greet extends React.Component { | | +| return `

    Hello

    `; | render() { | | +| } | return `

    Hello

    `; | | +| ``` | } | | + +--- +### When to Use? + +- Use functional components whenever possible; they are the modern and preferred approach. Class components are now rarely used in new projects. + +--- +### How to Create and Export Components + +1. Creating a Functional Component + ```jsx + // Greet.jsx + function Greet() { + return

    Hello, World!

    ; + } + export default Greet; + ``` + +2. Creating a Class Component + ```jsx + // Welcome.jsx + import React, { Component } from 'react'; + class Welcome extends Component { + render() { + return

    Welcome to React!

    ; + } + } + export default Welcome; + ``` + +3. Named Exports + You can export multiple components from a file: +```jsx +// Greetings.jsx +export function Hello() { + return

    Hello!

    ; +} + +export function Goodbye() { + return

    Goodbye!

    ; +} + +``` + +--- +### Importing Components and Using Them Inside Other Components + +1. Default Export + Import and use a default exported component +```jsx +import Greet from './Greet'; + +function App() { + return ( +
    + +
    + ); +} +export default App; + +``` + +2. Named Exports + Import and use named exported components +```jsx +import { Hello, Goodbye } from './Greetings'; + +function App() { + return ( +
    + + +
    + ); +} +export default App; +``` + +3. Aliasing Components + Rename components during import +```jsx +import { Hello as Hi } from './Greetings'; + +function App() { + return ; +} +export default App; +``` + +4. Composing Components + Use components inside other components to build a hierarchy +```jsx +import Greet from './Greet'; + +function Header() { + return ( +
    + +

    This is a header

    +
    + ); +} + +export default Header; +``` + +--- +### Summary + +- **Functional Components** are the modern standard due to hooks and simplicity. +- Components can be exported as default or named exports. +- You can compose a rich UI by importing and using components inside other components. + This modular structure makes React scalable and maintainable. + +--- +# References + +- https://www.freecodecamp.org/news/function-component-vs-class-component-in-react/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:55:51.000Z","draft":false,"title":"Components in React"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/conditional-rendering-in-react.html b/conditional-rendering-in-react.html new file mode 100644 index 0000000..d7ec8d7 --- /dev/null +++ b/conditional-rendering-in-react.html @@ -0,0 +1,84 @@ +Kavindu Udara

    Conditional Rendering in React

    01 December 2024

    Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component.

    +
    +

    1. Using if-else Statements

    +

    You can use standard JavaScript if-else statements for conditional rendering within a component. Typically, you would do this outside of the JSX return statement, such as within the render function or directly before the return.

    +

    Example: Using if-else

    +
    function Greeting({ isLoggedIn }) {
+    let message;
+    
+    if (isLoggedIn) {
+        message = <h1>Welcome Back!</h1>;
+    } else {
+        message = <h1>Please Sign In</h1>;
+    }
+
+    return <div>{message}</div>;
+}
+
    +

    In this example, if-else is used to set the value of message based on the isLoggedIn prop, which is then rendered inside the component.

    +
    +

    2. Using Ternary Operators

    +

    A ternary operator is a shorthand for if-else and is commonly used for inline conditional rendering within JSX. It has the following syntax:

    +
    condition ? expression_if_true : expression_if_false;
+
    +

    Example: Using Ternary Operator

    +
    function Greeting({ isLoggedIn }) {
+    return (
+        <div>
+            {isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>}
+        </div>
+    );
+}
+
    +

    In this example, if isLoggedIn is true, "Welcome Back!" is rendered; otherwise, "Please Sign In" is shown. Ternary operators are great for simple conditions.

    +
    +

    3. Using && (Logical AND) Operator

    +

    The && (logical AND) operator can be used for conditional rendering when you want to display something only if a condition is true. This is useful for scenarios where you only want to render an element when a certain condition holds.

    +

    Example: Using && Operator

    +
    function Notification({ message }) {
+    return (
+        <div>
+            {message && <p>{message}</p>}
+        </div>
+    );
+}
+
    +

    In this example, the paragraph will only be rendered if message is truthy. If message is null or undefined, nothing will be displayed.

    +
    +

    4. Conditional Rendering Based on Multiple Conditions

    +

    You can also combine if-else, ternary operators, and && logic for more complex conditions.

    +

    Example: Multiple Conditions

    +
    function UserStatus({ user }) {
+    return (
+        <div>
+            {user ? (
+                user.isAdmin ? (
+                    <h1>Welcome, Admin!</h1>
+                ) : (
+                    <h1>Welcome, {user.name}!</h1>
+                )
+            ) : (
+                <h1>Please log in</h1>
+            )}
+        </div>
+    );
+}
+
    +

    In this example, multiple conditions are checked using nested ternary operators to display different messages based on whether the user is logged in and whether they are an admin.

    +
    +

    Summary of Conditional Rendering Methods

    +
    MethodUse CaseExample
    if-elseFor more complex conditions or multiple branchesif (isLoggedIn) { return <h1>Welcome!</h1>; } else { return <h1>Please Sign In</h1>; }
    Ternary OperatorInline conditionals, simpler cases{isLoggedIn ? <h1>Welcome!</h1> : <h1>Please Sign In</h1>}
    && (Logical AND)When you want to render something only if a condition is true{isLoggedIn && <h1>Welcome!</h1>}
    +
    +

    Best Practices

    +
      +
    • Use ternary operators for simple conditions, especially within JSX.
      • +
    • Use && for conditional rendering when you only want to render an element when a condition is true.
      • +
    • For more complex logic, prefer if-else statements outside of JSX.
      • +
    +

    By using these techniques, you can conditionally render content in React based on various states, props, or conditions, enabling dynamic and interactive user interfaces.

    +
    +

    References

    +
    \ No newline at end of file diff --git a/conditional-rendering-in-react.txt b/conditional-rendering-in-react.txt new file mode 100644 index 0000000..28c012e --- /dev/null +++ b/conditional-rendering-in-react.txt @@ -0,0 +1,137 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","conditional-rendering-in-react"],"i":false,"f":[[["",{"children":[["slug","conditional-rendering-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","conditional-rendering-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","KrClAiRZBN8Hj3peww_OE",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T1016, +Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component. + +--- + +### 1. Using `if-else` Statements + +You can use standard JavaScript `if-else` statements for conditional rendering within a component. Typically, you would do this outside of the JSX return statement, such as within the render function or directly before the return. + +#### Example: Using `if-else` + +```jsx +function Greeting({ isLoggedIn }) { + let message; + + if (isLoggedIn) { + message =

    Welcome Back!

    ; + } else { + message =

    Please Sign In

    ; + } + + return
    {message}
    ; +} +``` + +In this example, `if-else` is used to set the value of `message` based on the `isLoggedIn` prop, which is then rendered inside the component. + +--- + +### 2. Using Ternary Operators + +A **ternary operator** is a shorthand for `if-else` and is commonly used for inline conditional rendering within JSX. It has the following syntax: + +```jsx +condition ? expression_if_true : expression_if_false; +``` + +#### Example: Using Ternary Operator + +```jsx +function Greeting({ isLoggedIn }) { + return ( +
    + {isLoggedIn ?

    Welcome Back!

    :

    Please Sign In

    } +
    + ); +} +``` + +In this example, if `isLoggedIn` is `true`, "Welcome Back!" is rendered; otherwise, "Please Sign In" is shown. Ternary operators are great for simple conditions. + +--- + +### 3. Using `&&` (Logical AND) Operator + +The `&&` (logical AND) operator can be used for conditional rendering when you want to display something only if a condition is `true`. This is useful for scenarios where you only want to render an element when a certain condition holds. + +#### Example: Using `&&` Operator + +```jsx +function Notification({ message }) { + return ( +
    + {message &&

    {message}

    } +
    + ); +} +``` + +In this example, the paragraph will only be rendered if `message` is truthy. If `message` is `null` or `undefined`, nothing will be displayed. + +--- + +### 4. Conditional Rendering Based on Multiple Conditions + +You can also combine `if-else`, ternary operators, and `&&` logic for more complex conditions. + +#### Example: Multiple Conditions + +```jsx +function UserStatus({ user }) { + return ( +
    + {user ? ( + user.isAdmin ? ( +

    Welcome, Admin!

    + ) : ( +

    Welcome, {user.name}!

    + ) + ) : ( +

    Please log in

    + )} +
    + ); +} +``` + +In this example, multiple conditions are checked using nested ternary operators to display different messages based on whether the user is logged in and whether they are an admin. + +--- + +### Summary of Conditional Rendering Methods + +|**Method**|**Use Case**|**Example**| +|---|---|---| +|**`if-else`**|For more complex conditions or multiple branches|`if (isLoggedIn) { return

    Welcome!

    ; } else { return

    Please Sign In

    ; }`| +|**Ternary Operator**|Inline conditionals, simpler cases|`{isLoggedIn ?

    Welcome!

    :

    Please Sign In

    }`| +|**`&&` (Logical AND)**|When you want to render something only if a condition is true|`{isLoggedIn &&

    Welcome!

    }`| + +--- + +### Best Practices + +- Use **ternary operators** for simple conditions, especially within JSX. +- Use **`&&`** for conditional rendering when you only want to render an element when a condition is true. +- For more complex logic, prefer **`if-else` statements** outside of JSX. + +By using these techniques, you can conditionally render content in React based on various states, props, or conditions, enabling dynamic and interactive user interfaces. + +--- +# References + +- https://www.w3schools.com/react/react_conditional_rendering.asp +- https://legacy.reactjs.org/docs/conditional-rendering.html4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:05:23.000Z","draft":false,"title":"Conditional Rendering in React"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/deploying-a-react-app.html b/deploying-a-react-app.html new file mode 100644 index 0000000..b1a502c --- /dev/null +++ b/deploying-a-react-app.html @@ -0,0 +1,84 @@ +Kavindu Udara

    Deploying a React App

    01 December 2024

    Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the npm run build command, which creates an optimized version of your app for deployment.

    +
    +

    1. Preparing the App for Production Using npm run build

    +

    When you’re ready to deploy your React app, the first step is to create a production build. React provides a command npm run build that bundles your app into static files optimized for performance. This build includes minified JavaScript, optimized assets, and a structure that can be served by a static server.

    +

    Steps to Prepare Your React App for Production

    +
      +
    1. +

      Ensure the Project is Ready:

      +
        +
      • Before building your app, make sure all code is final and all features are working as expected.
        • +
      • Test your app thoroughly in development mode (npm start).
        • +
      +
      2. +
    2. +

      Create a Production Build: To create a production-ready build, open your terminal and run:

      +
      npm run build
+
      +

      This command does the following:

      +
        +
      • Minifies and bundles your JavaScript and CSS files for faster loading.
        • +
      • Optimizes images and other assets.
        • +
      • Adds hashing to filenames to improve caching.
        • +
      • Ensures that the app is ready for deployment to a web server.
        • +
      +

      After running the command, a new folder named build/ will be created in your project directory.

      +
      3. +
    3. +

      Inspect the Build Folder: The build/ folder will contain the following files:

      +
        +
      • index.html: The main HTML file that includes links to your bundled JavaScript and CSS.
        • +
      • static/: A folder containing all the assets (images, fonts, etc.) and minified JavaScript and CSS files.
        • +
      • asset-manifest.json: Contains a list of files with their hash for cache management.
        • +
      +

      This build folder is ready to be deployed to a static server.

      +
      4. +
    4. +

      Environment Variables: Ensure that all necessary environment variables are set for production. You can define them in .env files or directly in the server environment.

      +

      For example, if you need to specify a different API URL for production, you can use:

      +
      REACT_APP_API_URL=https://api.yourdomain.com
+
      +

      These environment variables are automatically replaced during the build process.

      +
      5. +
    5. +

      Check the Build: It's a good idea to test the build locally before deploying. You can use a simple static server like serve to serve your production build.

      +

      First, install serve globally if you don’t have it:

      +
      npm install -g serve
+
      +

      Then, run the following command to serve your build:

      +
      serve -s build
+
      +

      This will start a local server that serves your production build, allowing you to check if everything is working as expected before deploying it to a live server.

      +
      6. +
    +
    +

    2. Key Benefits of Using npm run build

    +
      +
    • Performance Optimization: The build command optimizes your React app for production by reducing the file sizes (through minification), removing unnecessary code, and making the app load faster.
      • +
    • Caching: The build process generates hashed filenames for assets, improving cache management on the client side. This means that once assets are cached, users won't have to re-download them unless they change.
      • +
    • Compatibility: The production build is optimized to run on most modern web servers, making it easier to deploy to different hosting platforms.
      • +
    +
    +

    3. Deploying the Production Build

    +

    Once the build is ready, you can deploy it to your desired hosting platform. Some common platforms for deploying React apps include:

    +
      +
    • Netlify: Simple, free hosting for static sites. Just drag and drop the build/ folder or link your GitHub repository.
      • +
    • Vercel: Another popular platform for static apps that integrates well with React. It automatically optimizes the build during deployment.
      • +
    • GitHub Pages: Free hosting for static websites directly from your GitHub repository.
      • +
    • Firebase Hosting: Provides fast, secure hosting for web apps with a free tier available.
      • +
    • AWS S3 & CloudFront: For more complex or scalable deployments.
      • +
    +
    +

    Summary

    +
      +
    • npm run build is the key command for preparing your React app for production. It bundles and optimizes your app for performance and scalability.
      • +
    • After building the app, you will have a build/ folder containing all the optimized assets ready to be deployed.
      • +
    • Ensure that environment variables are correctly set for production, and test the build locally before deploying it.
      • +
    • Popular platforms for deploying React apps include Netlify, Vercel, Firebase, and GitHub Pages.
      • +
    +

    By following these steps, you’ll ensure your React app is production-ready and performs optimally for end-users.

    +
    +

    References

    +
    \ No newline at end of file diff --git a/deploying-a-react-app.txt b/deploying-a-react-app.txt new file mode 100644 index 0000000..211eeba --- /dev/null +++ b/deploying-a-react-app.txt @@ -0,0 +1,113 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","deploying-a-react-app"],"i":false,"f":[[["",{"children":[["slug","deploying-a-react-app","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","deploying-a-react-app","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","aNzXhI1YBnB8l-6JbdW3g",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T1421, +Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the `npm run build` command, which creates an optimized version of your app for deployment. + +--- + +### 1. Preparing the App for Production Using `npm run build` + +When you’re ready to deploy your React app, the first step is to create a **production build**. React provides a command `npm run build` that bundles your app into static files optimized for performance. This build includes minified JavaScript, optimized assets, and a structure that can be served by a static server. + +#### Steps to Prepare Your React App for Production + +1. **Ensure the Project is Ready:** + + - Before building your app, make sure all code is final and all features are working as expected. + - Test your app thoroughly in development mode (`npm start`). +2. **Create a Production Build:** To create a production-ready build, open your terminal and run: + + ```bash + npm run build + ``` + + This command does the following: + + - **Minifies** and **bundles** your JavaScript and CSS files for faster loading. + - Optimizes images and other assets. + - Adds **hashing** to filenames to improve caching. + - Ensures that the app is ready for deployment to a web server. + + After running the command, a new folder named `build/` will be created in your project directory. + +3. **Inspect the Build Folder:** The `build/` folder will contain the following files: + + - `index.html`: The main HTML file that includes links to your bundled JavaScript and CSS. + - `static/`: A folder containing all the assets (images, fonts, etc.) and minified JavaScript and CSS files. + - `asset-manifest.json`: Contains a list of files with their hash for cache management. + + This build folder is ready to be deployed to a static server. + +4. **Environment Variables:** Ensure that all necessary environment variables are set for production. You can define them in `.env` files or directly in the server environment. + + For example, if you need to specify a different **API URL** for production, you can use: + + ```bash + REACT_APP_API_URL=https://api.yourdomain.com + ``` + + These environment variables are automatically replaced during the build process. + +5. **Check the Build:** It's a good idea to test the build locally before deploying. You can use a simple static server like **serve** to serve your production build. + + First, install `serve` globally if you don’t have it: + + ```bash + npm install -g serve + ``` + + Then, run the following command to serve your build: + + ```bash + serve -s build + ``` + + This will start a local server that serves your production build, allowing you to check if everything is working as expected before deploying it to a live server. + + +--- + +### 2. Key Benefits of Using `npm run build` + +- **Performance Optimization:** The `build` command optimizes your React app for production by reducing the file sizes (through minification), removing unnecessary code, and making the app load faster. +- **Caching:** The build process generates hashed filenames for assets, improving cache management on the client side. This means that once assets are cached, users won't have to re-download them unless they change. +- **Compatibility:** The production build is optimized to run on most modern web servers, making it easier to deploy to different hosting platforms. + +--- + +### 3. Deploying the Production Build + +Once the build is ready, you can deploy it to your desired hosting platform. Some common platforms for deploying React apps include: + +- **Netlify:** Simple, free hosting for static sites. Just drag and drop the `build/` folder or link your GitHub repository. +- **Vercel:** Another popular platform for static apps that integrates well with React. It automatically optimizes the build during deployment. +- **GitHub Pages:** Free hosting for static websites directly from your GitHub repository. +- **Firebase Hosting:** Provides fast, secure hosting for web apps with a free tier available. +- **AWS S3 & CloudFront:** For more complex or scalable deployments. + +--- + +### Summary + +- **`npm run build`** is the key command for preparing your React app for production. It bundles and optimizes your app for performance and scalability. +- After building the app, you will have a `build/` folder containing all the optimized assets ready to be deployed. +- Ensure that environment variables are correctly set for production, and test the build locally before deploying it. +- Popular platforms for deploying React apps include Netlify, Vercel, Firebase, and GitHub Pages. + +By following these steps, you’ll ensure your React app is production-ready and performs optimally for end-users. + +--- +# References + +- https://www.geeksforgeeks.org/how-do-you-deploy-a-react-application/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:14:35.000Z","draft":false,"title":"Deploying a React App"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/event-handling-in-react.html b/event-handling-in-react.html new file mode 100644 index 0000000..4ba6f80 --- /dev/null +++ b/event-handling-in-react.html @@ -0,0 +1,148 @@ +Kavindu Udara

    Event Handling in React

    01 December 2024

    React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React's virtual DOM.

    +
    +

    1. Handling Events in React

    +
    Key Points:
    +
      +
    • Event handlers in React are written as camelCase (e.g., onClick, onChange).
      • +
    • Handlers are passed as functions, not strings (e.g., onClick={() => alert('Clicked!')}).
      • +
    +
    Common Event Handlers
    +
      +
    • Click Events: Triggered when an element is clicked.
      • +
    • Input Events: Triggered when input fields change.
      • +
    • Form Events: Triggered during form submission.
      • +
    +
    +

    Handling Click Events

    +
    function ClickHandler() {
+    const handleClick = () => {
+        alert('Button clicked!');
+    };
+
+    return <button onClick={handleClick}>Click Me</button>;
+}
+
    +
    +

    Handling Input Events

    +
    function InputHandler() {
+    const handleChange = (event) => {
+        console.log(event.target.value);
+    };
+
+    return <input type="text" onChange={handleChange} />;
+}
+
    +
    +

    Handling Form Submission

    +
    function FormHandler() {
+    const handleSubmit = (event) => {
+        event.preventDefault(); // Prevents default form submission behavior
+        alert('Form submitted!');
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <button type="submit">Submit</button>
+        </form>
+    );
+}
+
    +
    +

    2. Event Binding and Passing Data with Event Handlers

    +

    Event Binding

    +

    In React, event handlers automatically bind to the component instance, so you usually don't need explicit binding as in class components. However, in class components, you can bind methods in three ways:

    +
      +
    1. +

      Arrow Functions in JSX (recommended):

      +
      <button onClick={() => this.handleClick()}>Click Me</button>
+
      +
      2. +
    2. +

      Bind in the Constructor:

      +
      constructor() {
+    super();
+    this.handleClick = this.handleClick.bind(this);
+}
+
      +
      3. +
    3. +

      Class Properties (ES6):

      +
      handleClick = () => {
+    console.log('Button clicked!');
+};
+
      +
      4. +
    +
    +

    Passing Data with Event Handlers

    +
      +
    1. +

      Using Arrow Functions:

      +
      function Greet({ name }) {
+    const handleClick = () => {
+        alert(`Hello, ${name}!`);
+    };
+
+    return <button onClick={handleClick}>Greet</button>;
+}
+
+function App() {
+    return <Greet name="John" />;
+}
+
      +
      2. +
    2. +

      Passing Arguments:

      +
        +
      • +

        Use an arrow function to pass arguments:

        +
        function Button({ message }) {
+    const handleClick = (msg) => {
+        alert(msg);
+    };
+
+    return <button onClick={() => handleClick(message)}>Click Me</button>;
+}
+
        +
        • +
      +
      3. +
    +
    +

    3. Preventing Default Behavior

    +
      +
    • +

      Use event.preventDefault() to stop default browser actions:

      +
      function LinkHandler() {
+    const handleClick = (event) => {
+        event.preventDefault();
+        alert('Default action prevented!');
+    };
+
+    return <a href="https://example.com" onClick={handleClick}>Click Me</a>;
+}
+
      +
      • +
    +
    +

    4. Accessing Event Data

    +

    React's event handling uses a synthetic event system, which wraps the browser's native event and normalizes cross-browser compatibility.

    +
      +
    • +

      Access event properties like target, type, etc.:

      +
      function InputLogger() {
+    const handleInput = (event) => {
+        console.log(`Input value: ${event.target.value}`);
+    };
+
+    return <input type="text" onChange={handleInput} />;
+}
+
      +
      • +
    +
    +

    Summary

    +
    EventHandlerExample
    ClickonClick<button onClick={handleClick}>Click Me</button>
    Input ChangeonChange<input onChange={handleChange} />
    Form SubmissiononSubmit<form onSubmit={handleSubmit}></form>
    Prevent Defaultevent.preventDefault()<a onClick={handleClick}>Link</a>
    Passing DataArrow functions or bind<button onClick={() => handleClick(arg)}>Click</button>
    +

    By combining event handlers with state or props, React allows for building dynamic and interactive UIs.

    +
    +

    References

    \ No newline at end of file diff --git a/event-handling-in-react.txt b/event-handling-in-react.txt new file mode 100644 index 0000000..f2010a3 --- /dev/null +++ b/event-handling-in-react.txt @@ -0,0 +1,199 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","event-handling-in-react"],"i":false,"f":[[["",{"children":[["slug","event-handling-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","event-handling-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","3yZQOMwUX6YGd5mI5ztUG",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T119b, +React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React's virtual DOM. + +--- + +### 1. Handling Events in React + +##### Key Points: + +- Event handlers in React are written as camelCase (e.g., `onClick`, `onChange`). +- Handlers are passed as functions, not strings (e.g., `onClick={() => alert('Clicked!')}`). + +##### Common Event Handlers + +- **Click Events**: Triggered when an element is clicked. +- **Input Events**: Triggered when input fields change. +- **Form Events**: Triggered during form submission. + +--- + +#### Handling Click Events + +```jsx +function ClickHandler() { + const handleClick = () => { + alert('Button clicked!'); + }; + + return ; +} +``` + +--- + +#### Handling Input Events + +```jsx +function InputHandler() { + const handleChange = (event) => { + console.log(event.target.value); + }; + + return ; +} +``` + +--- + +### Handling Form Submission + +```jsx +function FormHandler() { + const handleSubmit = (event) => { + event.preventDefault(); // Prevents default form submission behavior + alert('Form submitted!'); + }; + + return ( +
    + +
    + ); +} +``` + +--- + +### 2. Event Binding and Passing Data with Event Handlers + +#### Event Binding + +In React, event handlers automatically bind to the component instance, so you usually don't need explicit binding as in class components. However, in class components, you can bind methods in three ways: + +1. **Arrow Functions in JSX** (recommended): + + ```jsx + + ``` + +2. **Bind in the Constructor**: + + ```jsx + constructor() { + super(); + this.handleClick = this.handleClick.bind(this); + } + ``` + +3. **Class Properties (ES6)**: + + ```jsx + handleClick = () => { + console.log('Button clicked!'); + }; + ``` + + +--- + +### Passing Data with Event Handlers + +1. **Using Arrow Functions**: + + ```jsx + function Greet({ name }) { + const handleClick = () => { + alert(`Hello, ${name}!`); + }; + + return ; + } + + function App() { + return ; + } + ``` + +2. **Passing Arguments**: + + - Use an arrow function to pass arguments: + + ```jsx + function Button({ message }) { + const handleClick = (msg) => { + alert(msg); + }; + + return ; + } + ``` + + +--- + +### 3. Preventing Default Behavior + +- Use `event.preventDefault()` to stop default browser actions: + + ```jsx + function LinkHandler() { + const handleClick = (event) => { + event.preventDefault(); + alert('Default action prevented!'); + }; + + return Click Me; + } + ``` + + +--- + +### 4. Accessing Event Data + +React's event handling uses a synthetic event system, which wraps the browser's native event and normalizes cross-browser compatibility. + +- Access event properties like `target`, `type`, etc.: + + ```jsx + function InputLogger() { + const handleInput = (event) => { + console.log(`Input value: ${event.target.value}`); + }; + + return ; + } + ``` + + +--- + +### Summary + +|**Event**|**Handler**|**Example**| +|---|---|---| +|**Click**|`onClick`|``| +|**Input Change**|`onChange`|``| +|**Form Submission**|`onSubmit`|`
    `| +|**Prevent Default**|`event.preventDefault()`|`Link`| +|**Passing Data**|Arrow functions or bind|``| + +By combining event handlers with state or props, React allows for building dynamic and interactive UIs. + +--- +# References +4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:03:30.000Z","draft":false,"title":"Event Handling in React"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/getting-started-guide.html b/getting-started-guide.html index a4ae03c..a170883 100644 --- a/getting-started-guide.html +++ b/getting-started-guide.html @@ -1 +1 @@ -Kavindu Udara

    Getting Started Guide

    12 February 2025

    Content of the guide...

    \ No newline at end of file +Kavindu Udara

    Getting Started Guide

    12 February 2025

    Content of the guide...

    \ No newline at end of file diff --git a/getting-started-guide.txt b/getting-started-guide.txt index 3a75c2c..60c24af 100644 --- a/getting-started-guide.txt +++ b/getting-started-guide.txt @@ -5,9 +5,10 @@ 7:I[6213,[],"MetadataBoundary"] 9:I[6213,[],"ViewportBoundary"] b:I[4835,[],""] -:HL["/me/_next/static/css/7cdffd469baeb000.css","style"] -0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["","getting-started-guide"],"i":false,"f":[[["",{"children":[["slug","getting-started-guide","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","getting-started-guide","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","NYhrlwqkAd4Y__MqjyaPr",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} -4:["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":["$","div",null,{"className":"markdown-container","children":[["$","div",null,{"className":"flex flex-wrap items-center justify-start gap-4 mb-5","children":[["$","button",null,{"className":"p-4 rounded-lg cursor-pointer ","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 448 512","children":["$undefined",[["$","path","0",{"d":"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z","children":[]}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","h1",null,{"className":"text-4xl font-bold ","children":"Getting Started Guide"}]]}],["$","blockquote",null,{"className":"underline font-semibold","children":"12 February 2025"}],["$","hr",null,{}],["$","div",null,{"className":"prose","children":["$","p","p-0",{"children":"Content of the guide..."}]}]]}]}] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","getting-started-guide"],"i":false,"f":[[["",{"children":[["slug","getting-started-guide","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","getting-started-guide","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","hwT6dY7EwIzEYpFGtBnF_",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +4:["$","$Lc",null,{"content":"\r\nContent of the guide...","data":{"date":"2025-02-12T11:12:58+0530","draft":true,"title":"Getting Started Guide"}}] a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] 6:null diff --git a/index.html b/index.html index 6100112..6f049af 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,11 @@ -Kavindu Udara

    Available Blogs

    build and deploy project to github

    12 February 2025

    Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project: ...

    Learn More

    Getting Started Guide

    12 February 2025

    Content of the guide... ...

    Learn More

    My First Blog Post

    12 February 2025

    Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/': ...

    Learn More

    What Is JSX TSX and How It Differs From HTML

    01 December 2024
      +Kavindu Udara

      Available Blogs

      build and deploy project to github

      12 February 2025

      Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project: ...

      Learn More

      Components in React

      01 December 2024

      React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces. ...

      Learn More

      Conditional Rendering in React

      01 December 2024

      Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component. ...

      Learn More

      Deploying a React App

      01 December 2024

      Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the npm run build command, which creates an optimized version of your app for deployment. ...

      Learn More

      Event Handling in React

      01 December 2024

      React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React's virtual DOM. ...

      Learn More

      Getting Started Guide

      12 February 2025

      Content of the guide... ...

      Learn More

      Lists and Keys in React

      01 December 2024

      Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like .map(). Additionally, using keys is important for optimizing rendering and maintaining state in lists. ...

      Learn More

      My First Blog Post

      12 February 2025

      Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/': ...

      Learn More

      Props in React

      01 December 2024

      Props (short for properties) are used to pass data from a parent component to a child component. Props are read-only, meaning they cannot be modified by the child component receiving them. ...

      Learn More

      React Fundamentals

      01 December 2024
        +
      1. Introduction ...
        2. +
      Learn More

      React Lifecycle and Hooks

      01 December 2024

      React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich. ...

      Learn More

      React Reusable Components

      01 December 2024
        +
      • Reusable components are building blocks of a React application designed to be reused in multiple places. ...
        • +
      Learn More

      React Virtual DOM

      01 December 2024
        +
      • The Virtual DOM (VDOM) is a lightweight in-memory representation of the real DOM. ...
        • +
      Learn More

      Real World Examples of Apps Build With React

      01 December 2024

      This is some real world examples that build with react ...

      Learn More

      Setting Up the Development Environment for React With Vite

      01 December 2024

      1. Installing Node.js and npm

      +

      ...

      Learn More

      State in React

      01 December 2024

      State is used to manage data that changes within a component. Unlike props, state is mutable and controlled by the component itself. ...

      Learn More

      Styling in React

      01 December 2024

      In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like Styled Components and utility-first frameworks like Tailwind CSS. This note will explore these approaches and when to use each. ...

      Learn More

      What Is JSX TSX and How It Differs From HTML

      01 December 2024
      • JSX (JavaScript XML): A syntax extension for JavaScript used in React to describe the UI structure. ...
      Learn More

      Whatsapp

      12 February 2025

      Yes, you can integrate WhatsApp into your web application using the WhatsApp Business API. This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started: -...

      Learn More
      \ No newline at end of file +...

    Learn More
    \ No newline at end of file diff --git a/index.txt b/index.txt index 97fa595..3149fe1 100644 --- a/index.txt +++ b/index.txt @@ -1,13 +1,13 @@ 1:"$Sreact.fragment" 2:I[5244,[],""] 3:I[3866,[],""] -4:I[8173,["974","static/chunks/app/page-91639fe7c172535c.js"],""] +4:I[8173,["974","static/chunks/app/page-28d4954a8febb4bc.js"],""] 5:I[6213,[],"OutletBoundary"] 7:I[6213,[],"MetadataBoundary"] 9:I[6213,[],"ViewportBoundary"] b:I[4835,[],""] -:HL["/me/_next/static/css/7cdffd469baeb000.css","style"] -0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":[["$","h1",null,{"className":"text-3xl font-bold mb-8","children":"Available Blogs"}],["$","div",null,{"className":"space-y-4","children":[["$","div","0",{"children":[["$","h2",null,{"children":"build and deploy project to github"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project: ..."}]}],["$","$L4",null,{"href":"/build-and-deploy-project-to-github","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","1",{"children":[["$","h2",null,{"children":"Getting Started Guide"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Content of the guide... ..."}]}],["$","$L4",null,{"href":"/getting-started-guide","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","2",{"children":[["$","h2",null,{"children":"My First Blog Post"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/': ..."}]}],["$","$L4",null,{"href":"/my-first-blog-post","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","3",{"children":[["$","h2",null,{"children":"What Is JSX TSX and How It Differs From HTML"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":"JSX (JavaScript XML)"}],": A syntax extension for JavaScript used in React to describe the UI structure. ..."]}],"\n"]}]}],["$","$L4",null,{"href":"/what-is-jsx-tsx-and-how-it-differs-from-html","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","4",{"children":[["$","h2",null,{"children":"Whatsapp"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["Yes, you can integrate WhatsApp into your web application using the ",["$","strong","strong-0",{"children":"WhatsApp Business API"}],". This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:\n..."]}]}],["$","$L4",null,{"href":"/whatsapp","children":"Learn More"}],["$","hr",null,{}]]}]]}]]}],null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","E2dtHTJ_tOrGuvLu3c5IA",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":[["$","h1",null,{"className":"text-3xl font-bold mb-8","children":"Available Blogs"}],["$","div",null,{"className":"space-y-4","children":[["$","div","0",{"children":[["$","h2",null,{"children":"build and deploy project to github"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project: ..."}]}],["$","$L4",null,{"href":"/build-and-deploy-project-to-github","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","1",{"children":[["$","h2",null,{"children":"Components in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces.\r..."}]}],["$","$L4",null,{"href":"/components-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","2",{"children":[["$","h2",null,{"children":"Conditional Rendering in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component.\r..."}]}],["$","$L4",null,{"href":"/conditional-rendering-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","3",{"children":[["$","h2",null,{"children":"Deploying a React App"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the ",["$","code","code-0",{"children":"npm run build"}]," command, which creates an optimized version of your app for deployment.\r..."]}]}],["$","$L4",null,{"href":"/deploying-a-react-app","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","4",{"children":[["$","h2",null,{"children":"Event Handling in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React's virtual DOM.\r..."}]}],["$","$L4",null,{"href":"/event-handling-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","5",{"children":[["$","h2",null,{"children":"Getting Started Guide"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Content of the guide... ..."}]}],["$","$L4",null,{"href":"/getting-started-guide","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","6",{"children":[["$","h2",null,{"children":"Lists and Keys in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like ",["$","code","code-0",{"children":".map()"}],". Additionally, using ",["$","strong","strong-0",{"children":"keys"}]," is important for optimizing rendering and maintaining state in lists.\r..."]}]}],["$","$L4",null,{"href":"/lists-and-keys-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","7",{"children":[["$","h2",null,{"children":"My First Blog Post"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/': ..."}]}],["$","$L4",null,{"href":"/my-first-blog-post","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","8",{"children":[["$","h2",null,{"children":"Props in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Props"}]," (short for properties) are used to pass data from a parent component to a child component. Props are ",["$","strong","strong-1",{"children":"read-only"}],", meaning they cannot be modified by the child component receiving them.\r..."]}]}],["$","$L4",null,{"href":"/props-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","9",{"children":[["$","h2",null,{"children":"React Fundamentals"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ol","ol-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":"Introduction"}],"\r..."]}],"\n"]}]}],["$","$L4",null,{"href":"/react-fundamentals","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","10",{"children":[["$","h2",null,{"children":"React Lifecycle and Hooks"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich.\r..."}]}],["$","$L4",null,{"href":"/react-lifecycle-and-hooks","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","11",{"children":[["$","h2",null,{"children":"React Reusable Components"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Reusable components are building blocks of a React application designed to be reused in multiple places.\r..."}],"\n"]}]}],["$","$L4",null,{"href":"/react-reusable-components","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","12",{"children":[["$","h2",null,{"children":"React Virtual DOM"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":["The ",["$","strong","strong-0",{"children":"Virtual DOM (VDOM)"}]," is a lightweight in-memory representation of the real DOM.\r..."]}],"\n"]}]}],["$","$L4",null,{"href":"/react-virtual-dom","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","13",{"children":[["$","h2",null,{"children":"Real World Examples of Apps Build With React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"This is some real world examples that build with react\r..."}]}],["$","$L4",null,{"href":"/real-world-examples-of-apps-build-with-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","14",{"children":[["$","h2",null,{"children":"Setting Up the Development Environment for React With Vite"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":[["$","h3","h3-0",{"children":"1. Installing Node.js and npm"}],"\n",["$","p","p-0",{"children":"..."}]]}],["$","$L4",null,{"href":"/setting-up-the-development-environment-for-react-with-vite","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","15",{"children":[["$","h2",null,{"children":"State in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"State"}]," is used to manage data that changes within a component. Unlike props, state is ",["$","strong","strong-1",{"children":"mutable"}]," and controlled by the component itself.\r..."]}]}],["$","$L4",null,{"href":"/state-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","16",{"children":[["$","h2",null,{"children":"Styling in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like ",["$","strong","strong-0",{"children":"Styled Components"}]," and utility-first frameworks like ",["$","strong","strong-1",{"children":"Tailwind CSS"}],". This note will explore these approaches and when to use each.\r..."]}]}],["$","$L4",null,{"href":"/styling-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","17",{"children":[["$","h2",null,{"children":"What Is JSX TSX and How It Differs From HTML"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":"JSX (JavaScript XML)"}],": A syntax extension for JavaScript used in React to describe the UI structure. ..."]}],"\n"]}]}],["$","$L4",null,{"href":"/what-is-jsx-tsx-and-how-it-differs-from-html","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","18",{"children":[["$","h2",null,{"children":"Whatsapp"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["Yes, you can integrate WhatsApp into your web application using the ",["$","strong","strong-0",{"children":"WhatsApp Business API"}],". This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:\n..."]}]}],["$","$L4",null,{"href":"/whatsapp","children":"Learn More"}],["$","hr",null,{}]]}]]}]]}],null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","sYEptTizoutWnPW8h8jyL",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] 6:null diff --git a/lists-and-keys-in-react.html b/lists-and-keys-in-react.html new file mode 100644 index 0000000..8833556 --- /dev/null +++ b/lists-and-keys-in-react.html @@ -0,0 +1,104 @@ +Kavindu Udara

    Lists and Keys in React

    01 December 2024

    Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like .map(). Additionally, using keys is important for optimizing rendering and maintaining state in lists.

    +
    +

    1. Rendering Lists with .map()

    +

    In React, the .map() function is commonly used to iterate over an array of data and return an array of elements that can be rendered. This is especially useful for rendering dynamic data like lists of items.

    +
    Example: Rendering a List of Items
    +
    function ItemList() {
+    const items = ['Apple', 'Banana', 'Cherry'];
+
+    return (
+        <ul>
+            {items.map((item, index) => (
+                <li key={index}>{item}</li>
+            ))}
+        </ul>
+    );
+}
+
    +

    In this example:

    +
      +
    • We use the .map() method to iterate over the items array.
      • +
    • For each item, we return a list item (<li>) containing the item text.
      • +
    +
    +

    2. Importance of Keys in List Rendering

    +

    Keys help React identify which items have changed, been added, or removed, allowing for efficient updates to the virtual DOM and the UI. When rendering lists, React needs a unique identifier for each element to keep track of their position and improve performance.

    +
    Why are Keys Important?
    +
      +
    • Efficient Updates: Without keys, React would have to re-render all list items when one item changes. With keys, React only re-renders the changed items.
      • +
    • Unique Identification: Keys ensure that React can distinguish between individual elements in a list.
      • +
    +
    Best Practices for Keys:
    +
      +
    • Keys must be unique among siblings (elements at the same level in the list).
      • +
    • Avoid using array indices as keys when the list can change dynamically (e.g., items can be added or removed).
      • +
    +
    Example: Using Unique Keys
    +
    function ItemList() {
+    const items = [
+        { id: 1, name: 'Apple' },
+        { id: 2, name: 'Banana' },
+        { id: 3, name: 'Cherry' }
+    ];
+
+    return (
+        <ul>
+            {items.map((item) => (
+                <li key={item.id}>{item.name}</li>
+            ))}
+        </ul>
+    );
+}
+
    +

    In this example:

    +
      +
    • Each list item has a unique id which is used as the key.
      • +
    • This ensures that React can efficiently track changes to the list.
      • +
    +
    +

    3. Handling Dynamic List Changes

    +

    When the list data changes (e.g., items are added, removed, or reordered), keys help React know how to efficiently update the UI. Without keys or with incorrect keys, React may not be able to identify which items are changing and might re-render the entire list unnecessarily.

    +
    Example: Reordering List Items
    +
    function ItemList() {
+    const [items, setItems] = useState([
+        { id: 1, name: 'Apple' },
+        { id: 2, name: 'Banana' },
+        { id: 3, name: 'Cherry' }
+    ]);
+
+    const reorderItems = () => {
+        setItems([items[2], items[1], items[0]]);
+    };
+
+    return (
+        <div>
+            <button onClick={reorderItems}>Reorder Items</button>
+            <ul>
+                {items.map((item) => (
+                    <li key={item.id}>{item.name}</li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
    +

    In this example:

    +
      +
    • If the key were not unique, React might not correctly update the UI after the items are reordered.
      • +
    • With the unique id as the key, React efficiently reorders the items in the list without unnecessary re-renders.
      • +
    +
    +

    Summary of Lists and Keys

    +
    MethodDescriptionExample
    Rendering Lists with .map()Iterates over an array to create an array of elements.{items.map(item => <li key={item.id}>{item.name}</li>)}
    Importance of KeysKeys help React identify items and optimize re-renders.key={item.id} ensures React optimally updates lists.
    Best Practices for KeysUse unique identifiers (not array indices) as keys.Prefer key={item.id} over key={index}.
    +
    +

    Conclusion

    +
      +
    • Use .map() to render lists dynamically in React.
      • +
    • Always provide a unique key for each item in the list to improve performance and ensure accurate updates during re-renders.
      • +
    • Avoid using array indices as keys, especially when the list can be modified, as it may lead to issues with the state and rendering.
      • +
    +
    +

    References

    +
    \ No newline at end of file diff --git a/lists-and-keys-in-react.txt b/lists-and-keys-in-react.txt new file mode 100644 index 0000000..57c44fd --- /dev/null +++ b/lists-and-keys-in-react.txt @@ -0,0 +1,144 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","lists-and-keys-in-react"],"i":false,"f":[[["",{"children":[["slug","lists-and-keys-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","lists-and-keys-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","Oi6KK3K3jtPKQEpe9FHOL",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T11a2, +Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like `.map()`. Additionally, using **keys** is important for optimizing rendering and maintaining state in lists. + +--- + +#### 1. Rendering Lists with `.map()` + +In React, the `.map()` function is commonly used to iterate over an array of data and return an array of elements that can be rendered. This is especially useful for rendering dynamic data like lists of items. + +##### Example: Rendering a List of Items + +```jsx +function ItemList() { + const items = ['Apple', 'Banana', 'Cherry']; + + return ( +
      + {items.map((item, index) => ( +
    • {item}
      • + ))} +
    + ); +} +``` + +In this example: + +- We use the `.map()` method to iterate over the `items` array. +- For each item, we return a list item (`
  • `) containing the `item` text. + +--- + +#### 2. Importance of Keys in List Rendering + +**Keys** help React identify which items have changed, been added, or removed, allowing for efficient updates to the virtual DOM and the UI. When rendering lists, React needs a unique identifier for each element to keep track of their position and improve performance. + +##### Why are Keys Important? + +- **Efficient Updates**: Without keys, React would have to re-render all list items when one item changes. With keys, React only re-renders the changed items. +- **Unique Identification**: Keys ensure that React can distinguish between individual elements in a list. + +##### Best Practices for Keys: + +- Keys must be **unique** among siblings (elements at the same level in the list). +- Avoid using **array indices** as keys when the list can change dynamically (e.g., items can be added or removed). + +##### Example: Using Unique Keys + +```jsx +function ItemList() { + const items = [ + { id: 1, name: 'Apple' }, + { id: 2, name: 'Banana' }, + { id: 3, name: 'Cherry' } + ]; + + return ( +
      + {items.map((item) => ( +
    • {item.name}
      • + ))} +
    + ); +} +``` + +In this example: + +- Each list item has a unique `id` which is used as the key. +- This ensures that React can efficiently track changes to the list. + +--- + +#### 3. Handling Dynamic List Changes + +When the list data changes (e.g., items are added, removed, or reordered), keys help React know how to efficiently update the UI. Without keys or with incorrect keys, React may not be able to identify which items are changing and might re-render the entire list unnecessarily. + +##### Example: Reordering List Items + +```jsx +function ItemList() { + const [items, setItems] = useState([ + { id: 1, name: 'Apple' }, + { id: 2, name: 'Banana' }, + { id: 3, name: 'Cherry' } + ]); + + const reorderItems = () => { + setItems([items[2], items[1], items[0]]); + }; + + return ( +
    + +
      + {items.map((item) => ( +
    • {item.name}
      • + ))} +
    +
    + ); +} +``` + +In this example: + +- If the `key` were not unique, React might not correctly update the UI after the items are reordered. +- With the unique `id` as the key, React efficiently reorders the items in the list without unnecessary re-renders. + +--- + +### Summary of Lists and Keys + +|**Method**|**Description**|**Example**| +|---|---|---| +|**Rendering Lists with `.map()`**|Iterates over an array to create an array of elements.|`{items.map(item =>
  • {item.name}
    • )}`| +|**Importance of Keys**|Keys help React identify items and optimize re-renders.|`key={item.id}` ensures React optimally updates lists.| +|**Best Practices for Keys**|Use unique identifiers (not array indices) as keys.|Prefer `key={item.id}` over `key={index}`.| + +--- + +### Conclusion + +- Use **`.map()`** to render lists dynamically in React. +- Always provide a **unique `key`** for each item in the list to improve performance and ensure accurate updates during re-renders. +- Avoid using array indices as keys, especially when the list can be modified, as it may lead to issues with the state and rendering. + +--- +# References + +- https://legacy.reactjs.org/docs/lists-and-keys.html4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:07:30.000Z","draft":false,"title":"Lists and Keys in React"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/my-first-blog-post.html b/my-first-blog-post.html index 757c6a9..d257e6e 100644 --- a/my-first-blog-post.html +++ b/my-first-blog-post.html @@ -1,4 +1,4 @@ -Kavindu Udara

    My First Blog Post

    12 February 2025

    Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/':

    +Kavindu Udara

    My First Blog Post

    12 February 2025

    Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/':

    This is a blog quote text.

    @@ -40,4 +40,4 @@ # Call the function create_markdown_file -

    This script will prompt the user for the title of the markdown file and then create the file with the current date and time, draft set to true, and the provided title. The file will be saved in the directory 'public/assets/readmes/'.

    \ No newline at end of file +

    This script will prompt the user for the title of the markdown file and then create the file with the current date and time, draft set to true, and the provided title. The file will be saved in the directory 'public/assets/readmes/'.

    \ No newline at end of file diff --git a/my-first-blog-post.txt b/my-first-blog-post.txt index 2726b99..7cbd778 100644 --- a/my-first-blog-post.txt +++ b/my-first-blog-post.txt @@ -5,9 +5,56 @@ 7:I[6213,[],"MetadataBoundary"] 9:I[6213,[],"ViewportBoundary"] b:I[4835,[],""] -:HL["/me/_next/static/css/7cdffd469baeb000.css","style"] -0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["","my-first-blog-post"],"i":false,"f":[[["",{"children":[["slug","my-first-blog-post","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","my-first-blog-post","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","KRVCJhyIKorYL7fxroazL",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} -4:["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":["$","div",null,{"className":"markdown-container","children":[["$","div",null,{"className":"flex flex-wrap items-center justify-start gap-4 mb-5","children":[["$","button",null,{"className":"p-4 rounded-lg cursor-pointer ","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 448 512","children":["$undefined",[["$","path","0",{"d":"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z","children":[]}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","h1",null,{"className":"text-4xl font-bold ","children":"My First Blog Post"}]]}],["$","blockquote",null,{"className":"underline font-semibold","children":"12 February 2025"}],["$","hr",null,{}],["$","div",null,{"className":"prose","children":[["$","p","p-0",{"children":"Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/':"}],"\n",["$","blockquote","blockquote-0",{"children":["\n",["$","p","p-0",{"children":"This is a blog quote text."}],"\n"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-bash","children":"#!/bin/bash\n\n# Function to create a new markdown file\ncreate_markdown_file() {\n # Get the current date and time in the required format\n current_date=$(date +\"%Y-%m-%dT%H:%M:%S%z\")\n\n # Get the title from the user\n read -p \"Enter the title of the markdown file: \" title read -p \"Enter the title of the markdown file: \" title read -p \"Enter the title of the markdown file: \" title read -p \"Enter the title of the markdown file: \" title\n\n # Replace spaces with underscores for the filename\n filename=\"${title// /_}.md\"\n \n # Define the directory\n dir=\"public/assets/readmes/\"\n \n # Create the directory if it doesn't exist\n mkdir -p $dir\n \n # Define the file path\n filepath=\"${dir}${filename}\"\n\n # Create the markdown file with the template\n cat < $filepath\n---\ndate: ${current_date}\ndraft: true\ntitle: ${title}\n---\n\nEOF\n\n echo \"Markdown file created at ${filepath}\"\n}\n\n# Call the function\ncreate_markdown_file\n"}]}],"\n",["$","p","p-1",{"children":["This script will prompt the user for the title of the markdown file and then create the file with the current date and time, ",["$","code","code-0",{"children":"draft"}]," set to ",["$","code","code-1",{"children":"true"}],", and the provided title. The file will be saved in the directory 'public/assets/readmes/'."]}]]}]]}]}] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","my-first-blog-post"],"i":false,"f":[[["",{"children":[["slug","my-first-blog-post","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","my-first-blog-post","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","aZBquZ6AEeTNvXx8tgnqy",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T55a, +Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/': + +> This is a blog quote text. + +```bash +#!/bin/bash + +# Function to create a new markdown file +create_markdown_file() { + # Get the current date and time in the required format + current_date=$(date +"%Y-%m-%dT%H:%M:%S%z") + + # Get the title from the user + read -p "Enter the title of the markdown file: " title read -p "Enter the title of the markdown file: " title read -p "Enter the title of the markdown file: " title read -p "Enter the title of the markdown file: " title + + # Replace spaces with underscores for the filename + filename="${title// /_}.md" + + # Define the directory + dir="public/assets/readmes/" + + # Create the directory if it doesn't exist + mkdir -p $dir + + # Define the file path + filepath="${dir}${filename}" + + # Create the markdown file with the template + cat < $filepath +--- +date: ${current_date} +draft: true +title: ${title} +--- + +EOF + + echo "Markdown file created at ${filepath}" +} + +# Call the function +create_markdown_file +``` + +This script will prompt the user for the title of the markdown file and then create the file with the current date and time, `draft` set to `true`, and the provided title. The file will be saved in the directory 'public/assets/readmes/'. +4:["$","$Lc",null,{"content":"$d","data":{"date":"2025-02-12T11:12:58+0530","draft":true,"title":"My First Blog Post"}}] a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] 6:null diff --git a/props-in-react.html b/props-in-react.html new file mode 100644 index 0000000..7cbdae0 --- /dev/null +++ b/props-in-react.html @@ -0,0 +1,51 @@ +Kavindu Udara

    Props in React

    01 December 2024

    Props (short for properties) are used to pass data from a parent component to a child component. Props are read-only, meaning they cannot be modified by the child component receiving them.

    +
    +

    Key Features of Props

    +
      +
    • Passed as an object to the component.
      • +
    • Immutable (cannot be changed by the component receiving them).
      • +
    • Used for dynamic data and reusability.
      • +
    +
    +

    How to Pass Props Between Components

    +
      +
    1. +

      Define props in the parent component

      +
      function Parent() {
+const name = "John";
+return <Child name={name} />;
+}
+
      +
      2. +
    2. +

      Access props in the child component

      +
      function Child(props) {
+return <h1>Hello, {props.name}!</h1>;
+}
+
      +
      3. +
    3. +

      Destructure props for cleaner syntax

      +
      function Child({ name }) {
+return <h1>Hello, {name}!</h1>;
+}
+
      +
      4. +
    +
    +

    Example of Props

    +
    function Button({ label, onClick }) {
+    return <button onClick={onClick}>{label}</button>;
+}
+
+function App() {
+    const handleClick = () => alert("Button clicked!");
+    return <Button label="Click Me" onClick={handleClick} />;
+}
+
    +
    +

    References

    +
    \ No newline at end of file diff --git a/props-in-react.txt b/props-in-react.txt new file mode 100644 index 0000000..94d81b9 --- /dev/null +++ b/props-in-react.txt @@ -0,0 +1,67 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","props-in-react"],"i":false,"f":[[["",{"children":[["slug","props-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","props-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","QnFDwcdPBmNnomy6QyrZn",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T4f6, +**Props** (short for properties) are used to pass data from a parent component to a child component. Props are **read-only**, meaning they cannot be modified by the child component receiving them. + +--- +### Key Features of Props + +- Passed as an object to the component. +- Immutable (cannot be changed by the component receiving them). +- Used for dynamic data and reusability. + +--- +### How to Pass Props Between Components + +1. Define props in the parent component + ```jsx + function Parent() { + const name = "John"; + return ; + } + ``` + +2. Access props in the child component + ```jsx + function Child(props) { + return

    Hello, {props.name}!

    ; + } + ``` + +3. Destructure props for cleaner syntax + ```jsx + function Child({ name }) { + return

    Hello, {name}!

    ; + } + ``` + +___ +### Example of Props + +```jsx +function Button({ label, onClick }) { + return ; +} + +function App() { + const handleClick = () => alert("Button clicked!"); + return

    React Fundamentals

    01 December 2024
      +
    1. +

      Introduction

      + +
      2. +
    2. +

      Setting Up the Development Environment for React with Vite

      +
        +
      • Installing Node.js and npm.
        • +
      • Setting up a React Project.
        • +
      • Overview of the project folder structure.
        • +
      +
      3. +
    3. +

      Understanding JSX / TSX

      + +
      4. +
    4. +

      Components in React

      +
        +
      • Functional Components vs Class Components.
        • +
      • How to create and export components.
        • +
      • Importing components and using them inside other components.
        • +
      +
      5. +
    5. +

      Props and State Props in React, State in React

      +
        +
      • Introduction to props and how to pass data between components.
        • +
      • Introduction to state and useState hook.
        • +
      • Updating and managing state.
        • +
      +
      6. +
    6. +

      Event Handling in React

      +
        +
      • How to handle events like clicks, inputs, and form submissions.
        • +
      • Event binding and passing data with event handlers.
        • +
      +
      7. +
    7. +

      Conditional Rendering in React

      +
        +
      • How to conditionally render components using if-else, ternary operators, and && logic.
        • +
      +
      8. +
    8. +

      Lists and Keys in React

      +
        +
      • How to render lists in React using .map().
        • +
      • Importance of keys in list rendering.
        • +
      +
      9. +
    9. +

      React Lifecycle and Hooks

      +
        +
      • Introduction to React hooks: useEffect for handling side effects.
        • +
      +
      10. +
    10. +

      Styling in React

      +
        +
      • Inline styles vs External CSS vs CSS Modules.
        • +
      • Introduction to styling libraries like Styled Components or Tailwind CSS.
        • +
      +
      11. +
    11. +

      Deploying a React App

      +
        +
      • Preparing the app for production using npm run build.
        • +
      +
      12. +
    \ No newline at end of file diff --git a/react-fundamentals.txt b/react-fundamentals.txt new file mode 100644 index 0000000..f41d7b0 --- /dev/null +++ b/react-fundamentals.txt @@ -0,0 +1,60 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","react-fundamentals"],"i":false,"f":[[["",{"children":[["slug","react-fundamentals","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","react-fundamentals","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","ztkE4ofuAH1TIgAYezwJU",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T85a, +1. **Introduction** + - What is React and Why use React ? + - [React Reusable Components](../react-reusable-components) + - [React Virtual DOM](../react-virtual-dom) + - Large Community Support + - [Real-world Examples of apps build with React](../real-world-examples-of-apps-build-with-react) + +2. [**Setting Up the Development Environment for React with Vite**](../setting-up-the-development-environment-for-react-with-vite) + - Installing Node.js and npm. + - Setting up a React Project. + - Overview of the project folder structure. + +3. **Understanding JSX / TSX** + - [What is JSX, TSX and How It Differs from HTML](../what-is-jsx-tsx-and-how-ut-differs-from-html) + - JSX/TSX attributes and how to use them. + +4. [**Components in React**](../components-in-react) + - Functional Components vs Class Components. + - How to create and export components. + - Importing components and using them inside other components. + +5. **Props and State** [Props in React](../props-in-react), [State in React](../state-in-react) + - Introduction to props and how to pass data between components. + - Introduction to state and `useState` hook. + - Updating and managing state. + +6. [**Event Handling in React** ](../event-handling-in-react) + - How to handle events like clicks, inputs, and form submissions. + - Event binding and passing data with event handlers. + +7. [**Conditional Rendering in React**](../conditional-rendering-in-react) + - How to conditionally render components using `if-else`, `ternary operators`, and `&&` logic. + +8. [**Lists and Keys in React**](../lists-and-keys-in-react) + - How to render lists in React using `.map()`. + - Importance of keys in list rendering. + +9. [**React Lifecycle and Hooks**](../react-lifecycle-and-hooks) + - Introduction to React hooks: `useEffect` for handling side effects. + +10. [**Styling in React**](../styling-in-react) + - Inline styles vs External CSS vs CSS Modules. + - Introduction to styling libraries like Styled Components or Tailwind CSS. + +11. [**Deploying a React App**](../deploying-a-react-app) + - Preparing the app for production using `npm run build`.4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:06:06.000Z","draft":false,"title":"React Fundamentals"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/react-lifecycle-and-hooks.html b/react-lifecycle-and-hooks.html new file mode 100644 index 0000000..324c848 --- /dev/null +++ b/react-lifecycle-and-hooks.html @@ -0,0 +1,173 @@ +Kavindu Udara

    React Lifecycle and Hooks

    01 December 2024

    React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich.

    +
    +

    1. Introduction to React Hooks

    +

    React hooks are functions that allow you to "hook into" React features from functional components. They provide a more declarative approach to handling component logic compared to class components. The most commonly used hooks are:

    +
      +
    • useState: To manage state in functional components.
      • +
    • useEffect: For handling side effects, such as fetching data or subscribing to external services.
      • +
    • useContext: For accessing context data.
      • +
    +

    The useEffect hook, in particular, is essential for dealing with side effects in React.

    +
    +

    2. The useEffect Hook

    +

    The useEffect hook allows you to perform side effects in functional components. Side effects refer to operations that affect something outside the component, such as:

    +
      +
    • Fetching data from an API.
      • +
    • Subscribing to a service or event.
      • +
    • Manipulating the DOM.
      • +
    • Setting up timers.
      • +
    +

    The useEffect hook replaces the lifecycle methods found in class components (componentDidMount, componentDidUpdate, and componentWillUnmount).

    +

    Basic Syntax of useEffect

    +
    useEffect(() => {
+    // Code to run on component mount or state change
+}, [dependencies]);
+
    +
      +
    • The first argument is a function containing the side-effect logic.
      • +
    • The second argument is an array of dependencies. If any of the dependencies change, the effect will run again.
      • +
    +

    Example: Basic useEffect Usage

    +
    import React, { useState, useEffect } from 'react';
+
+function DataFetchingComponent() {
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetch('https://api.example.com/data')
+            .then(response => response.json())
+            .then(data => {
+                setData(data);
+                setLoading(false);
+            });
+    }, []); // Empty dependency array ensures effect runs only once (componentDidMount)
+
+    if (loading) return <p>Loading...</p>;
+
+    return (
+        <div>
+            <h1>Data</h1>
+            <ul>
+                {data.map(item => (
+                    <li key={item.id}>{item.name}</li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
    +

    In this example:

    +
      +
    • useEffect fetches data from an API when the component mounts (similar to componentDidMount in class components).
      • +
    • The empty dependency array [] means the effect runs only once after the initial render.
      • +
    +
    +

    3. Cleanup with useEffect

    +

    Sometimes, you need to clean up after an effect, such as clearing timers or unsubscribing from an event. You can return a cleanup function from useEffect.

    +

    Example: Cleanup in useEffect

    +
    import React, { useEffect, useState } from 'react';
+
+function Timer() {
+    const [seconds, setSeconds] = useState(0);
+
+    useEffect(() => {
+        const timerId = setInterval(() => {
+            setSeconds(prev => prev + 1);
+        }, 1000);
+
+        // Cleanup function to clear the interval
+        return () => {
+            clearInterval(timerId);
+        };
+    }, []); // Runs once, equivalent to componentDidMount
+
+    return <h1>Seconds: {seconds}</h1>;
+}
+
    +

    In this example:

    +
      +
    • A timer is set using setInterval in the useEffect hook.
      • +
    • The cleanup function returned from useEffect clears the interval when the component is unmounted or before the effect is re-run.
      • +
    +
    +

    4. Conditional Execution of useEffect

    +

    By specifying dependencies, you can control when the useEffect hook runs:

    +
      +
    • If the dependency array is empty [], the effect runs only once when the component mounts.
      • +
    • If the array contains values (e.g., [prop, state]), the effect runs when any of those values change.
      • +
    +

    Example: Conditional useEffect

    +
    import React, { useState, useEffect } from 'react';
+
+function Counter() {
+    const [count, setCount] = useState(0);
+
+    useEffect(() => {
+        document.title = `You clicked ${count} times`;
+    }, [count]); // Runs whenever count changes
+
+    return (
+        <div>
+            <p>You clicked {count} times</p>
+            <button onClick={() => setCount(count + 1)}>Click me</button>
+        </div>
+    );
+}
+
    +

    In this example:

    +
      +
    • The effect runs only when the count state changes, and it updates the document title with the current count.
      • +
    +
    +

    5. Use Case Examples of useEffect

    +
      +
    • +

      Fetching data on mount:

      +
      useEffect(() => {
+  fetchData();
+}, []);  // Runs once after component mount
+
      +
      • +
    • +

      Subscribing to an event:

      +
      useEffect(() => {
+  const handleResize = () => {
+    console.log('Window resized');
+  };
+  window.addEventListener('resize', handleResize);
+
+  // Cleanup on component unmount
+  return () => {
+    window.removeEventListener('resize', handleResize);
+  };
+}, []); // Runs once
+
      +
      • +
    • +

      Setting up a timer:

      +
      useEffect(() => {
+  const timer = setInterval(() => {
+    console.log('Timer ticked');
+  }, 1000);
+
+  return () => clearInterval(timer);  // Cleanup on unmount
+}, []);
+
      +
      • +
    +
    +

    Summary of useEffect

    +
    FeatureDescriptionExample
    Basic usageHandles side effects like fetching data, setting up timers, etc.useEffect(() => { fetchData(); }, []);
    DependenciesArray of values that the effect depends on.useEffect(() => { console.log(count); }, [count]);
    Cleanup functionCleans up after effects (e.g., clearing timers).return () => { clearInterval(timer); }
    Conditional executionControl when the effect runs by setting dependencies.useEffect(() => { console.log('Mounted!'); }, []);
    +
    +

    Conclusion

    +
      +
    • useEffect is a powerful hook for managing side effects in functional components.
      • +
    • It allows you to fetch data, subscribe to events, and handle cleanups in a declarative way.
      • +
    • By using the dependency array, you can control when the effect should run, making it highly flexible and efficient.
      • +
    +
    +

    References

    +
    \ No newline at end of file diff --git a/react-lifecycle-and-hooks.txt b/react-lifecycle-and-hooks.txt new file mode 100644 index 0000000..45b9629 --- /dev/null +++ b/react-lifecycle-and-hooks.txt @@ -0,0 +1,222 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","react-lifecycle-and-hooks"],"i":false,"f":[[["",{"children":[["slug","react-lifecycle-and-hooks","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","react-lifecycle-and-hooks","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","rgPJnG_e5td0OhUICwOHz",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T19af, +React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich. + +--- + +### 1. Introduction to React Hooks + +React hooks are functions that allow you to "hook into" React features from functional components. They provide a more declarative approach to handling component logic compared to class components. The most commonly used hooks are: + +- `useState`: To manage state in functional components. +- `useEffect`: For handling side effects, such as fetching data or subscribing to external services. +- `useContext`: For accessing context data. + +The `useEffect` hook, in particular, is essential for dealing with side effects in React. + +--- + +### 2. The `useEffect` Hook + +The `useEffect` hook allows you to perform **side effects** in functional components. Side effects refer to operations that affect something outside the component, such as: + +- Fetching data from an API. +- Subscribing to a service or event. +- Manipulating the DOM. +- Setting up timers. + +The `useEffect` hook replaces the lifecycle methods found in class components (`componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`). + +#### Basic Syntax of `useEffect` + +```jsx +useEffect(() => { + // Code to run on component mount or state change +}, [dependencies]); +``` + +- The first argument is a **function** containing the side-effect logic. +- The second argument is an **array of dependencies**. If any of the dependencies change, the effect will run again. + +#### Example: Basic `useEffect` Usage + +```jsx +import React, { useState, useEffect } from 'react'; + +function DataFetchingComponent() { + const [data, setData] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + fetch('https://api.example.com/data') + .then(response => response.json()) + .then(data => { + setData(data); + setLoading(false); + }); + }, []); // Empty dependency array ensures effect runs only once (componentDidMount) + + if (loading) return

    Loading...

    ; + + return ( +
    +

    Data

    +
      + {data.map(item => ( +
    • {item.name}
      • + ))} +
    +
    + ); +} +``` + +In this example: + +- **`useEffect`** fetches data from an API when the component mounts (similar to `componentDidMount` in class components). +- The empty dependency array `[]` means the effect runs only once after the initial render. + +--- + +### 3. Cleanup with `useEffect` + +Sometimes, you need to clean up after an effect, such as clearing timers or unsubscribing from an event. You can return a **cleanup function** from `useEffect`. + +#### Example: Cleanup in `useEffect` + +```jsx +import React, { useEffect, useState } from 'react'; + +function Timer() { + const [seconds, setSeconds] = useState(0); + + useEffect(() => { + const timerId = setInterval(() => { + setSeconds(prev => prev + 1); + }, 1000); + + // Cleanup function to clear the interval + return () => { + clearInterval(timerId); + }; + }, []); // Runs once, equivalent to componentDidMount + + return

    Seconds: {seconds}

    ; +} +``` + +In this example: + +- A timer is set using `setInterval` in the `useEffect` hook. +- The **cleanup function** returned from `useEffect` clears the interval when the component is unmounted or before the effect is re-run. + +--- + +### 4. Conditional Execution of `useEffect` + +By specifying **dependencies**, you can control when the `useEffect` hook runs: + +- If the dependency array is empty `[]`, the effect runs only once when the component mounts. +- If the array contains values (e.g., `[prop, state]`), the effect runs when any of those values change. + +#### Example: Conditional `useEffect` + +```jsx +import React, { useState, useEffect } from 'react'; + +function Counter() { + const [count, setCount] = useState(0); + + useEffect(() => { + document.title = `You clicked ${count} times`; + }, [count]); // Runs whenever count changes + + return ( +
    +

    You clicked {count} times

    + +
    + ); +} +``` + +In this example: + +- The effect runs only when the `count` state changes, and it updates the document title with the current count. + +--- + +### 5. Use Case Examples of `useEffect` + +- **Fetching data on mount:** + + ```jsx + useEffect(() => { + fetchData(); + }, []); // Runs once after component mount + ``` + +- **Subscribing to an event:** + + ```jsx + useEffect(() => { + const handleResize = () => { + console.log('Window resized'); + }; + window.addEventListener('resize', handleResize); + + // Cleanup on component unmount + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); // Runs once + ``` + +- **Setting up a timer:** + + ```jsx + useEffect(() => { + const timer = setInterval(() => { + console.log('Timer ticked'); + }, 1000); + + return () => clearInterval(timer); // Cleanup on unmount + }, []); + ``` + + +--- + +### Summary of `useEffect` + +|**Feature**|**Description**|**Example**| +|---|---|---| +|**Basic usage**|Handles side effects like fetching data, setting up timers, etc.|`useEffect(() => { fetchData(); }, []);`| +|**Dependencies**|Array of values that the effect depends on.|`useEffect(() => { console.log(count); }, [count]);`| +|**Cleanup function**|Cleans up after effects (e.g., clearing timers).|`return () => { clearInterval(timer); }`| +|**Conditional execution**|Control when the effect runs by setting dependencies.|`useEffect(() => { console.log('Mounted!'); }, []);`| + +--- + +### Conclusion + +- **`useEffect`** is a powerful hook for managing side effects in functional components. +- It allows you to **fetch data**, **subscribe to events**, and handle **cleanups** in a declarative way. +- By using the dependency array, you can control when the effect should run, making it highly flexible and efficient. + +--- +# References + +- https://www.freecodecamp.org/news/react-lifecycle-methods-and-hooks-for-beginners/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:10:04.000Z","draft":false,"title":"React Lifecycle and Hooks"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/react-reusable-components.html b/react-reusable-components.html new file mode 100644 index 0000000..6c6d26b --- /dev/null +++ b/react-reusable-components.html @@ -0,0 +1,75 @@ +Kavindu Udara

    React Reusable Components

    01 December 2024
      +
    • Reusable components are building blocks of a React application designed to be reused in multiple places.
      • +
    • They promote modularity, maintainability, and efficiency.
      • +
    +
    +

    Key Benefits

    +
      +
    • Code Reusability: Write once, use multiple times.
      • +
    • Consistency: Maintain consistent design and behavior across the app.
      • +
    • Ease of Maintenance: Updates to a component reflect across all its instances.
      • +
    • Efficiency: Reduces the need for duplicate code.
      • +
    +
    +

    Best Practices for Creating Reusable Components

    +
      +
    • Single Responsibility Principle: Each component should have one clear purpose.
      • +
    • Props: Use props to make components configurable and dynamic.
      • +
    • Composition Over Inheritance: Combine smaller components to build larger ones.
      • +
    • Avoid Hardcoding: Parameterize data through props instead of hardcoding values.
      • +
    • Styling Flexibility: Use CSS modules, styled-components, or className props for flexible styling.
      • +
    • Granularity: Balance between too granular (many small components) and too monolithic (large components).
      • +
    +
    +

    Examples of Reusable Components

    +
      +
    1. Button
      2. +
    +
    const Button = ({ onClick, children, style }) => (
+    <button onClick={onClick} style={style}>
+        {children}
+    </button>
+);
+
    +
      +
    1. Input Field
      2. +
    +
    const Input = ({ type, value, onChange, placeholder }) => (
+    <input
+        type={type}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+    />
+);
+
+
    +
      +
    1. Card
      2. +
    +
    const Card = ({ children, style }) => (
+    <div style={{ ...defaultStyle, ...style }}>
+        {children}
+    </div>
+);
+
+const defaultStyle = {
+    border: "1px solid #ccc",
+    padding: "10px",
+    borderRadius: "5px",
+};
+
+
    +
    +

    Tips

    +
      +
    • Test Components: Ensure each component works in isolation.
      • +
    • Prop Validation: Use PropTypes or TypeScript for better validation and type safety.
      • +
    • Document Components: Add comments or maintain documentation to explain usage.
      • +
    +
    +

    References

    +
    \ No newline at end of file diff --git a/react-reusable-components.txt b/react-reusable-components.txt new file mode 100644 index 0000000..7c40822 --- /dev/null +++ b/react-reusable-components.txt @@ -0,0 +1,91 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","react-reusable-components"],"i":false,"f":[[["",{"children":[["slug","react-reusable-components","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","react-reusable-components","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","YWr1WANblgWhEKDQzXQEn",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T8a4, +- Reusable components are building blocks of a React application designed to be reused in multiple places. +- They promote modularity, maintainability, and efficiency. + +--- +### Key Benefits + +- **Code Reusability**: Write once, use multiple times. +- **Consistency**: Maintain consistent design and behavior across the app. +- **Ease of Maintenance**: Updates to a component reflect across all its instances. +- **Efficiency**: Reduces the need for duplicate code. + +--- +### Best Practices for Creating Reusable Components + +- **Single Responsibility Principle**: Each component should have one clear purpose. +- **Props**: Use props to make components configurable and dynamic. +- **Composition Over Inheritance**: Combine smaller components to build larger ones. +- **Avoid Hardcoding**: Parameterize data through props instead of hardcoding values. +- **Styling Flexibility**: Use CSS modules, styled-components, or className props for flexible styling. +- **Granularity**: Balance between too granular (many small components) and too monolithic (large components). + +--- +### Examples of Reusable Components + +1. Button + +```jsx +const Button = ({ onClick, children, style }) => ( + +); +``` + +2. Input Field + +```jsx +const Input = ({ type, value, onChange, placeholder }) => ( + +); + +``` + +3. Card + +```jsx +const Card = ({ children, style }) => ( +
    + {children} +
    +); + +const defaultStyle = { + border: "1px solid #ccc", + padding: "10px", + borderRadius: "5px", +}; + +``` + +--- +### Tips + +- **Test Components**: Ensure each component works in isolation. +- **Prop Validation**: Use `PropTypes` or TypeScript for better validation and type safety. +- **Document Components**: Add comments or maintain documentation to explain usage. + +--- +# References + +- https://www.freecodecamp.org/news/how-to-build-reusable-react-components/ +- https://buttercms.com/blog/building-reusable-components-using-react/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:11:07.000Z","draft":false,"title":"React Reusable Components"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/react-virtual-dom.html b/react-virtual-dom.html new file mode 100644 index 0000000..6a304c5 --- /dev/null +++ b/react-virtual-dom.html @@ -0,0 +1,108 @@ +Kavindu Udara

    React Virtual DOM

    01 December 2024
      +
    • The Virtual DOM (VDOM) is a lightweight in-memory representation of the real DOM.
      • +
    • React uses the VDOM to manage updates efficiently without directly manipulating the real DOM.
      • +
    +
    +

    Key Concepts

    +
      +
    • The actual structure rendered in the browser.
      • +
    • Updating it is slow because it triggers reflows and repaints.
      • +
    +
    +

    How the Virtual DOM Works

    +
      +
    • Initial Render: +
        +
      • React creates a VDOM representation of the UI.
        • +
      • The VDOM is then used to create the real DOM for the browser.
        • +
      +
      • +
    • Updating State or Props: +
        +
      • React creates a new VDOM tree based on the updated state/props.
        • +
      • It compares the new VDOM tree with the previous one (a process called diffing).
        • +
      • Only the differences (changes) are applied to the real DOM.
        • +
      +
      • +
    • Efficient Updates: +
        +
      • React batches multiple updates and applies them in one operation to minimize performance costs.
        • +
      +
      • +
    +
    +

    Benefits of the Virtual DOM

    +
      +
    • Performance: +
        +
      • Reduces direct interactions with the real DOM.
        • +
      • Optimizes updates by calculating the smallest number of changes.
        • +
      +
      • +
    • Declarative UI: +
        +
      • Developers focus on what the UI should look like, and React handles how to update the DOM.
        • +
      +
      • +
    • Cross-Browser Compatibility: +
        +
      • React abstracts browser-specific quirks in DOM manipulation.
        • +
      +
      • +
    +
    +

    Real-Life Analogy

    +
      +
    • Think of updating the DOM like editing a book.
      • +
    • Instead of rewriting the entire book (real DOM), React keeps a draft copy (virtual DOM), compares the draft with the original, and only updates the changed parts.
      • +
    +
    +

    Virtual DOM Diffing Algorithm

    +
      +
    • Tree Comparison: React compares the new VDOM tree with the old one.
      • +
    • Key-Based Optimization: +
        +
      • Keys in lists help React identify moved or updated elements efficiently.
        • +
      +
      • +
    • Minimal Updates: +
        +
      • React calculates and applies only the minimal required changes to the real DOM.
        • +
      +
      • +
    +
    +

    Example

    +
    function App() {
+    const [count, setCount] = React.useState(0);
+
+    return (
+        <div>
+            <p>Count: {count}</p>
+            <button onClick={() => setCount(count + 1)}>Increment</button>
+        </div>
+    );
+}
+
    +

    When the button is clicked:

    +
      +
    1. React updates the state (count).
      2. +
    2. React creates a new VDOM tree for <App />.
      3. +
    3. It compares the new tree with the old one.
      4. +
    4. Only the <p> element is updated in the real DOM.
      5. +
    +
    +

    Summary

    +

    The Virtual DOM is a powerful feature of React that:

    +
      +
    • Improves performance.
      • +
    • Simplifies the UI development process.
      • +
    • Provides a smooth and efficient user experience.
      • +
    +
    +

    References

    +
    \ No newline at end of file diff --git a/react-virtual-dom.txt b/react-virtual-dom.txt new file mode 100644 index 0000000..39445de --- /dev/null +++ b/react-virtual-dom.txt @@ -0,0 +1,103 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","react-virtual-dom"],"i":false,"f":[[["",{"children":[["slug","react-virtual-dom","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","react-virtual-dom","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","lBQkucnFyH6YR7k3SxTDc",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:Taf5, +- The **Virtual DOM (VDOM)** is a lightweight in-memory representation of the real DOM. +- React uses the VDOM to manage updates efficiently without directly manipulating the real DOM. + +--- +### Key Concepts + +- The actual structure rendered in the browser. +- Updating it is slow because it triggers reflows and repaints. + +--- +### How the Virtual DOM Works + +- **Initial Render**: + - React creates a VDOM representation of the UI. + - The VDOM is then used to create the real DOM for the browser. +- **Updating State or Props**: + - React creates a new VDOM tree based on the updated state/props. + - It compares the new VDOM tree with the previous one (a process called **diffing**). + - Only the differences (changes) are applied to the real DOM. +- **Efficient Updates**: + - React batches multiple updates and applies them in one operation to minimize performance costs. + +--- + +### Benefits of the Virtual DOM + +- **Performance**: + - Reduces direct interactions with the real DOM. + - Optimizes updates by calculating the smallest number of changes. +- **Declarative UI**: + - Developers focus on what the UI should look like, and React handles how to update the DOM. +- **Cross-Browser Compatibility**: + - React abstracts browser-specific quirks in DOM manipulation. + +--- + +### Real-Life Analogy + +- Think of updating the DOM like editing a book. +- Instead of rewriting the entire book (real DOM), React keeps a draft copy (virtual DOM), compares the draft with the original, and only updates the changed parts. + +--- + +### Virtual DOM Diffing Algorithm + +- **Tree Comparison**: React compares the new VDOM tree with the old one. +- **Key-Based Optimization**: + - Keys in lists help React identify moved or updated elements efficiently. +- **Minimal Updates**: + - React calculates and applies only the minimal required changes to the real DOM. + +--- +### Example + +```jsx +function App() { + const [count, setCount] = React.useState(0); + + return ( +
    +

    Count: {count}

    + +
    + ); +} +``` + +When the button is clicked: + +1. React updates the state (`count`). +2. React creates a new VDOM tree for ``. +3. It compares the new tree with the old one. +4. Only the `

    ` element is updated in the real DOM. + +--- +### Summary + +The Virtual DOM is a powerful feature of React that: + +- Improves performance. +- Simplifies the UI development process. +- Provides a smooth and efficient user experience. + +--- +# References + +- https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/ +- https://legacy.reactjs.org/docs/faq-internals.html +- https://www.geeksforgeeks.org/reactjs-virtual-dom/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:24:27.000Z","draft":false,"title":"React Virtual DOM"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/real-world-examples-of-apps-build-with-react.html b/real-world-examples-of-apps-build-with-react.html new file mode 100644 index 0000000..2b7856a --- /dev/null +++ b/real-world-examples-of-apps-build-with-react.html @@ -0,0 +1,9 @@ +Kavindu Udara

    Real World Examples of Apps Build With React

    01 December 2024

    This is some real world examples that build with react

    +
    +
    ApplicationDescriptionKey Features
    FacebookSocial media platform, React's origin.News feed, notifications, live chat, real-time updates, and interactive UI.
    InstagramPhoto and video sharing platform owned by Meta.Stories, filters, reels, dynamic user feeds, and push notifications.
    WhatsApp WebWeb version of the popular messaging app.Real-time messaging, live updates, QR login, and responsive design.
    NetflixStreaming platform for movies and TV shows.Dynamic user interface, personalized recommendations, and optimized streaming experiences.
    AirbnbMarketplace for lodging, primarily short-term rentals.Interactive maps, real-time search results, and responsive layouts for booking accommodations.
    UberRidesharing platform for booking cabs and delivery services.Live tracking, dynamic pricing, and real-time updates.
    PinterestVisual discovery engine for sharing ideas and inspirations.Infinite scrolling, dynamic pin recommendations, and smooth user interactions.
    SlackCollaboration platform for messaging and workplace tools.Real-time messaging, file sharing, and integrated third-party tools.
    ShopifyE-commerce platform for businesses to create online stores.Dynamic dashboards, real-time inventory updates, and responsive store designs.
    DiscordVoice, video, and text communication platform for communities and gamers.Real-time messaging, custom UIs for servers, and seamless voice/video integration.
    DropboxCloud storage platform for storing and sharing files.Interactive UI for file uploads, drag-and-drop functionality, and real-time collaboration tools.
    TrelloProject management tool for task organization.Drag-and-drop Kanban boards, real-time updates, and interactive UI elements.
    AsanaTask and project management application for teams.Real-time task tracking, dynamic boards, and visual project timelines.
    BBCNews website offering global and local news.Dynamic content updates, real-time notifications, and seamless video playback.
    MediumBlogging platform for writers and readers.Interactive editor, personalized reading lists, and infinite scrolling for articles.
    Khan AcademyOnline learning platform offering free courses and lessons.Interactive learning tools, real-time quizzes, and progress tracking.
    GitHub (Front End)Code hosting platform for version control and collaboration.Interactive dashboards, real-time updates on pull requests, and code comparison tools.
    CodeSandboxOnline code editor for web development.Real-time collaborative editing, live previews, and seamless integration with GitHub.
    Spotify (Web Player)Music streaming platform for discovering and playing music.Real-time search, dynamic playlists, and audio playback optimization.
    +

    These examples showcase React's versatility in building scalable, interactive, and high-performing applications across various domains like social media, e-commerce, streaming, and productivity tools.

    +
    +

    References

    +
    \ No newline at end of file diff --git a/real-world-examples-of-apps-build-with-react.txt b/real-world-examples-of-apps-build-with-react.txt new file mode 100644 index 0000000..6b34f18 --- /dev/null +++ b/real-world-examples-of-apps-build-with-react.txt @@ -0,0 +1,46 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","real-world-examples-of-apps-build-with-react"],"i":false,"f":[[["",{"children":[["slug","real-world-examples-of-apps-build-with-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","real-world-examples-of-apps-build-with-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","0nOJU3GhpG2dvZT_93o5F",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T1211, +This is some real world examples that build with react + +--- + +| **Application** | **Description** | **Key Features** | +| ------------------------ | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | +| **Facebook** | Social media platform, React's origin. | News feed, notifications, live chat, real-time updates, and interactive UI. | +| **Instagram** | Photo and video sharing platform owned by Meta. | Stories, filters, reels, dynamic user feeds, and push notifications. | +| **WhatsApp Web** | Web version of the popular messaging app. | Real-time messaging, live updates, QR login, and responsive design. | +| **Netflix** | Streaming platform for movies and TV shows. | Dynamic user interface, personalized recommendations, and optimized streaming experiences. | +| **Airbnb** | Marketplace for lodging, primarily short-term rentals. | Interactive maps, real-time search results, and responsive layouts for booking accommodations. | +| **Uber** | Ridesharing platform for booking cabs and delivery services. | Live tracking, dynamic pricing, and real-time updates. | +| **Pinterest** | Visual discovery engine for sharing ideas and inspirations. | Infinite scrolling, dynamic pin recommendations, and smooth user interactions. | +| **Slack** | Collaboration platform for messaging and workplace tools. | Real-time messaging, file sharing, and integrated third-party tools. | +| **Shopify** | E-commerce platform for businesses to create online stores. | Dynamic dashboards, real-time inventory updates, and responsive store designs. | +| **Discord** | Voice, video, and text communication platform for communities and gamers. | Real-time messaging, custom UIs for servers, and seamless voice/video integration. | +| **Dropbox** | Cloud storage platform for storing and sharing files. | Interactive UI for file uploads, drag-and-drop functionality, and real-time collaboration tools. | +| **Trello** | Project management tool for task organization. | Drag-and-drop Kanban boards, real-time updates, and interactive UI elements. | +| **Asana** | Task and project management application for teams. | Real-time task tracking, dynamic boards, and visual project timelines. | +| **BBC** | News website offering global and local news. | Dynamic content updates, real-time notifications, and seamless video playback. | +| **Medium** | Blogging platform for writers and readers. | Interactive editor, personalized reading lists, and infinite scrolling for articles. | +| **Khan Academy** | Online learning platform offering free courses and lessons. | Interactive learning tools, real-time quizzes, and progress tracking. | +| **GitHub (Front End)** | Code hosting platform for version control and collaboration. | Interactive dashboards, real-time updates on pull requests, and code comparison tools. | +| **CodeSandbox** | Online code editor for web development. | Real-time collaborative editing, live previews, and seamless integration with GitHub. | +| **Spotify (Web Player)** | Music streaming platform for discovering and playing music. | Real-time search, dynamic playlists, and audio playback optimization. | + +These examples showcase React's versatility in building scalable, interactive, and high-performing applications across various domains like social media, e-commerce, streaming, and productivity tools. + +--- +# References + +- https://www.netflix.com/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:28:46.000Z","draft":false,"title":"Real World Examples of Apps Build With React"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/setting-up-the-development-environment-for-react-with-vite.html b/setting-up-the-development-environment-for-react-with-vite.html new file mode 100644 index 0000000..69cf60d --- /dev/null +++ b/setting-up-the-development-environment-for-react-with-vite.html @@ -0,0 +1,86 @@ +Kavindu Udara

    Setting Up the Development Environment for React With Vite

    01 December 2024

    1. Installing Node.js and npm

    +

    Node.js and npm (Node Package Manager) are prerequisites for creating and running React applications.

    +
      +
    1. Download and Install Node.js: +
        +
      • Visit the Node.js official website.
        • +
      • Download the LTS version for stability.
        • +
      • Follow the installation instructions for your operating system.
        • +
      +
      2. +
    2. Verify Installation: +
        +
      • Open a terminal and run the following commands:
        • +
      +
      3. +
    +
    node -v
+npm -v
+
    +
      +
    • These commands will display the installed versions of Node.js and npm.
      • +
    +
    +

    2. Setting up a React Project

    +
      +
    1. Install Vite +Vite is a fast frontend build tool. +
        +
      • Open a terminal and run
        • +
      +
      2. +
    +
    npm create vite@latest my-react-app --template react
+
    +
    - Replace `my-react-app` with your desired project name.
+
    +

    2. Navigate to the Project Directory:

    +
    cd my-react-app
+
    +
      +
    1. +

      Install Dependencies +Run the following command to install all the dependencies

      +
      npm install
+
      +
      2. +
    2. +

      Run the Development Server +Start the Vite development server to preview your app

      +
      npm run dev
+
      +
        +
      • The terminal will display a URL (e.g., http://localhost:5173) where you can view your app in the browser.
        • +
      +
      3. +
    +
    +

    3. Overview of the Project Folder Structure

    +

    Once the setup is complete, your project folder will look like this:

    +
    my-react-app/
+├── node_modules/           # Installed npm packages
+├── public/                 # Static assets (e.g., images, icons)
+│   └── vite.svg            # Default Vite logo
+├── src/                    # Source code of your application
+│   ├── App.css             # Styles for the App component
+│   ├── App.jsx             # Main React component
+│   ├── main.jsx            # Entry point for the application
+│   └── index.css           # Global styles
+├── .gitignore              # Files and folders to ignore in Git
+├── package.json            # Project metadata and dependencies
+├── vite.config.js          # Configuration file for Vite
+└── README.md               # Project documentation
+
    +

    Key Files and Folders:

    +
      +
    • src/main.jsx: Entry point for your React app. It renders the root component (App.jsx).
      • +
    • src/App.jsx: Default React component created by Vite. Customize this file to start building your app.
      • +
    • public/: Store static assets like images or fonts.
      • +
    • package.json: Manages dependencies, scripts, and project metadata.
      • +
    • vite.config.js: Customize the build tool's behavior (e.g., plugins, server options).
      • +
    +
    +

    References

    +
    \ No newline at end of file diff --git a/setting-up-the-development-environment-for-react-with-vite.txt b/setting-up-the-development-environment-for-react-with-vite.txt new file mode 100644 index 0000000..0025072 --- /dev/null +++ b/setting-up-the-development-environment-for-react-with-vite.txt @@ -0,0 +1,96 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","setting-up-the-development-environment-for-react-with-vite"],"i":false,"f":[[["",{"children":[["slug","setting-up-the-development-environment-for-react-with-vite","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","setting-up-the-development-environment-for-react-with-vite","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","zt6gHU-Mu6nIEog_0iNWx",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:Ta89, +### 1. Installing Node.js and npm + +Node.js and npm (Node Package Manager) are prerequisites for creating and running React applications. + +1. **Download and Install Node.js**: + - Visit the [Node.js official website](https://nodejs.org). + - Download the **LTS** version for stability. + - Follow the installation instructions for your operating system. +2. **Verify Installation**: + - Open a terminal and run the following commands: +```bash +node -v +npm -v +``` + +- These commands will display the installed versions of Node.js and npm. + +--- + +### 2. Setting up a React Project + +1. Install Vite + Vite is a fast frontend build tool. + - Open a terminal and run +```bash +npm create vite@latest my-react-app --template react +``` + + - Replace `my-react-app` with your desired project name. + +2. **Navigate to the Project Directory**: +```bash +cd my-react-app +``` + +3. **Install Dependencies** + Run the following command to install all the dependencies + ```bash + npm install + ``` + +4. **Run the Development Server** + Start the Vite development server to preview your app + ```bash + npm run dev + ``` + + - The terminal will display a URL (e.g., `http://localhost:5173`) where you can view your app in the browser. + +--- +### 3. Overview of the Project Folder Structure + +Once the setup is complete, your project folder will look like this: + +```perl +my-react-app/ +├── node_modules/ # Installed npm packages +├── public/ # Static assets (e.g., images, icons) +│ └── vite.svg # Default Vite logo +├── src/ # Source code of your application +│ ├── App.css # Styles for the App component +│ ├── App.jsx # Main React component +│ ├── main.jsx # Entry point for the application +│ └── index.css # Global styles +├── .gitignore # Files and folders to ignore in Git +├── package.json # Project metadata and dependencies +├── vite.config.js # Configuration file for Vite +└── README.md # Project documentation +``` + +**Key Files and Folders**: + +- **`src/main.jsx`**: Entry point for your React app. It renders the root component (`App.jsx`). +- **`src/App.jsx`**: Default React component created by Vite. Customize this file to start building your app. +- **`public/`**: Store static assets like images or fonts. +- **`package.json`**: Manages dependencies, scripts, and project metadata. +- **`vite.config.js`**: Customize the build tool's behavior (e.g., plugins, server options). + +--- +# References + +- https://vite.dev/guide/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:38:32.000Z","draft":false,"title":"Setting Up the Development Environment for React With Vite"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/state-in-react.html b/state-in-react.html new file mode 100644 index 0000000..97a1410 --- /dev/null +++ b/state-in-react.html @@ -0,0 +1,96 @@ +Kavindu Udara

    State in React

    01 December 2024

    State is used to manage data that changes within a component. Unlike props, state is mutable and controlled by the component itself.

    +
    +

    Using the useState Hook

    +
      +
    1. +

      Import useState

      +
      import { useState } from 'react';
+
      +
      2. +
    2. +

      Initialize state

      +
      const [count, setCount] = useState(0);
+
      +
      3. +
    3. +

      Update state

      +
      setCount(count + 1);
+
      +
      4. +
    +
    +

    Example of State

    +
    function Counter() {
+    const [count, setCount] = useState(0);
+
+    return (
+        <div>
+            <p>Count: {count}</p>
+            <button onClick={() => setCount(count + 1)}>Increment</button>
+        </div>
+    );
+}
+
    +
    +

    Updating and Managing State

    +
      +
    1. +

      Updating State

      +
        +
      • State updates are asynchronous. React batches multiple state updates for performance.
        • +
      • Use the previous state for calculations
        • +
      +
      setCount((prevCount) => prevCount + 1);
+
      +
      2. +
    2. +

      Managing Complex State

      +
        +
      • For objects or arrays, update using the spread operator
        • +
      +
      const [user, setUser] = useState({ name: "John", age: 25 });
+setUser((prevUser) => ({ ...prevUser, age: 26 }));
+
      +
      3. +
    3. +

      Conditional Rendering Based on State

      +
      function Toggle() {
+const [isOn, setIsOn] = useState(false);
+
+return (
+    <button onClick={() => setIsOn(!isOn)}>
+        {isOn ? "ON" : "OFF"}
+    </button>
+    );
+}
+
      +
      4. +
    4. +

      State in Forms +Manage input fields using state

      +
      function Form() {
+const [name, setName] = useState("");
+
+return (
+        <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+        />
+    );
+}
+
      +
      5. +
    +
    +

    Summary

    +
    FeaturePropsState
    MutabilityImmutable (read-only)Mutable (can be updated)
    ScopePassed from parent to childLocal to the component
    Use CasePassing data between componentsManaging dynamic, interactive data
    Example<Child name="John" />const [count, setCount] = useState(0)
    +
      +
    • Props make components reusable by passing dynamic data.
      • +
    • State manages component-specific data that changes over time.
      • +
    +
    +

    References

    +
    \ No newline at end of file diff --git a/state-in-react.txt b/state-in-react.txt new file mode 100644 index 0000000..f3a6e8d --- /dev/null +++ b/state-in-react.txt @@ -0,0 +1,112 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","state-in-react"],"i":false,"f":[[["",{"children":[["slug","state-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","state-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","4d1UIYhVK_TgdoVybsR1Q",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T8eb, +**State** is used to manage data that changes within a component. Unlike props, state is **mutable** and controlled by the component itself. + +--- +### Using the `useState` Hook + +1. Import `useState` + ```jsx + import { useState } from 'react'; + ``` + +2. Initialize state + ```jsx + const [count, setCount] = useState(0); + ``` + +3. Update state + ```jsx + setCount(count + 1); + ``` + +--- +### Example of State + +```jsx +function Counter() { + const [count, setCount] = useState(0); + + return ( +
    +

    Count: {count}

    + +
    + ); +} +``` + +--- +### Updating and Managing State + +1. Updating State + - State updates are asynchronous. React batches multiple state updates for performance. + - Use the previous state for calculations + ```jsx + setCount((prevCount) => prevCount + 1); + ``` + +2. Managing Complex State + - For objects or arrays, update using the spread operator + ```jsx + const [user, setUser] = useState({ name: "John", age: 25 }); + setUser((prevUser) => ({ ...prevUser, age: 26 })); + ``` + +3. Conditional Rendering Based on State + ```jsx + function Toggle() { + const [isOn, setIsOn] = useState(false); + + return ( + + ); + } + ``` + +4. State in Forms + Manage input fields using state + ```jsx + function Form() { + const [name, setName] = useState(""); + + return ( + setName(e.target.value)} + /> + ); + } + ``` + +--- +### Summary + +|**Feature**|**Props**|**State**| +|---|---|---| +|**Mutability**|Immutable (read-only)|Mutable (can be updated)| +|**Scope**|Passed from parent to child|Local to the component| +|**Use Case**|Passing data between components|Managing dynamic, interactive data| +|**Example**|``|`const [count, setCount] = useState(0)`| +- **Props** make components reusable by passing dynamic data. +- **State** manages component-specific data that changes over time. + +--- +# References + +- https://www.freecodecamp.org/news/full-guide-to-react-hooks/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:01:26.000Z","draft":false,"title":"State in React"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/styling-in-react.html b/styling-in-react.html new file mode 100644 index 0000000..05b6fe5 --- /dev/null +++ b/styling-in-react.html @@ -0,0 +1,186 @@ +Kavindu Udara

    Styling in React

    01 December 2024

    In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like Styled Components and utility-first frameworks like Tailwind CSS. This note will explore these approaches and when to use each.

    +
    +

    1. Inline Styles vs External CSS vs CSS Modules

    +

    1.1 Inline Styles

    +

    Inline styles are applied directly within a component using a JavaScript object. Each style property is written in camelCase instead of hyphenated format.

    +

    Advantages:

    +
      +
    • Simple and quick for small styles or individual components.
      • +
    • Styles are scoped to the component, preventing accidental global styles.
      • +
    +

    Disadvantages:

    +
      +
    • Not ideal for complex styles or media queries.
      • +
    • Limited to basic styles and does not support pseudo-classes like :hover or :focus.
      • +
    +

    Example of Inline Styles:

    +
    function MyComponent() {
+    const buttonStyle = {
+        backgroundColor: 'blue',
+        color: 'white',
+        padding: '10px',
+        borderRadius: '5px'
+    };
+
+    return <button style={buttonStyle}>Click Me</button>;
+}
+
    +

    1.2 External CSS

    +

    External CSS is the traditional way of styling websites. You create a .css file, and then link it to your React component by importing it. This approach is great for global styles and standard CSS features like pseudo-classes, media queries, and more.

    +

    Advantages:

    +
      +
    • Good for global styles and shared styles between components.
      • +
    • Easier to maintain for larger projects.
      • +
    +

    Disadvantages:

    +
      +
    • Global scope can lead to unintended side effects (i.e., styles affecting unrelated components).
      • +
    • No automatic scoping of styles, which can lead to conflicts.
      • +
    +

    Example of External CSS:

    +
      +
    1. Create a CSS file (styles.css):
      2. +
    +
    /* styles.css */
+.button {
+    background-color: blue;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+}
+
    +
      +
    1. Import and use in a React component:
      2. +
    +
    import './styles.css';
+
+function MyComponent() {
+    return <button className="button">Click Me</button>;
+}
+
    +

    1.3 CSS Modules

    +

    CSS Modules help in scoping CSS locally to the component, meaning styles are applied only to the specific component and won't interfere with other components. They use a unique class name behind the scenes to prevent style conflicts.

    +

    Advantages:

    +
      +
    • Localized styling, meaning styles are scoped to the component.
      • +
    • Prevents class name conflicts.
      • +
    +

    Disadvantages:

    +
      +
    • Can become verbose if not structured well.
      • +
    • Requires an additional setup (though this is done automatically in most React build tools).
      • +
    +

    Example of CSS Modules

    +
      +
    1. Create a CSS Module file (MyComponent.module.css):
      2. +
    +
    /* MyComponent.module.css */
+.button {
+    background-color: blue;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+}
+
    +
      +
    1. Import and use the CSS Module in the component:
      2. +
    +
    import styles from './MyComponent.module.css';
+
+function MyComponent() {
+    return <button className={styles.button}>Click Me</button>;
+}
+
    +
    +

    2. Introduction to Styling Libraries

    +

    2.1 Styled Components (CSS-in-JS)

    +

    Styled Components is a popular CSS-in-JS library that allows you to write CSS directly in your JavaScript/JSX files. It provides the benefit of scoped styling (like CSS Modules), but also supports more dynamic styles by utilizing JavaScript to control the style based on props or state.

    +

    Advantages:

    +
      +
    • Styles are scoped to the component by default.
      • +
    • Supports dynamic styles based on props or state.
      • +
    • Full access to JavaScript logic in styling (e.g., conditional styles).
      • +
    +

    Disadvantages:

    +
      +
    • May add some overhead for small projects.
      • +
    • Can result in larger JavaScript bundles due to the CSS-in-JS runtime.
      • +
    +

    Example of Styled Components:

    +
      +
    1. Install Styled Components:
      2. +
    +
    npm install styled-components
+
    +
      +
    1. Usage in a Component:
      2. +
    +
    import styled from 'styled-components';
+
+const Button = styled.button`
+    background-color: blue;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+
+    &:hover {
+        background-color: darkblue;
+    }
+`;
+
+function MyComponent() {
+    return <Button>Click Me</Button>;
+}
+
    +

    In this example, the Button component is styled using styled-components, and the styles are applied only to that component.

    +
    +

    2.2 Tailwind CSS

    +

    Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. It’s often used with React to create fast and responsive UIs without writing custom CSS.

    +

    Advantages:

    +
      +
    • Fast to develop with, as it avoids the need to write custom CSS.
      • +
    • Encourages reusable and consistent styles with utility classes.
      • +
    • Built-in responsive design and other common design patterns.
      • +
    +

    Disadvantages:

    +
      +
    • May result in long class names in JSX, which can be harder to read.
      • +
    • Over-reliance on utility classes can lead to repetitive code.
      • +
    +

    Example of Tailwind CSS:

    +
      +
    1. Install Tailwind CSS:
      2. +
    +
    npm install tailwindcss
+npx tailwindcss init
+
    +
      +
    1. Setup and use in your React component:
      2. +
    +
    function MyComponent() {
+    return (
+        <button className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
+            Click Me
+        </button>
+    );
+}
+
    +

    In this example, Tailwind utility classes are used to style the button element with background color, text color, padding, rounded corners, and a hover effect.

    +
    +

    Summary of Styling in React

    +
    MethodAdvantagesDisadvantages
    Inline StylesQuick to implement, scoped to componentLimited features (no pseudo-classes), not ideal for complex styles
    External CSSGreat for global styles and easy to maintainGlobal scope can lead to conflicts, no automatic scoping
    CSS ModulesScoped to components, prevents style conflictsRequires extra setup, can become verbose
    Styled Components (CSS-in-JS)Scoped styles, dynamic styling based on props or stateCan add overhead, larger bundle sizes
    Tailwind CSSFast development, utility classes for consistent designLong class names in JSX, can result in repetitive code
    +
    +

    Conclusion

    +
      +
    • Inline styles are useful for simple, scoped styling but are limited for complex scenarios.
      • +
    • External CSS is great for global styles but can cause conflicts in larger projects.
      • +
    • CSS Modules provide scoped styles without the global leakage of external CSS.
      • +
    • Styled Components offer powerful, dynamic styling capabilities within React using JavaScript.
      • +
    • Tailwind CSS is an efficient utility-first CSS framework that speeds up development with a consistent design pattern.
      • +
    +

    Choosing the right approach depends on the project size, requirements, and preferences. For small projects, inline styles or external CSS might suffice, while larger projects may benefit from CSS Modules, Styled Components, or Tailwind CSS.

    +
    +

    References

    +
    \ No newline at end of file diff --git a/styling-in-react.txt b/styling-in-react.txt new file mode 100644 index 0000000..03d489b --- /dev/null +++ b/styling-in-react.txt @@ -0,0 +1,243 @@ +1:"$Sreact.fragment" +2:I[5244,[],""] +3:I[3866,[],""] +5:I[6213,[],"OutletBoundary"] +7:I[6213,[],"MetadataBoundary"] +9:I[6213,[],"ViewportBoundary"] +b:I[4835,[],""] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","styling-in-react"],"i":false,"f":[[["",{"children":[["slug","styling-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","styling-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","dmd3LGpebGdeoeH4XYsrA",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T1c5c, +In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like **Styled Components** and utility-first frameworks like **Tailwind CSS**. This note will explore these approaches and when to use each. + +--- + +### 1. Inline Styles vs External CSS vs CSS Modules + +#### 1.1 Inline Styles + +Inline styles are applied directly within a component using a JavaScript object. Each style property is written in camelCase instead of hyphenated format. + +**Advantages**: + +- Simple and quick for small styles or individual components. +- Styles are scoped to the component, preventing accidental global styles. + +**Disadvantages**: + +- Not ideal for complex styles or media queries. +- Limited to basic styles and does not support pseudo-classes like `:hover` or `:focus`. + +#### Example of Inline Styles: + +```jsx +function MyComponent() { + const buttonStyle = { + backgroundColor: 'blue', + color: 'white', + padding: '10px', + borderRadius: '5px' + }; + + return ; +} +``` + +#### 1.2 External CSS + +External CSS is the traditional way of styling websites. You create a `.css` file, and then link it to your React component by importing it. This approach is great for global styles and standard CSS features like pseudo-classes, media queries, and more. + +**Advantages**: + +- Good for global styles and shared styles between components. +- Easier to maintain for larger projects. + +**Disadvantages**: + +- Global scope can lead to unintended side effects (i.e., styles affecting unrelated components). +- No automatic scoping of styles, which can lead to conflicts. + +#### Example of External CSS: + +1. **Create a CSS file** (`styles.css`): + +```css +/* styles.css */ +.button { + background-color: blue; + color: white; + padding: 10px; + border-radius: 5px; +} +``` + +2. **Import and use in a React component**: + +```jsx +import './styles.css'; + +function MyComponent() { + return ; +} +``` + +#### 1.3 CSS Modules + +CSS Modules help in **scoping CSS locally** to the component, meaning styles are applied only to the specific component and won't interfere with other components. They use a unique class name behind the scenes to prevent style conflicts. + +**Advantages**: + +- Localized styling, meaning styles are scoped to the component. +- Prevents class name conflicts. + +**Disadvantages**: + +- Can become verbose if not structured well. +- Requires an additional setup (though this is done automatically in most React build tools). + +#### Example of CSS Modules + +1. **Create a CSS Module file** (`MyComponent.module.css`): + +```css +/* MyComponent.module.css */ +.button { + background-color: blue; + color: white; + padding: 10px; + border-radius: 5px; +} +``` + +2. **Import and use the CSS Module in the component**: + +```jsx +import styles from './MyComponent.module.css'; + +function MyComponent() { + return ; +} +``` + +--- + +### 2. Introduction to Styling Libraries + +#### 2.1 Styled Components (CSS-in-JS) + +**Styled Components** is a popular **CSS-in-JS** library that allows you to write CSS directly in your JavaScript/JSX files. It provides the benefit of scoped styling (like CSS Modules), but also supports more dynamic styles by utilizing JavaScript to control the style based on props or state. + +**Advantages**: + +- Styles are scoped to the component by default. +- Supports dynamic styles based on props or state. +- Full access to JavaScript logic in styling (e.g., conditional styles). + +**Disadvantages**: + +- May add some overhead for small projects. +- Can result in larger JavaScript bundles due to the CSS-in-JS runtime. + +#### Example of Styled Components: + +1. **Install Styled Components**: + +```bash +npm install styled-components +``` + +2. **Usage in a Component**: + +```jsx +import styled from 'styled-components'; + +const Button = styled.button` + background-color: blue; + color: white; + padding: 10px; + border-radius: 5px; + + &:hover { + background-color: darkblue; + } +`; + +function MyComponent() { + return ; +} +``` + +In this example, the `Button` component is styled using `styled-components`, and the styles are applied only to that component. + +--- + +#### 2.2 Tailwind CSS + +**Tailwind CSS** is a utility-first CSS framework that provides low-level utility classes to build custom designs. It’s often used with React to create fast and responsive UIs without writing custom CSS. + +**Advantages**: + +- Fast to develop with, as it avoids the need to write custom CSS. +- Encourages reusable and consistent styles with utility classes. +- Built-in responsive design and other common design patterns. + +**Disadvantages**: + +- May result in long class names in JSX, which can be harder to read. +- Over-reliance on utility classes can lead to repetitive code. + +#### Example of Tailwind CSS: + +1. **Install Tailwind CSS**: + +```bash +npm install tailwindcss +npx tailwindcss init +``` + +2. **Setup and use in your React component**: + +```jsx +function MyComponent() { + return ( + + ); +} +``` + +In this example, Tailwind utility classes are used to style the `button` element with background color, text color, padding, rounded corners, and a hover effect. + +--- + +### Summary of Styling in React + +|**Method**|**Advantages**|**Disadvantages**| +|---|---|---| +|**Inline Styles**|Quick to implement, scoped to component|Limited features (no pseudo-classes), not ideal for complex styles| +|**External CSS**|Great for global styles and easy to maintain|Global scope can lead to conflicts, no automatic scoping| +|**CSS Modules**|Scoped to components, prevents style conflicts|Requires extra setup, can become verbose| +|**Styled Components (CSS-in-JS)**|Scoped styles, dynamic styling based on props or state|Can add overhead, larger bundle sizes| +|**Tailwind CSS**|Fast development, utility classes for consistent design|Long class names in JSX, can result in repetitive code| + +--- + +### Conclusion + +- **Inline styles** are useful for simple, scoped styling but are limited for complex scenarios. +- **External CSS** is great for global styles but can cause conflicts in larger projects. +- **CSS Modules** provide scoped styles without the global leakage of external CSS. +- **Styled Components** offer powerful, dynamic styling capabilities within React using JavaScript. +- **Tailwind CSS** is an efficient utility-first CSS framework that speeds up development with a consistent design pattern. + +Choosing the right approach depends on the project size, requirements, and preferences. For small projects, inline styles or external CSS might suffice, while larger projects may benefit from CSS Modules, Styled Components, or Tailwind CSS. + +--- +# References + +- https://legacy.reactjs.org/docs/faq-styling.html4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:12:01.000Z","draft":false,"title":"Styling in React"}}] +a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] +8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] +6:null diff --git a/what-is-jsx-tsx-and-how-it-differs-from-html.html b/what-is-jsx-tsx-and-how-it-differs-from-html.html index 9c3eebd..71763ce 100644 --- a/what-is-jsx-tsx-and-how-it-differs-from-html.html +++ b/what-is-jsx-tsx-and-how-it-differs-from-html.html @@ -1,4 +1,4 @@ -Kavindu Udara

    What Is JSX TSX and How It Differs From HTML

    01 December 2024
      +Kavindu Udara

      What Is JSX TSX and How It Differs From HTML

      01 December 2024
      • JSX (JavaScript XML): A syntax extension for JavaScript used in React to describe the UI structure.
      • TSX (TypeScript XML): Similar to JSX but used in React projects with TypeScript for type safety.
      • Both allow developers to write code that looks like HTML, but they are not HTML—they are syntactic sugar that gets transpiled into JavaScript.
        • @@ -85,4 +85,4 @@

        Summary

        References

      \ No newline at end of file +
    \ No newline at end of file diff --git a/what-is-jsx-tsx-and-how-it-differs-from-html.txt b/what-is-jsx-tsx-and-how-it-differs-from-html.txt index 461baab..368e5b1 100644 --- a/what-is-jsx-tsx-and-how-it-differs-from-html.txt +++ b/what-is-jsx-tsx-and-how-it-differs-from-html.txt @@ -5,9 +5,91 @@ 7:I[6213,[],"MetadataBoundary"] 9:I[6213,[],"ViewportBoundary"] b:I[4835,[],""] -:HL["/me/_next/static/css/7cdffd469baeb000.css","style"] -0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["","what-is-jsx-tsx-and-how-it-differs-from-html"],"i":false,"f":[[["",{"children":[["slug","what-is-jsx-tsx-and-how-it-differs-from-html","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","what-is-jsx-tsx-and-how-it-differs-from-html","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","9fnXahlaRpYLl31xAY5C4",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} -4:["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":["$","div",null,{"className":"markdown-container","children":[["$","div",null,{"className":"flex flex-wrap items-center justify-start gap-4 mb-5","children":[["$","button",null,{"className":"p-4 rounded-lg cursor-pointer ","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 448 512","children":["$undefined",[["$","path","0",{"d":"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z","children":[]}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","h1",null,{"className":"text-4xl font-bold ","children":"What Is JSX TSX and How It Differs From HTML"}]]}],["$","blockquote",null,{"className":"underline font-semibold","children":"01 December 2024"}],["$","hr",null,{}],["$","div",null,{"className":"prose","children":[["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":"JSX (JavaScript XML)"}],": A syntax extension for JavaScript used in React to describe the UI structure."]}],"\n",["$","li","li-1",{"children":[["$","strong","strong-0",{"children":"TSX (TypeScript XML)"}],": Similar to JSX but used in React projects with TypeScript for type safety."]}],"\n",["$","li","li-2",{"children":"Both allow developers to write code that looks like HTML, but they are not HTML—they are syntactic sugar that gets transpiled into JavaScript."}],"\n"]}],"\n",["$","hr","hr-0",{}],"\n",["$","h3","h3-0",{"children":"Key Differences Between JSX/TSX and HTML"}],"\n",["$","table","table-0",{"children":[["$","thead","thead-0",{"children":["$","tr","tr-0",{"children":[["$","th","th-0",{"children":["$","strong","strong-0",{"children":"Feature"}]}],["$","th","th-1",{"children":["$","strong","strong-0",{"children":"JSX/TSX"}]}],["$","th","th-2",{"children":["$","strong","strong-0",{"children":"HTML"}]}]]}]}],["$","tbody","tbody-0",{"children":[["$","tr","tr-0",{"children":[["$","td","td-0",{"children":["$","strong","strong-0",{"children":"Syntax"}]}],["$","td","td-1",{"children":"Combines JavaScript/TypeScript with XML-like tags."}],["$","td","td-2",{"children":"Pure markup language."}]]}],["$","tr","tr-1",{"children":[["$","td","td-0",{"children":["$","strong","strong-0",{"children":"Attributes"}]}],["$","td","td-1",{"children":["Uses ",["$","code","code-0",{"children":"camelCase"}]," (e.g., ",["$","code","code-1",{"children":"className"}],", ",["$","code","code-2",{"children":"onClick"}],")."]}],["$","td","td-2",{"children":["Uses standard HTML attributes (e.g., ",["$","code","code-0",{"children":"class"}],", ",["$","code","code-1",{"children":"onclick"}],")."]}]]}],["$","tr","tr-2",{"children":[["$","td","td-0",{"children":["$","strong","strong-0",{"children":"Dynamic Content"}]}],["$","td","td-1",{"children":["Allows embedding of JavaScript expressions using ",["$","code","code-0",{"children":"{}"}],"."]}],["$","td","td-2",{"children":["Requires separate scripting with ",["$","code","code-0",{"children":"Kavindu Udara

    Whatsapp

    12 February 2025

    Yes, you can integrate WhatsApp into your web application using the WhatsApp Business API. This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:

    +Kavindu Udara

    Whatsapp

    12 February 2025

    Yes, you can integrate WhatsApp into your web application using the WhatsApp Business API. This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:

    1. WhatsApp Business API

    The WhatsApp Business API is the official way to integrate WhatsApp into your application. It is designed for businesses and developers to interact with users at scale.

    @@ -177,4 +177,4 @@

    Summary

  • Free options like the WhatsApp Business App or Twilio's sandbox are limited and not suitable for production use.
  • Always ensure compliance with WhatsApp's policies to avoid account bans.
    • -

    If you're just starting out, I recommend using the Twilio WhatsApp Sandbox for testing and then transitioning to the paid API for production use.

    \ No newline at end of file +

    If you're just starting out, I recommend using the Twilio WhatsApp Sandbox for testing and then transitioning to the paid API for production use.

    \ No newline at end of file diff --git a/whatsapp.txt b/whatsapp.txt index b0ea7c4..d1a3403 100644 --- a/whatsapp.txt +++ b/whatsapp.txt @@ -5,9 +5,155 @@ 7:I[6213,[],"MetadataBoundary"] 9:I[6213,[],"ViewportBoundary"] b:I[4835,[],""] -:HL["/me/_next/static/css/7cdffd469baeb000.css","style"] -0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["","whatsapp"],"i":false,"f":[[["",{"children":[["slug","whatsapp","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","whatsapp","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","KR0vposOylwBJLxJ-krm_",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} -4:["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":["$","div",null,{"className":"markdown-container","children":[["$","div",null,{"className":"flex flex-wrap items-center justify-start gap-4 mb-5","children":[["$","button",null,{"className":"p-4 rounded-lg cursor-pointer ","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 448 512","children":["$undefined",[["$","path","0",{"d":"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z","children":[]}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","h1",null,{"className":"text-4xl font-bold ","children":"Whatsapp"}]]}],["$","blockquote",null,{"className":"underline font-semibold","children":"12 February 2025"}],["$","hr",null,{}],["$","div",null,{"className":"prose","children":[["$","p","p-0",{"children":["Yes, you can integrate WhatsApp into your web application using the ",["$","strong","strong-0",{"children":"WhatsApp Business API"}],". This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:"]}],"\n",["$","hr","hr-0",{}],"\n",["$","h3","h3-0",{"children":["$","strong","strong-0",{"children":"1. WhatsApp Business API"}]}],"\n",["$","p","p-1",{"children":"The WhatsApp Business API is the official way to integrate WhatsApp into your application. It is designed for businesses and developers to interact with users at scale."}],"\n",["$","h4","h4-0",{"children":["$","strong","strong-0",{"children":"Steps to Use WhatsApp Business API:"}]}],"\n",["$","ol","ol-0",{"children":["\n",["$","li","li-0",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Sign Up for a WhatsApp Business Account"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":["Go to the ",["$","a","a-0",{"href":"https://developers.facebook.com/docs/whatsapp","children":"Meta for Developers"}]," page and create a developer account."]}],"\n",["$","li","li-1",{"children":"Apply for access to the WhatsApp Business API."}],"\n"]}],"\n"]}],"\n",["$","li","li-1",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Choose a Solution Provider"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":["Meta (formerly Facebook) requires you to work with an official ",["$","strong","strong-0",{"children":"Business Solution Provider (BSP)"}]," to use the API. Some popular providers include:","\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Twilio"}],"\n",["$","li","li-1",{"children":"Vonage (formerly Nexmo)"}],"\n",["$","li","li-2",{"children":"MessageBird"}],"\n",["$","li","li-3",{"children":"WATI (WhatsApp Team Inbox)"}],"\n",["$","li","li-4",{"children":"Gupshup"}],"\n"]}],"\n"]}],"\n",["$","li","li-1",{"children":"These providers simplify the setup process and often provide additional tools for managing WhatsApp messages."}],"\n"]}],"\n"]}],"\n",["$","li","li-2",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Set Up the API"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Follow the documentation provided by your chosen BSP to set up the API."}],"\n",["$","li","li-1",{"children":"You'll need to authenticate your account, configure webhooks, and set up a phone number for WhatsApp."}],"\n"]}],"\n"]}],"\n",["$","li","li-3",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Integrate with Your Web Application"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Use the API endpoints provided by your BSP to send and receive messages."}],"\n",["$","li","li-1",{"children":["Example: Send a message using the API:","\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-json","children":"POST /v1/messages\n{\n \"to\": \"recipient_phone_number\",\n \"type\": \"text\",\n \"text\": {\n \"body\": \"Hello, this is a test message!\"\n }\n}\n"}]}],"\n"]}],"\n"]}],"\n"]}],"\n",["$","li","li-4",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Handle Webhooks"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Set up webhooks to receive incoming messages, delivery statuses, and other events from WhatsApp."}],"\n"]}],"\n"]}],"\n"]}],"\n",["$","hr","hr-1",{}],"\n",["$","h3","h3-1",{"children":["$","strong","strong-0",{"children":"2. Twilio API for WhatsApp"}]}],"\n",["$","p","p-2",{"children":"Twilio is one of the most popular providers for WhatsApp integration. It simplifies the process of sending and receiving messages."}],"\n",["$","h4","h4-1",{"children":["$","strong","strong-0",{"children":"Steps to Use Twilio for WhatsApp:"}]}],"\n",["$","ol","ol-1",{"children":["\n",["$","li","li-0",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Create a Twilio Account"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":["Sign up at ",["$","a","a-0",{"href":"https://www.twilio.com/","children":"Twilio"}],"."]}],"\n"]}],"\n"]}],"\n",["$","li","li-1",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Enable WhatsApp on Twilio"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Go to the Twilio Console and enable WhatsApp for your account."}],"\n",["$","li","li-1",{"children":"Twilio provides a sandbox for testing, where you can send messages to a pre-approved number."}],"\n"]}],"\n"]}],"\n",["$","li","li-2",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Integrate Twilio API"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Use Twilio's API to send and receive WhatsApp messages."}],"\n",["$","li","li-1",{"children":["Example (Python):","\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-python","children":"from twilio.rest import Client\n\naccount_sid = 'your_account_sid'\nauth_token = 'your_auth_token'\nclient = Client(account_sid, auth_token)\n\nmessage = client.messages.create(\n from_='whatsapp:+14155238886', # Twilio's WhatsApp sandbox number\n body='Hello, this is a test message!',\n to='whatsapp:recipient_phone_number'\n)\n\nprint(message.sid)\n"}]}],"\n"]}],"\n"]}],"\n"]}],"\n",["$","li","li-3",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Set Up Webhooks"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Configure webhooks in Twilio to handle incoming messages and other events."}],"\n"]}],"\n"]}],"\n"]}],"\n",["$","hr","hr-2",{}],"\n",["$","h3","h3-2",{"children":["$","strong","strong-0",{"children":"3. Other Alternatives"}]}],"\n",["$","p","p-3",{"children":"If you don't want to use the official WhatsApp Business API, there are some unofficial libraries and tools, but these are not recommended as they may violate WhatsApp's terms of service and could result in your account being banned."}],"\n",["$","hr","hr-3",{}],"\n",["$","h3","h3-3",{"children":["$","strong","strong-0",{"children":"Key Considerations"}]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":"Pricing"}],": WhatsApp Business API and third-party providers like Twilio charge based on the number of messages sent and received."]}],"\n",["$","li","li-1",{"children":[["$","strong","strong-0",{"children":"Compliance"}],": Ensure you comply with WhatsApp's policies and guidelines."]}],"\n",["$","li","li-2",{"children":[["$","strong","strong-0",{"children":"User Consent"}],": Users must opt-in to receive messages from your business on WhatsApp."]}],"\n"]}],"\n",["$","hr","hr-4",{}],"\n",["$","p","p-4",{"children":"By using the WhatsApp Business API or a provider like Twilio, you can seamlessly integrate WhatsApp into your web application and provide a great communication experience for your users."}],"\n",["$","hr","hr-5",{}],"\n",["$","p","p-5",{"children":["The ",["$","strong","strong-0",{"children":"WhatsApp Business API"}]," itself is ",["$","strong","strong-1",{"children":"not free"}],". WhatsApp charges businesses for sending messages to users, but receiving messages is generally free. Here's a breakdown of the costs and free options available:"]}],"\n",["$","hr","hr-6",{}],"\n",["$","h3","h3-4",{"children":["$","strong","strong-0",{"children":"1. WhatsApp Business API Costs"}]}],"\n",["$","ul","ul-1",{"children":["\n",["$","li","li-0",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Message-Based Pricing"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":["WhatsApp charges businesses based on the number of ",["$","strong","strong-0",{"children":"template messages"}]," (outbound messages initiated by the business) and ",["$","strong","strong-1",{"children":"session messages"}]," (replies within a 24-hour window)."]}],"\n",["$","li","li-1",{"children":["Pricing varies by country. For example:","\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":["In the US, sending a template message costs ",["$","strong","strong-0",{"children":"$$0.005 per message"}]," (0.5 cents)."]}],"\n",["$","li","li-1",{"children":["In India, it costs ",["$","strong","strong-0",{"children":"$$0.0023 per message"}]," (0.23 cents)."]}],"\n"]}],"\n"]}],"\n",["$","li","li-2",{"children":"Receiving messages from users is free."}],"\n"]}],"\n"]}],"\n",["$","li","li-1",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Business Solution Provider (BSP) Fees"}],":"]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"If you use a third-party provider like Twilio, Vonage, or MessageBird, they may charge additional fees for their services, such as API usage, setup, or support."}],"\n"]}],"\n"]}],"\n"]}],"\n",["$","hr","hr-7",{}],"\n",["$","h3","h3-5",{"children":["$","strong","strong-0",{"children":"2. Free Options"}]}],"\n",["$","p","p-6",{"children":"If you're looking for a free way to use WhatsApp for your web application, your options are limited:"}],"\n",["$","h4","h4-2",{"children":["$","strong","strong-0",{"children":"a. WhatsApp Business App"}]}],"\n",["$","ul","ul-2",{"children":["\n",["$","li","li-0",{"children":["The ",["$","strong","strong-0",{"children":"WhatsApp Business App"}]," is a free mobile app designed for small businesses."]}],"\n",["$","li","li-1",{"children":"It allows you to communicate with customers, set up automated replies, and create a business profile."}],"\n",["$","li","li-2",{"children":"However, it is not an API and cannot be directly integrated into a web application."}],"\n"]}],"\n",["$","h4","h4-3",{"children":["$","strong","strong-0",{"children":"b. Twilio WhatsApp Sandbox"}]}],"\n",["$","ul","ul-3",{"children":["\n",["$","li","li-0",{"children":["Twilio offers a ",["$","strong","strong-0",{"children":"free WhatsApp sandbox"}]," for testing purposes."]}],"\n",["$","li","li-1",{"children":"You can send and receive messages to a pre-approved number for free."}],"\n",["$","li","li-2",{"children":"This is great for development and testing, but for production use, you'll need to upgrade to a paid plan."}],"\n"]}],"\n",["$","h4","h4-4",{"children":["$","strong","strong-0",{"children":"c. Unofficial Libraries (Not Recommended)"}]}],"\n",["$","ul","ul-4",{"children":["\n",["$","li","li-0",{"children":["There are unofficial libraries and tools (e.g., ",["$","code","code-0",{"children":"whatsapp-web.js"}],") that allow you to interact with WhatsApp programmatically."]}],"\n",["$","li","li-1",{"children":["These tools often rely on reverse-engineering WhatsApp's protocols and are ",["$","strong","strong-0",{"children":"not officially supported"}],"."]}],"\n",["$","li","li-2",{"children":"Using them may violate WhatsApp's terms of service, and your account could be banned."}],"\n"]}],"\n",["$","hr","hr-8",{}],"\n",["$","h3","h3-6",{"children":["$","strong","strong-0",{"children":"3. Cost-Effective Solutions"}]}],"\n",["$","p","p-7",{"children":"If you're looking for a low-cost solution:"}],"\n",["$","ul","ul-5",{"children":["\n",["$","li","li-0",{"children":["Use the ",["$","strong","strong-0",{"children":"WhatsApp Business API"}]," with a provider like Twilio or WATI."]}],"\n",["$","li","li-1",{"children":["Start with the ",["$","strong","strong-0",{"children":"Twilio WhatsApp Sandbox"}]," for free testing."]}],"\n",["$","li","li-2",{"children":"Optimize your messaging to reduce costs (e.g., use session messages instead of template messages whenever possible)."}],"\n"]}],"\n",["$","hr","hr-9",{}],"\n",["$","h3","h3-7",{"children":["$","strong","strong-0",{"children":"Summary"}]}],"\n",["$","ul","ul-6",{"children":["\n",["$","li","li-0",{"children":["The WhatsApp Business API is ",["$","strong","strong-0",{"children":"not free"}],", but it is the official and most reliable way to integrate WhatsApp into your web application."]}],"\n",["$","li","li-1",{"children":"Free options like the WhatsApp Business App or Twilio's sandbox are limited and not suitable for production use."}],"\n",["$","li","li-2",{"children":"Always ensure compliance with WhatsApp's policies to avoid account bans."}],"\n"]}],"\n",["$","p","p-8",{"children":["If you're just starting out, I recommend using the ",["$","strong","strong-0",{"children":"Twilio WhatsApp Sandbox"}]," for testing and then transitioning to the paid API for production use."]}]]}]]}]}] +:HL["/me/_next/static/css/1d9abe454822820e.css","style"] +0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","whatsapp"],"i":false,"f":[[["",{"children":[["slug","whatsapp","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","whatsapp","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","-fsVg6OtlnkGgIrLGwWtC",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true} +c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"] +d:T19eb,Yes, you can integrate WhatsApp into your web application using the **WhatsApp Business API**. This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started: + +--- + +### **1. WhatsApp Business API** +The WhatsApp Business API is the official way to integrate WhatsApp into your application. It is designed for businesses and developers to interact with users at scale. + +#### **Steps to Use WhatsApp Business API:** +1. **Sign Up for a WhatsApp Business Account**: + - Go to the [Meta for Developers](https://developers.facebook.com/docs/whatsapp) page and create a developer account. + - Apply for access to the WhatsApp Business API. + +2. **Choose a Solution Provider**: + - Meta (formerly Facebook) requires you to work with an official **Business Solution Provider (BSP)** to use the API. Some popular providers include: + - Twilio + - Vonage (formerly Nexmo) + - MessageBird + - WATI (WhatsApp Team Inbox) + - Gupshup + - These providers simplify the setup process and often provide additional tools for managing WhatsApp messages. + +3. **Set Up the API**: + - Follow the documentation provided by your chosen BSP to set up the API. + - You'll need to authenticate your account, configure webhooks, and set up a phone number for WhatsApp. + +4. **Integrate with Your Web Application**: + - Use the API endpoints provided by your BSP to send and receive messages. + - Example: Send a message using the API: + ```json + POST /v1/messages + { + "to": "recipient_phone_number", + "type": "text", + "text": { + "body": "Hello, this is a test message!" + } + } + ``` + +5. **Handle Webhooks**: + - Set up webhooks to receive incoming messages, delivery statuses, and other events from WhatsApp. + +--- + +### **2. Twilio API for WhatsApp** +Twilio is one of the most popular providers for WhatsApp integration. It simplifies the process of sending and receiving messages. + +#### **Steps to Use Twilio for WhatsApp:** +1. **Create a Twilio Account**: + - Sign up at [Twilio](https://www.twilio.com/). + +2. **Enable WhatsApp on Twilio**: + - Go to the Twilio Console and enable WhatsApp for your account. + - Twilio provides a sandbox for testing, where you can send messages to a pre-approved number. + +3. **Integrate Twilio API**: + - Use Twilio's API to send and receive WhatsApp messages. + - Example (Python): + ```python + from twilio.rest import Client + + account_sid = 'your_account_sid' + auth_token = 'your_auth_token' + client = Client(account_sid, auth_token) + + message = client.messages.create( + from_='whatsapp:+14155238886', # Twilio's WhatsApp sandbox number + body='Hello, this is a test message!', + to='whatsapp:recipient_phone_number' + ) + + print(message.sid) + ``` + +4. **Set Up Webhooks**: + - Configure webhooks in Twilio to handle incoming messages and other events. + +--- + +### **3. Other Alternatives** +If you don't want to use the official WhatsApp Business API, there are some unofficial libraries and tools, but these are not recommended as they may violate WhatsApp's terms of service and could result in your account being banned. + +--- + +### **Key Considerations** +- **Pricing**: WhatsApp Business API and third-party providers like Twilio charge based on the number of messages sent and received. +- **Compliance**: Ensure you comply with WhatsApp's policies and guidelines. +- **User Consent**: Users must opt-in to receive messages from your business on WhatsApp. + +--- + +By using the WhatsApp Business API or a provider like Twilio, you can seamlessly integrate WhatsApp into your web application and provide a great communication experience for your users. + +--- + +The **WhatsApp Business API** itself is **not free**. WhatsApp charges businesses for sending messages to users, but receiving messages is generally free. Here's a breakdown of the costs and free options available: + +--- + +### **1. WhatsApp Business API Costs** +- **Message-Based Pricing**: + - WhatsApp charges businesses based on the number of **template messages** (outbound messages initiated by the business) and **session messages** (replies within a 24-hour window). + - Pricing varies by country. For example: + - In the US, sending a template message costs **$0.005 per message** (0.5 cents). + - In India, it costs **$0.0023 per message** (0.23 cents). + - Receiving messages from users is free. + +- **Business Solution Provider (BSP) Fees**: + - If you use a third-party provider like Twilio, Vonage, or MessageBird, they may charge additional fees for their services, such as API usage, setup, or support. + +--- + +### **2. Free Options** +If you're looking for a free way to use WhatsApp for your web application, your options are limited: + +#### **a. WhatsApp Business App** +- The **WhatsApp Business App** is a free mobile app designed for small businesses. +- It allows you to communicate with customers, set up automated replies, and create a business profile. +- However, it is not an API and cannot be directly integrated into a web application. + +#### **b. Twilio WhatsApp Sandbox** +- Twilio offers a **free WhatsApp sandbox** for testing purposes. +- You can send and receive messages to a pre-approved number for free. +- This is great for development and testing, but for production use, you'll need to upgrade to a paid plan. + +#### **c. Unofficial Libraries (Not Recommended)** +- There are unofficial libraries and tools (e.g., `whatsapp-web.js`) that allow you to interact with WhatsApp programmatically. +- These tools often rely on reverse-engineering WhatsApp's protocols and are **not officially supported**. +- Using them may violate WhatsApp's terms of service, and your account could be banned. + +--- + +### **3. Cost-Effective Solutions** +If you're looking for a low-cost solution: +- Use the **WhatsApp Business API** with a provider like Twilio or WATI. +- Start with the **Twilio WhatsApp Sandbox** for free testing. +- Optimize your messaging to reduce costs (e.g., use session messages instead of template messages whenever possible). + +--- + +### **Summary** +- The WhatsApp Business API is **not free**, but it is the official and most reliable way to integrate WhatsApp into your web application. +- Free options like the WhatsApp Business App or Twilio's sandbox are limited and not suitable for production use. +- Always ensure compliance with WhatsApp's policies to avoid account bans. + +If you're just starting out, I recommend using the **Twilio WhatsApp Sandbox** for testing and then transitioning to the paid API for production use.4:["$","$Lc",null,{"content":"$d","data":{"date":"2025-02-12T15:56:33+0530","draft":true,"title":"Whatsapp"}}] a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] 6:null