tag:blogger.com,1999:blog-59721706524791842272024-03-14T05:24:47.745+05:30Fullstack Developer GuideThis blog is having some sort of guidelines about below technologies. Hoping this would be helpful to the people who want to gain knowledge on open sources / ui development.
Technologies: PHP, Drupal, Mysql, Ajax, JQuery, Wordpress, GIT, Selenium , PHP Unit, Linux, Nginx, HTML5, CSS3, Javascript, AngularJS, Backbone.Js, Node.JS, ReactJS, Angular, React Native etc.Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.comBlogger743125tag:blogger.com,1999:blog-5972170652479184227.post-20280336423392290672021-05-14T02:34:00.003+05:302021-05-14T02:34:40.702+05:30Ways to Improve the Performance of the React Application<p> This would be a common problem with the applications that are being developed in any technology. Especially while coming to UI platforms such as React, most of the content rendering, filtering and other actions will be done from UI side as they are primarily client focus technologies.</p><p>To improve the performance of React applications, we have certain techniques that can be followed as part of component development process.</p><p><b>Major Performance Techniques:</b></p><ul style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin: 0px auto 1.7rem; padding: 0px 0px 0px 2.5rem; width: 745px;"><li style="box-sizing: border-box; list-style: outside none disc; margin: 0px 0px 0.8rem; padding: 0px 0px 0px 4px;">Use <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;"><b>memo</b></span> and <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;"><b>PureComponent</b></span></li><li style="box-sizing: border-box; list-style: outside none disc; margin: 0px 0px 0.8rem; padding: 0px 0px 0px 4px;"><a href="https://www.digitalocean.com/community/tutorials/react-keep-react-fast#avoid-anonymous-functions" style="border-bottom: 1px dotted rgb(0, 0, 0); box-sizing: border-box; color: black; text-decoration-line: none; transition: border-bottom-color 0.25s ease 0s;">Avoid Anonymous Functions</a></li><li style="box-sizing: border-box; list-style: outside none disc; margin: 0px 0px 0.8rem; padding: 0px 0px 0px 4px;"><a href="https://www.digitalocean.com/community/tutorials/react-keep-react-fast#avoid-object-literals" style="border-bottom: 1px dotted rgb(0, 0, 0); box-sizing: border-box; color: black; text-decoration-line: none; transition: border-bottom-color 0.25s ease 0s;">Avoid Object Literals</a></li><li style="box-sizing: border-box; list-style: outside none disc; margin: 0px 0px 0.8rem; padding: 0px 0px 0px 4px;">Use <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;"><b>React.lazy</b></span> and <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;"><b>React.Suspense</b></span></li><li style="box-sizing: border-box; list-style: outside none disc; margin: 0px 0px 0.8rem; padding: 0px 0px 0px 4px;">Avoid Frequent Mounting/Unmounting</li></ul><div><h2 id="use-lt-gt-memo-lt-gt-and-lt-gt-purecomponent-lt-gt" style="background-color: white; box-sizing: border-box; color: #323232; font-family: Inter-Medium, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 26px; letter-spacing: -0.5px; margin: 30px auto 10px; padding: 0px; width: 745px;"><span style="font-weight: 500;">Use </span><span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">memo</span><span style="font-weight: 500;"> and </span><span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">PureComponent</span></h2><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Consider, In the below scenario, <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;"><PerComponentB></code> will re-render even if <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">props.perPropA</code> changes .</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-jsx" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-jsx" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">import</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">React</span> <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">from</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'react'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span> <span class="token function-variable function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">MyPerApp</span></span> <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>
<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><PerComponentA <span class="token attr-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">perPrropA</span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;"><span class="token script-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>props<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.perPropA</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">/></span><br /></span></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"> </span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><PerComponentB <span class="token attr-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">perPropB</span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;"><span class="token script-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>props<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.perPropB<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">/></span><br /></span></span></span></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"> </span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span> PerComponentA <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">=</span><span style="background-color: initial; word-spacing: normal;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">)</span><span style="background-color: initial; word-spacing: normal;"> </span><span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">=></span><span style="background-color: initial; word-spacing: normal;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">{</span><br /> <span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>props<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.perPropA}<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><br /></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span> PerComponentB <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>props<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.perPropB}<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><br /></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span></code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">This is hapening because <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">MyPerApp</code> is actually re-evaluated (or re-rendered and <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;"><PerComponentB></code> is in there. So even though its own props didn’t change, it’s parent component causes it to re-render.</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">This concept also applies to <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">render</code> methods for Class-based React components. There would be some easy performance gains by simply compating old and new props before re-rendering without writing explicit code like shouldComponentUpdate. this is essentially what <a href="https://www.digitalocean.com/community/tutorials/react-learning-react-memo" style="border-bottom: 1px dotted rgb(0, 0, 0); box-sizing: border-box; color: black; text-decoration-line: none; transition: border-bottom-color 0.25s ease 0s;">React.memo</a> and <a href="https://www.digitalocean.com/community/tutorials/react-performance-boost-purecomponent" style="border-bottom: 1px dotted rgb(0, 0, 0); box-sizing: border-box; color: black; text-decoration-line: none; transition: border-bottom-color 0.25s ease 0s;">React.PureComponent</a> does for us.</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Below is an example which uses <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">memo</span> with functional components.</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-jsx" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-jsx" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">import</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">React</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">,</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span> memo <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span> <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">from</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'react'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token comment" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #808591; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">// Component without Memorization</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span> <span class="token function-variable function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">PerComponentB</span></span> <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>props<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">perPropB</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token comment" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #808591; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">// Component with Memorization</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span> PerComponentB <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">=</span><span style="background-color: initial; word-spacing: normal;"> </span><span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">memo</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">)</span><span style="background-color: initial; word-spacing: normal;"> </span><span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">=></span><span style="background-color: initial; word-spacing: normal;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">{</span><br /> <span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>props<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.perPropB}<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><br /></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span></code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Now it will only re-render when <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">perPropB</code> actually changes value regardless of how many times its parent re-renders!</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Below is an example for the same by using <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">PureComponent</span>. for class-based components.</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-jsx" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-jsx" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">import</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">React</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">,</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Component</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">,</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">PureComponent</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span> <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">from</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'react'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token comment" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #808591; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">// Normal way of Creating Component</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">class</span> <span class="token class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">PerComponentB</span> <span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">extends</span> <span class="token class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Component</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">render</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">this</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">perPropB</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span>
<span class="token comment" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #808591; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">// Component with Memorization (Should Component Update Logic)</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">class</span> PerComponentB <span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">extends</span><span style="background-color: initial; word-spacing: normal;"> </span><span class="token class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">PureComponent</span><span style="background-color: initial; word-spacing: normal;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">{</span><br /> <span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">render</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">this</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.perPropB}<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><br /></span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">We might think, why React components don’t automatically include these internal safeguards against excessive re-rendering.</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">There’s actually a hidden cost with <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">memo</span> and <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">PureComponent</span>. Since these helpers compare old/new props, this can actually be its own performance bottlenecks. For example, if your props are very large, or you’re passing React components as props, the comparison of old/new props can be costly.</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;"><span style="color: #323232; font-family: Inter-Medium, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 26px; letter-spacing: -0.5px;">Anonymous Functions</span></p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Functions that are inside the main body of a component are usually event handlers, or callbacks. In many cases you might be tempted to use anonymous functions for them:</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-jsx" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-jsx" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">import</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">React</span> <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">from</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'react'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">function</span> <span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">MyNormalComponent</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>
<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>button</span> <span class="token attr-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">onClick</span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token script-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span> <span class="token console class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">console</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">log</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'Clicked'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
CLICK
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>button</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Since anonymous functions aren’t assigned an identifier (via <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">const/let/var</code>), they aren’t persistent whenever this functional component inevitably gets rendered again. This causes JavaScript to allocate new memory each time this component is re-rendered instead of allocating a single piece of memory only one when using "names functions"</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-jsx" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-jsx" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;">import<span style="background-color: initial; white-space: normal; word-spacing: normal;"> </span><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; white-space: normal; word-spacing: normal;">React</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; white-space: normal; word-spacing: normal;">,</span><span style="background-color: initial; white-space: normal; word-spacing: normal;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; white-space: normal; word-spacing: normal;">{</span><span style="background-color: initial; white-space: normal; word-spacing: normal;"> useCallback </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; white-space: normal; word-spacing: normal;">}</span><span style="background-color: initial; white-space: normal; word-spacing: normal;"> </span><span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; white-space: normal; word-spacing: normal;">from</span><span style="background-color: initial; white-space: normal; word-spacing: normal;"> </span><span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; white-space: normal; word-spacing: normal;">'react'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; white-space: normal; word-spacing: normal;">;</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span> <span class="token function-variable function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">handleClick</span> <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span> <span class="token console class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">console</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">log</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'Clicked'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">function</span> <span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">MyNormalComponent</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>
<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>button</span> <span class="token attr-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">onClick</span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token script-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>handleClick<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
CLICK
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>button</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><h2 id="avoid-object-literals" style="background-color: white; box-sizing: border-box; color: #323232; font-family: Inter-Medium, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -0.5px; margin: 30px auto 10px; padding: 0px; width: 745px;">Avoid Object Literals</h2><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Object literals don’t have a persistent memory space, so our component will need to allocate a new location in memory whenever the component re-renders:</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-jsx" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-jsx" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">function</span> <span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">ObjComponentA</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>
<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
HELLO Object Literals
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><ObjComponentB <span class="token attr-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">style</span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;"><span class="token script-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span> </span><br /></span></span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"> color<span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">:</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'blue'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">,</span>
background<span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">:</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'gold'</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">/></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">function</span> <span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">ObjComponentB</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>
<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span> <span class="token attr-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">style</span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token script-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">this</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">style</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
Always Listen to Object Change
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Each time <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;"><ObjComponentA></code> is re-rendered a new object literal has to be “created” in-memory. Additionally, this also means that <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;"><ObjComponentB></code> is actually receiving a different <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">style</code> object. Using <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">memo</code> and <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">PureComponent</code> won’t even prevent re-renders here </p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">This is not apply to <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">style</code> props only, but it’s typically where object literals are unwittingly used in React components.</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">This can be easily fixed by naming the object (outside of the component’s body of course!):</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-jsx" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-jsx" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span> myStyle <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
color<span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">:</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'blue'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">,</span>
background<span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">:</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'gold'</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">function</span> <span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">ObjComponentA</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>
<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
Object Literals
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span><span class="token class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">ObjComponentB</span></span> <span class="token attr-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">style</span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token script-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>myStyle<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">/></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">function</span> <span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">ObjComponentB</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>
<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span> <span class="token attr-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">style</span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token script-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">this</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">props</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">style</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
Saved
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><h2 id="use-lt-gt-react-lazy-lt-gt-and-lt-gt-react-suspense-lt-gt" style="background-color: white; box-sizing: border-box; color: #323232; font-family: Inter-Medium, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -0.5px; margin: 30px auto 10px; padding: 0px; width: 745px;">Use <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">React.lazy</span> and <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">React.Suspense</span></h2><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">React app can be faster via code-splitting. This is introduced to React v16 with <a href="https://reactjs.org/docs/code-splitting.html#reactlazy" style="border-bottom: 1px dotted rgb(0, 0, 0); box-sizing: border-box; color: black; text-decoration-line: none; transition: border-bottom-color 0.25s ease 0s;">React.lazy and React.Suspense</a>.</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Code Splitting is nothing but JavaScript client source (eg., your React app code) is broken into smaller chunks, and only loads these chunks in a lazy fashion. Without any code-splitting a single bundle could be very large:</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-markdown" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-markdown" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token list punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">-</span> bundle.js (10MB!)</code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Using code-splitting, this could cause the initial network request for the bundle to be significantly smaller:</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-markdown" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-markdown" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token list punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">-</span> bundle-1.js (5MB)
<span class="token list punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">-</span> bundle-2.js (3MB)
<span class="token list punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">-</span> bundle-3.js (2MB)</code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">The initial network request will “only” need to download 5MB, and it can start showing something interesting to the end user. </p><h3 id="how-code-splitting-this-done-in-react" style="background-color: white; box-sizing: border-box; color: #323232; font-family: Inter-Medium, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -0.5px; margin: 20px auto 10px; padding: 0px; width: 745px;">How code splitting this done in React?</h3><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">If we’re using <a href="https://create-react-app.dev/" style="border-bottom: 1px dotted rgb(0, 0, 0); box-sizing: border-box; color: black; text-decoration-line: none; transition: border-bottom-color 0.25s ease 0s;">Create React App</a>, it’s already configured for code-splitting, so you can simply use <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">React.lazy</span> and <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">React.Suspense.</span> </p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">If we are configuring webpack on ourself it should look like this.</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Here’s a simple example where <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">lazy</span> and <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">Suspense</span> is implemented:</p><div class="code-toolbar" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin-left: auto; margin-right: auto; position: relative; width: 745px;"><div class="context" style="box-sizing: border-box;"><pre class="code-pre language-jsx" style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><code class="code-highlight language-jsx" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">import</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">React</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">,</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span> lazy<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">,</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Suspense</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span> <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">from</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'react'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">import</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Header</span> <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">from</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'./Header'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">import</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Footer</span> <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">from</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'./Footer'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span> AppUsers <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span> <span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">React</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">lazy</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span> <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">import</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'./AppUsers'<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">;</span><br /></span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">function</span> <span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token maybe-class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">MyLazyApp</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">return</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>
<span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span><span class="token class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Header</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span><span class="token class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Suspense</span></span> <span class="token attr-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">fallback</span><span class="token script language-javascript" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token script-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Loading...</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><AppUsers <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">/></span><br /></span></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"> </span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span><span class="token class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Suspense</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><</span><span class="token class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">Footer</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
</span><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token tag" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></</span>div</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">></span></span><span class="token plain-text" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">
);
}</span></code></pre><span style="box-sizing: border-box; font-size: 0px; line-height: 0; opacity: 0; pointer-events: none; position: absolute;"> </span></div><div class="toolbar" style="box-sizing: border-box; opacity: 0; position: absolute; right: 0.2em; top: 0.3em; transition: opacity 0.3s ease-in-out 0s;"><div class="toolbar-item" style="box-sizing: border-box; display: inline-block;"><button style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 0.5em; border-style: initial; border-width: 0px; box-shadow: none; color: #0069ff; cursor: pointer; font-family: inherit; font-size: 0.8em; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; overflow: visible; padding: 0px 0.5em; transition: color 0.2s ease-in-out 0s; user-select: none;">Copy</button></div></div></div><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Notice the <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;">fallback</code> prop. This will be shown to the user immediately while the 2nd bundle chunk is loaded (eg., <code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal; word-spacing: normal;"><AppUsers></code>).</p><h2 id="avoid-frequent-mounting-unmounting" style="background-color: white; box-sizing: border-box; color: #323232; font-family: Inter-Medium, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -0.5px; margin: 30px auto 10px; padding: 0px; width: 745px;">Avoid Frequent Mounting/Unmounting</h2><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">Most of the times we used to make components disappear using a ternary statement (or something similar):</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">In such cases, component will get removed from the DOM it can cause a <a href="https://developers.google.com/speed/docs/insights/browser-reflow" style="border-bottom: 1px dotted rgb(0, 0, 0); box-sizing: border-box; color: black; text-decoration-line: none; transition: border-bottom-color 0.25s ease 0s;">repaint/reflow</a> by the browser. These can be expensive, especially if it causes other HTML elements to shift around.</p><p style="background-color: white; box-sizing: border-box; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0px auto 22px; padding: 0px; width: 745px;">In order to mitigate this, it’s advisable to avoid completely unmounting components. Instead, we can use certain strategies like setting the CSS <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">opacity</span> to zero, or setting CSS <span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; color: inherit; display: inline-block; margin: 1px 0px; padding: 0px 2px;">visibility</span> to “none”. This will keep the component in the DOM, while making it effectively disappear without incurring any performance costs.</p></div>Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com1tag:blogger.com,1999:blog-5972170652479184227.post-8279239766115260292021-05-14T01:51:00.002+05:302021-05-14T01:51:37.089+05:30How can we use Axios with React?<p> Most of UI applications <span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">need to interface with a REST API at some stage in their development to project the data from Services to UI. We have several ways in React to do that process like, </span></p><p><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">1. Using Native Javascript Fetch API.</span></p><p><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">2. Axios</span></p><p><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">Axios is a </span><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">lightweight HTTP client. It </span><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;"> is promise-based, which gives us the ability to take advantage of JavaScript’s </span><code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal;">async</code><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;"> and </span><code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.9375em; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal;">await</code><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;"> for more readable asynchronous code. With axios </span><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">we can also intercept and cancel requests, and there’s built-in client-side protection against cross-site request forgery.</span></p><p><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;"><b><span style="font-size: medium;">PROCESS:</span></b></span></p><p><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">Once we setup running React application in our environment, we can follow below steps to integrate axios with React.</span></p><p><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">Go inside of the project folder and install AXIOS by using below command.</span></p><p><span style="background-color: #f2f2f2; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; white-space: pre;">npm install axios</span></p><p><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">Go to the component file and import Axios into the component</span></p><p><span style="background-color: #f2f2f2; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; white-space: pre;">import axios from "axios"</span></p><p>In an action / component mount case, call the API through axios.</p><pre class="code-pre language-js" style="background: rgb(242, 242, 242); border-radius: 0px 0px 3px 3px; border-top: 0px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal;"><code class="code-highlight language-js" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">useEffect(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span style="color: #545454;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span style="color: #545454;">
axios</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">get</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token template-string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #545454; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span><span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">https://jsonplaceholder.typicode.com/users</span><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span style="color: #545454;">
</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">then</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #545454; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">res</span><span style="color: #545454;"> </span><span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span><span style="color: #545454;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span style="color: #545454;">
</span><span style="color: #545454;"> </span><span style="color: #0069ff;">setUsers</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span style="color: #545454;"> </span><span style="background-color: initial; color: #545454; word-spacing: normal;">res</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #545454; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">data</span><span style="background-color: initial; color: #545454; word-spacing: normal;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none; word-spacing: normal;">;</span><span style="color: #545454;"><br /></span><span style="color: #545454;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span style="color: #545454;">
</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">})</span></code></pre><p><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;">We can do all CRUD related actions like <b>Create, Update, Read and Delete</b> with axios. To achieve respective actions, we will be using methods like <b>get, post, put, delete.</b></span></p><p><span style="background-color: white; color: #333333; font-family: Inter-Regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;"><b>While making post sort of call, we can pass the argument with coma separated.</b></span></p><pre class="code-pre language-js" style="background: rgb(242, 242, 242); border-radius: 0px 0px 3px 3px; border-top: 0px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal;"><pre class="code-pre language-js" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0px 0px 3px 3px; border-top: 0px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal;"><code class="code-highlight language-js" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span><span style="color: #545454;"> user </span><span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span><span style="color: #545454;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span style="color: #545454;">
name</span><span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">:</span><span style="color: #545454;"> </span><span style="color: #0069ff;">"DevelopingUser"</span><span style="color: #545454;">
</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span></code></pre><div><code class="code-highlight language-js" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><br /></span></code></div></pre><pre class="code-pre language-js" style="background: rgb(242, 242, 242); border-radius: 0px 0px 3px 3px; border-top: 0px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal;"><code class="code-highlight language-js" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;">axios<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">post</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token template-string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span><span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">https://jsonplaceholder.typicode.com/users</span><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">,</span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span> user <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">then</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">res</span> <span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
<span class="token console class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">console</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">log</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>res<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token console class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">console</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">log</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>res<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">data</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span></code></pre><p><br /></p><p>We can create Base Instance in Axios when our application is trying to hit the common url for multiple calls. Not only for URL we can use that for any common configurations</p><pre class="code-pre language-js" style="background: rgb(242, 242, 242); border-radius: 0px 0px 3px 3px; border-top: 0px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal;"><code class="code-highlight language-js" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">import</span> axios <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">from</span> <span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">'axios'</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">export</span> <span class="token keyword module" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const API =</span> axios<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">create</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
baseURL<span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">:</span> <span class="token template-string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span><span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">http://jsonplaceholder.typicode.com/</span><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span></span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span></code></pre><p>Once the Instance got created, we can use that instance API variable to make the REST Calls.</p><pre class="code-pre language-js" style="background: rgb(242, 242, 242); border-radius: 0px 0px 3px 3px; border-top: 0px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal;"><code class="code-highlight language-js" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="highlight" style="background: rgba(242, 201, 76, 0.35); border-radius: 3px; box-sizing: border-box; display: inline-block; margin: 1px 0px; padding: 0px 2px;"><span class="token constant" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">API</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">delete</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token template-string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span><span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">users/</span><span class="token interpolation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token interpolation-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">${</span><span class="token interpolation-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span style="color: #0069ff;">userid</span></span><span class="token interpolation-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span></span><span class="token punctuation" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"></span><span style="color: #545454;">
</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">then</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #545454; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">res</span><span style="color: #545454;"> </span><span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span><span style="color: #545454;"> </span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span><span style="color: #545454;">
</span><span class="token console class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">console</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">log</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span style="color: #545454;">res</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span><span style="color: #545454;">
</span><span class="token console class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">console</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">log</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span style="color: #545454;">res</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #545454; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">data</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span><span style="color: #545454;">
</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span></code></pre><p><br /></p><p><span style="font-family: arial;">Integrating async and await with AXIOS. <span style="background-color: white;">The </span><code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; direction: ltr; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal;">await</code><span style="background-color: white;"> keyword resolves the </span><code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; direction: ltr; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal;">promise</code><span style="background-color: white;"> and returns the </span><code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; direction: ltr; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal;">value</code><span style="background-color: white;">. The </span><code style="background: rgb(242, 242, 242); border-radius: 3px; box-sizing: border-box; direction: ltr; hyphens: none; line-height: 22px; padding: 3px; text-shadow: none; white-space: pre; word-break: normal;">value</code><span style="background-color: white;"> can then be assigned to a variable.</span></span></p><p><br /></p><pre class="code-pre language-js" style="background: rgb(242, 242, 242); border-radius: 0px 0px 3px 3px; border-top: 0px; box-sizing: border-box; color: #545454; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 13.6px; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal;"><pre class="code-pre language-js" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin-bottom: 1rem; margin-top: 1rem; overflow-wrap: normal; overflow: auto; padding: 1rem; tab-size: 4; text-shadow: none; word-break: normal;"><code class="code-highlight language-js" style="background: 0px 0px; border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; hyphens: none; line-height: 1.4em; margin: 0px; overflow-wrap: normal; padding: 0px; tab-size: 4; text-shadow: none; word-break: normal; word-spacing: normal;"><span class="token function-variable function" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">handleBtnClick</span> <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span> <span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">async</span> <span class="token parameter" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">event</span> <span class="token arrow operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=></span> <span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">{</span>
event<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">preventDefault</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">const</span> response <span class="token operator" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">=</span> <span class="token keyword" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">await</span> <span class="token constant" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #0069ff; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">API</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">delete</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span><span class="token template-string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span><span class="token string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">users/</span><span class="token interpolation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;"><span class="token interpolation-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">${user</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">id</span><span class="token interpolation-punctuation punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span></span><span class="token template-punctuation string" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #08966b; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">`</span></span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token console class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">console</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">log</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>response<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token console class-name" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">console</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token method function property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #e0276a; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">log</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">(</span>response<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">.</span><span class="token property-access" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">data</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">)</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span>
<span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">}</span><span class="token punctuation" style="background: 0px 0px; border-radius: 0px; box-sizing: border-box; color: #666a71; display: inline; line-height: 1.4em; margin: 0px; padding: 0px; text-shadow: none;">;</span></code></pre></pre>Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-54236455184273170982017-04-21T14:12:00.002+05:302017-04-21T14:12:57.647+05:30Drupal 8 - Steps to Create a Custom Form<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" id="docs-internal-guid-8042ec30-3ffa-bec2-acd7-9089a92749f3" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Lora, serif; font-size: 16px; line-height: 1.5em; margin-bottom: 25px;">
Drupal 8 form API is similar to Drupal 7 Form API. Only difference is, we will be having separate validation and submission forms. </div>
<div dir="ltr" id="docs-internal-guid-8042ec30-3ffa-bec2-acd7-9089a92749f3" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Lora, serif; font-size: 16px; line-height: 1.5em; margin-bottom: 25px;">
Drupal 8 even has some new (HTML 5) elements like "color, email, date, url, range, tel, time, week, month etc. </div>
<div dir="ltr" id="docs-internal-guid-8042ec30-3ffa-bec2-acd7-9089a92749f3" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Lora, serif; font-size: 16px; line-height: 1.5em; margin-bottom: 25px;">
Reference Link for HTML5 elements supported in Drupal 8: <a href="https://www.drupal.org/node/1183606">https://www.drupal.org/node/1183606</a></div>
<div dir="ltr" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Lora, serif; font-size: 16px; line-height: 1.5em; margin-bottom: 25px;">
In Drupal 8 Form classes implement the <b>\Drupal\Core\Form\FormBuilderInterface </b>and the basic workflow of a form is defined by the <b>buildForm</b>, <b>validateForm</b>, and <b>submitForm </b>methods of the interface.</div>
<div dir="ltr" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Lora, serif; font-size: 16px; line-height: 1.5em; margin-bottom: 25px;">
There are a different classes to choose depending on the type of form that we are creating.</div>
<ul style="background-color: white; box-sizing: border-box; color: #333333; font-family: Lato, sans-serif; font-size: 21.6px; margin-bottom: 20px; margin-top: 10px;">
<li dir="ltr" style="box-sizing: border-box; font-family: Lora; font-size: 16px; margin-bottom: 10px;"><div dir="ltr" style="box-sizing: border-box; font-family: Lora, serif; line-height: 1.5em;">
<strong style="box-sizing: border-box;">ConfigFormBase</strong> : For creating system configuration forms like the one found at <b>admin/config/system/site-information</b>.</div>
</li>
<li dir="ltr" style="box-sizing: border-box; font-family: Lora; font-size: 16px; margin-bottom: 10px;"><div dir="ltr" style="box-sizing: border-box; font-family: Lora, serif; line-height: 1.5em;">
<strong style="box-sizing: border-box;">ConfirmFormBase</strong> : For providing users with a form to confirm an action such as deleting a piece of content.</div>
</li>
<li dir="ltr" style="box-sizing: border-box; font-family: Lora; font-size: 16px; margin-bottom: 10px;"><div dir="ltr" style="box-sizing: border-box; font-family: Lora, serif; line-height: 1.5em;">
<strong style="box-sizing: border-box;">FormBase</strong> : The most generic base class for generating forms.</div>
</li>
</ul>
<div>
<span style="color: #333333; font-family: "lora" , serif;">Folder Structure</span></div>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><br /></span></div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgQNQDNRzFT99ST-oNBIull-hGm-CnZ7skYjkwTY9AvB00PP2XKIwuPsI2uNYGUWruUokVqwagiSQamVSUuz9WR4AezM6WMqh9TCpJeGEDjTwVYQordicpBME0UpBchoDwF5XiGu5gV1U/s1600/folder_structure.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgQNQDNRzFT99ST-oNBIull-hGm-CnZ7skYjkwTY9AvB00PP2XKIwuPsI2uNYGUWruUokVqwagiSQamVSUuz9WR4AezM6WMqh9TCpJeGEDjTwVYQordicpBME0UpBchoDwF5XiGu5gV1U/s400/folder_structure.png" width="400" /></a></div>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><br /></span></div>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><br /></span></div>
<div>
<br /></div>
<div>
<span style="color: #333333; font-family: "lora" , serif;">Create a simple Addressbook custom form in Drupal 8</span></div>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><br /></span></div>
<div>
<ul style="text-align: left;">
<li><span style="color: #333333; font-family: "lora" , serif;">Create a folder with the name "addressbook" in \Root\modules\custom\ folder.</span></li>
<li><span style="color: #333333; font-family: "lora" , serif;">Create addressbook.info.yml file with below code.</span></li>
</ul>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><b></b></span><br />
<div style="text-align: left;">
<span style="color: #333333; font-family: "lora" , serif;"><b>name: Addressbook</b></span></div>
<span style="color: #333333; font-family: "lora" , serif;"><b>
<div style="text-align: left;">
description: An address book form to enter addresses.</div>
<div style="text-align: left;">
core: 8.x</div>
<div style="text-align: left;">
package: Custom</div>
<div style="text-align: left;">
type: module</div>
</b></span></div>
</div>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><br /></span></div>
<div>
<div dir="ltr" style="background-color: white; box-sizing: border-box; color: #333333; font-family: Lora, serif; font-size: 16px; line-height: 1.5em; margin-bottom: 25px;">
In Drupal 8 important part of module, theme, or profile is the .info.yml file. It stores metadata about the project. This is almost similar to .info file in Drupal 7.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Lora, serif; font-size: 16px; line-height: 1.5em; margin-bottom: 25px;">
.info file contains name, description, core, package, dependencies, type values in it. The type key, is something new in Drupal 8. It is required and indicates the type of extension, e.g. module, theme or profile.</div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5em; margin-bottom: 25px;">
</div>
<ul style="text-align: left;">
<li><span style="color: #333333; font-family: "lora" , serif;">Create addressbook.routing.yml file with below code.</span></li>
</ul>
<br />
<div>
<span style="color: #333333; font-family: "lora" , serif;"><b>addressbook.form:</b></span></div>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><b></b></span><br />
<div>
<span style="color: #333333; font-family: "lora" , serif;"><b> path: '/addressbook/infoform'</b></span></div>
<span style="color: #333333; font-family: "lora" , serif;"><b>
<div>
defaults:</div>
<div>
_title: 'Addressbook form'</div>
<div>
_form: '\Drupal\addressbook\Form\AddressbookForm'</div>
<div>
requirements:</div>
<div>
_permission: 'access content'</div>
<div>
<br /></div>
<div>
<div style="background-color: white; box-sizing: border-box; font-size: 16px; font-weight: 300; line-height: 1.5em; margin-bottom: 25px;">
Drupal 7 hook_menu() got replaced with this routing system [Creating menus, tabs etc.]. </div>
<div style="background-color: white; box-sizing: border-box; font-size: 16px; font-weight: 300; line-height: 1.5em; margin-bottom: 25px;">
A route is a path which return some sort of content on top of it.</div>
<div dir="ltr" style="background-color: white; box-sizing: border-box; font-size: 16px; line-height: 1.5em; margin-bottom: 25px;">
<span style="font-weight: 300;">For example, '</span>/about-us'<span style="font-weight: 300;"> is a route. When Drupal receives a request, it tries to match the requested path to a route it knows about. If the route is found, then the route's definition is used to return content. Otherwise, Drupal returns a 404.</span></div>
</div>
</b></span></div>
</div>
<div>
<ul style="text-align: left;">
<li><span style="color: #333333; font-family: "lora" , serif;">Create AddressbookForm.php file in \Root\modules\custom\addressbook\src\Form\ folder with below code.</span></li>
</ul>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><b></b></span><br />
<div>
<span style="color: #333333; font-family: "lora" , serif;"><b><?php</b></span></div>
<span style="color: #333333; font-family: "lora" , serif;"><b>
<div>
/**</div>
<div>
* @file</div>
<div>
* Contains \Drupal\addressbook\Form\AddressbookForm.</div>
<div>
*/</div>
<div>
namespace Drupal\addressbook\Form;</div>
<div>
<br /></div>
<div>
use Drupal\Core\Form\FormBase;</div>
<div>
use Drupal\Core\Form\FormStateInterface;</div>
<div>
<br /></div>
<div>
class AddressbookForm extends FormBase {</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>public function getFormId() {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>return 'addressbook_form';</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>public function buildForm(array $form, FormStateInterface $form_state) {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form['full_name'] = array(</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#type' => 'textfield',</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#title' => t('Full Name:'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#required' => TRUE,</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>);</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form['email_id'] = array(</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#type' => 'email',</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#title' => t('Email ID:'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#required' => TRUE,</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>);</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form['contact_number'] = array (</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#type' => 'tel',</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#title' => t('Mobile no'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>);</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form['date_of_birth'] = array (</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#type' => 'date',</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#title' => t('Date of Birth'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#required' => TRUE,</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>);</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form['gender'] = array (</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#type' => 'select',</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#title' => ('Gender'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#options' => array(</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'Female' => t('Female'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'male' => t('Male'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>);</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form['age_confirmation'] = array (</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#type' => 'radios',</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#title' => ('Are you above 18 years old?'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#options' => array(</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'Yes' =>t('Yes'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'No' =>t('No')</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>);</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form['actions']['#type'] = 'actions';</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form['actions']['submit'] = array(</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#type' => 'submit',</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#value' => $this->t('Save'),</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>'#button_type' => 'primary',</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>);</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>return $form;</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>public function validateForm(array &$form, FormStateInterface $form_state) {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (strlen($form_state->getValue('contact_number')) < 10) {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form_state->setErrorByName('contact_number', $this->t('Contact number is too short.'));</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else if (strlen($form_state->getValue('contact_number')) > 10) {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$form_state->setErrorByName('contact_number', $this->t('Contact number is too long.'));</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
<br /></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>public function submitForm(array &$form, FormStateInterface $form_state) {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>drupal_set_message($this->t('Addressbook Information is being submitted!'));</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>foreach ($form_state->getValues() as $key => $value) {</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>drupal_set_message($key . ': ' . $value);</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
}</div>
</b></span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In the above code,</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #333333; font-family: "lora" , serif; font-size: 16px;">First, we are declaring the namespace, the other classes we want to use, and extend the FormBase class.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #333333; font-family: "lora" , serif; font-size: 16px;">Second we are getting code from some other classes, using the <b>use</b> PHP keyword and then the namespace, using the PSR-4 standard, It autoload the classes in the files that correspond to these namespaces</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #333333; font-family: "lora" , serif; font-size: 16px;">Third we are declaring our <b>AddressbookForm </b>Class which extends <b>FormBase</b>.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: #333333; font-family: "lora" , serif;"><span style="background-color: white;">Fourth, we are building a Form using <b>buildForm </b>function.</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: #333333; font-family: "lora" , serif;"><span style="background-color: white;">Fifth, we are Validating Form values using <b>validateForm </b>function</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: #333333; font-family: "lora" , serif;"><span style="background-color: white;">Sixth, on successful entry of form data, we are submitting the form using <b>submitForm </b>function</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: #333333; font-family: "lora" , serif;"><span style="background-color: white;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="color: #333333; font-family: "lora" , serif;">Login to Drupal Backend.</span></li>
<li><span style="color: #333333; font-family: "lora" , serif;">Go to Extend Menu Item "/drupal8/admin/modules"</span></li>
<li><span style="color: #333333; font-family: "lora" , serif;">Enable <b>Addressbook </b>Module.</span></li>
<li><span style="color: #333333; font-family: "lora" , serif;">Access <b>addressbook/infoform</b> URL.</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfCNqhB8DRN0ZIGM636PnDcGTWJpeXUf3hzLLzEDGJo0hChSLK2-Q2WZZhXtKUDhBjFTUGEtqpKZC9S2I5zh1i7lsE6xN0MDOVMWpJl_9k0_lcb5taondhDsnkXktReUknWc0IXbqwJ-U/s1600/addressbook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfCNqhB8DRN0ZIGM636PnDcGTWJpeXUf3hzLLzEDGJo0hChSLK2-Q2WZZhXtKUDhBjFTUGEtqpKZC9S2I5zh1i7lsE6xN0MDOVMWpJl_9k0_lcb5taondhDsnkXktReUknWc0IXbqwJ-U/s400/addressbook.png" width="400" /></a></div>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><br /></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<span style="color: #333333; font-family: "lora" , serif;"><br /></span></div>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-56386794812363301972017-04-20T12:53:00.001+05:302017-04-20T12:56:05.173+05:30SonarQube with Mysql Setup in Windows along with Steps to Project Analysis<div dir="ltr" style="text-align: left;" trbidi="on">
<b>SonarQube Server with Mysql Prerequisites:</b><br />
<br />
<b>Software Requirement:</b><br />
<br />
<ul style="text-align: left;">
<li>Java (Oracle JRE 8 onwards or OpenJDK 8 onwards)</li>
<li>Mysql (5.6 or higher versions)</li>
<ul>
<li><span style="background-color: white;">Us</span><span style="background-color: white; color: #333333; font-family: "arial" , sans-serif; font-size: 14px;">e UTF-8 charset.</span></li>
<li><span style="background-color: white; color: #333333; font-family: "arial" , sans-serif; font-size: 14px;">Only InnoDB Storage Engine.</span></li>
<li><span style="background-color: white; color: #333333; font-family: "arial" , sans-serif; font-size: 14px;">mysql-connector-java jar is supported.</span></li>
</ul>
<li><span style="color: #333333; font-family: "arial" , sans-serif;"><span style="font-size: 14px;">Web browser to Run http://localhost:9000 after SonarQube Installation and server Start.</span></span></li>
</ul>
<br />
<b>Hardware Requirement:</b><br />
1. 1GB of free RAM for the OS.<br />
2. 2GB of RAM to run SonarQube Server.<br />
<br />
Mysql Installation:<br />
<ul style="text-align: left;">
<li>Download Mysql 5.6</li>
<ul>
<li>https://dev.mysql.com/downloads/mysql/5.6.html </li>
</ul>
<li>Install Mysql.</li>
<li>Set Username and Password for the root.</li>
<li>Create a Database called "sonarqube"</li>
<li>Create a user called <b>sonarqube </b>with All Privileges on <b>sonarqube </b>database.</li>
</ul>
<br />
<br />
<b>SonarQube Installation & Starting Server:</b><br />
<ul style="text-align: left;">
<li>Download <b>SonarQube 6.3</b> version.</li>
<ul>
<li><a href="https://www.sonarqube.org/downloads/">https://www.sonarqube.org/downloads/</a> </li>
</ul>
<li>Unzip Downloaded file.</li>
<li>Place <b>SonarQube 6.3</b> folder at any place as per your convenient. </li>
<li>I have kept that folder in <b>D:/softwares/Sonar/</b> folder.</li>
<li>Open <b>sonar.properties</b> file in <b><b>D:/softwares/Sonar/</b>SonarQube 6.3/conf/</b> folder.</li>
<li>Un comment below lines and set Username and Password of Mysql (Line numbers - 14 & 15).</li>
<ul>
<li>sonar.jdbc.username=sonarqube</li>
<li>sonar.jdbc.password=sonarqube</li>
</ul>
<li>Un comment "<b>sonar.jdbc.url</b>" line related to MySQL 5.6 or greater comments (Line Number - 23) and set that line as below.</li>
<ul>
<li>sonar.jdbc.url=jdbc:mysql://localhost:3306/sonarqube?useUnicode=true&characterEncoding=utf8&rewriteBatchedStatements=true&useConfigs=maxPerformance&useSSL=false</li>
</ul>
<li>Apart from those 3 lines, all other lines should be in commented mode. </li>
<li>Based on your processor specific to OS, you will be having different BIT wise operation folders in BIN directory. in my case, i am using 32 bit processor. so, my folder name will be "<b>windows-x86-32</b>".</li>
<li>Start Sonar</li>
<ul>
<li>There are 2 ways to start sonar.</li>
<ul>
<li>Add Sonar specific *.bat files location in Environment Variable.</li>
<ul>
<li style="box-sizing: border-box; padding: 0px 0px 8px;">We can find different shell scripts files (*.bat) such as InstallNTService.bat, StartNTService.bat, StartSonar.bat etc in <b>D:/softwares/Sonar/SonarQube 6.3/bin/<OS_BIT_Processor>/</b> folder.</li>
<li style="box-sizing: border-box; padding: 0px 0px 8px;">Copy the path of this folder, which may look like <b>D:\softwares\Sonar\sonarqube-6.3\bin\windows-x86-32</b>, and append it to “<b>Path</b>” environment variable.</li>
<li style="box-sizing: border-box; padding: 0px 0px 8px;">Open a command prompt, type “<b>StartSonar</b>” command and execute. This would start a web server at default port of <b>9000</b>.</li>
<li style="box-sizing: border-box; padding: 0px 0px 8px;">Open a web browser and access the page, <b>http://localhost:9000.</b></li>
</ul>
<li style="box-sizing: border-box; padding: 0px 0px 8px;">Open a command prompt.</li>
<ul>
<li style="box-sizing: border-box; padding: 0px 0px 8px;">Move to OS_BIT_Processor folder.</li>
<ul>
<li style="box-sizing: border-box; padding: 0px 0px 8px;">D:\softwares\Sonar\sonarqube-6.3\bin></li>
<li style="box-sizing: border-box; padding: 0px 0px 8px;">Type “<b>StartSonar.bat</b>” command and execute. This would start a web server at default port of <b>9000</b>.</li>
</ul>
<li style="box-sizing: border-box; padding: 0px 0px 8px;">Open a web browser and access the page, <b>http://localhost:9000.</b></li>
</ul>
</ul>
</ul>
</ul>
<div>
<b>SonarQube Runner Setup</b></div>
<div>
<ul style="text-align: left;">
<li>Download Sonar Runner.</li>
<ul>
<li>http://repo1.maven.org/maven2/org/codehaus/sonar/runner/sonar-runner-dist/2.4/sonar-runner-dist-2.4.zip</li>
</ul>
<li>Unzip Downloaded file.</li>
<li>Place <b>sonar-runner-2.4</b> folder at any place as per your convenient. </li>
<li>I have kept that folder in <b>D:/softwares/Sonar/ </b>folder.</li>
<li>Update the global settings (database connection, server URL) by editing sonar-runner.properties file in <b><b>D:/softwares/Sonar/</b>sonar-runner-2.4</b>/conf/ folder.</li>
<li>sonar-runner-2.4 file code should look like below.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjsKF4F25KC1wKVKiwsRXzInay8hRrfdD2SULqATKfywvsjr8n1Vpr1HIhctp8odJgyn01oLS8NzrhMvyFqezhtUwqAJon_G__Bj6-nVkYZbk6eXXnLDH4jN9M2PLTnWZxfs-VlFWIRU/s1600/sonar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjsKF4F25KC1wKVKiwsRXzInay8hRrfdD2SULqATKfywvsjr8n1Vpr1HIhctp8odJgyn01oLS8NzrhMvyFqezhtUwqAJon_G__Bj6-nVkYZbk6eXXnLDH4jN9M2PLTnWZxfs-VlFWIRU/s400/sonar.png" width="400" /></a></div>
<div>
<ul style="text-align: left;">
<li>set "<b>SONAR_RUNNER_HOME</b>" Environment variable which points to <b>sonar-runner-2.4 folder</b>.</li>
<ul>
<li>Open Control Panel.</li>
<li>Click on System Link</li>
<li>Click on <b>Advanced System Settings</b> link on Left Navigation.</li>
<li>Click on <b>Environment Variables</b> button on <b>System Properties</b> window.</li>
<li>Under System Variables Create a New variable with below name and Value.</li>
<ul>
<li>Variable Name- SONAR_RUNNER_HOME</li>
<li>Variable Value- D:\softwares\Sonar\sonar-runner-2.4\</li>
</ul>
<li>Append this Environmental variable with Path variable data under user variables for <Username></li>
<ul>
<li>Edit Path Variable under User variables for <Username Section></li>
<li>Append this value to other data.</li>
<ul>
<li>;%SONAR_RUNNER_HOME%\bin</li>
</ul>
</ul>
</ul>
<li>Test Sonar Runner</li>
<ul>
<li>Close all Command Prompt Windows</li>
<li>Open New Command Prompt Window</li>
<li>Run "<b>sonar-runner.bat -h</b>" command.</li>
<li>You should be able to see below data if setup is successful. </li>
</ul>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZxZQSitNtzXPObpB3jyA_YSP3yaKpl3LmSmQ9H4CA25OfGgdYWRzHVWdgpfztKh_ylhEuZ4qbCRSNKGXN58D4EuOdYJAcf41L_4I6d1RME0SEuJQUkevxwR3nnWm88rTjQf6ed3qwTU/s1600/sonar_runner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZxZQSitNtzXPObpB3jyA_YSP3yaKpl3LmSmQ9H4CA25OfGgdYWRzHVWdgpfztKh_ylhEuZ4qbCRSNKGXN58D4EuOdYJAcf41L_4I6d1RME0SEuJQUkevxwR3nnWm88rTjQf6ed3qwTU/s1600/sonar_runner.png" /></a></div>
<div>
<br /></div>
</div>
</div>
<div>
<b>Analyze A Project with SonarQube Runner:</b></div>
<div>
<ul style="text-align: left;">
<li>Open your project root folder.</li>
<li>Create a configuration file with the name <b>sonar<em style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 14px;">-project.properties</em></b></li>
<li><span style="background-color: white; font-family: "arial" , sans-serif; font-size: 14px;">file should contain values representing project name, unique key, what files should test, what files should exclude etc.</span></li>
<li><span style="background-color: white; font-family: "arial" , sans-serif; font-size: 14px;">Example <b>sonar-project.properties</b> file.</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA3xphK-vCLGhEuM0b83_XRU5ZofZ61NgOz1uRUQCHKyPAIR2juvNmNPFDb6_EULfgCqGTXxPU-8BNGs0k_0gEvuTmyOgPvgpiH_rCZbx1TXp8429pgArtTIHzcO6KkA716xIr2_fIi5g/s1600/sonar_properties.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA3xphK-vCLGhEuM0b83_XRU5ZofZ61NgOz1uRUQCHKyPAIR2juvNmNPFDb6_EULfgCqGTXxPU-8BNGs0k_0gEvuTmyOgPvgpiH_rCZbx1TXp8429pgArtTIHzcO6KkA716xIr2_fIi5g/s400/sonar_properties.png" width="400" /></a></div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: "arial" , sans-serif;"><span style="font-size: 14px;">Run Sonar on Project</span></span></li>
<ul>
<li><span style="font-family: "arial" , sans-serif;"><span style="font-size: 14px;">Open Command Prompt</span></span></li>
<li><span style="font-family: "arial" , sans-serif;"><span style="font-size: 14px;">Move to Project Root Folder.</span></span></li>
<li><span style="font-family: "arial" , sans-serif;"><span style="font-size: 14px;">Run "<b>sonar-runner</b>" command.</span></span></li>
</ul>
<li>Now go to http://localhost:9000/ URL.</li>
<li>Click on <b>Projects</b> link from Navigation Menu.</li>
<li>There you can see your Project Name after tests.</li>
<li>You can see overall status of project. Either pass or Fail beside to Project Name.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPwZzbaSzuB2bxoLV7w7f57yw7JkZHmIgV2KEtoLp3O8Rd7hSa_PwG6GBYmt2WQzjHPSXDKIiM2Cl8AeiXPqnaPvgs76Iues-VhrqaD2tHwjN3s7CAFDyTw9Q-3XdNblBLNHW5c7l-z64/s1600/simple_report.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPwZzbaSzuB2bxoLV7w7f57yw7JkZHmIgV2KEtoLp3O8Rd7hSa_PwG6GBYmt2WQzjHPSXDKIiM2Cl8AeiXPqnaPvgs76Iues-VhrqaD2tHwjN3s7CAFDyTw9Q-3XdNblBLNHW5c7l-z64/s400/simple_report.png" width="400" /></a></div>
<div>
<br /></div>
<ul style="text-align: left;">
<li>Click on that project name link and see fill set of test results as per files.</li>
</ul>
<div>
Note: Whenever you want to execute Sonar Tests, make sure,</div>
</div>
</div>
<div>
<ul style="text-align: left;">
<li>Mysql is up and Running.</li>
<li>Sonar Server is up and Running</li>
<ul>
<li>StartSonar.bat</li>
</ul>
</ul>
<div>
In case of any issues with Sonar Sever, you can find logs in LOGS folder.</div>
</div>
<div>
Sonar.log & web.log helps you alot in this process.</div>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-13608462514200879112017-04-20T09:18:00.001+05:302017-04-20T09:18:22.086+05:30java.lang.IllegalStateException: Cannot stop. Current container state was: CONSTRUCTED<div dir="ltr" style="text-align: left;" trbidi="on">
This represents, one or more of our plugins are not compatible with Installed Sonar Version.<br />
<br />
In my case,<br />
<br />
after keeping "<b>sonar-governance-plugin-1.2.0.1659</b>" file in my <b>sonarqube-6.3\extensions\plugins</b> folder, i encountered an issue starting Sonar Server.<br />
<br />
Error That i got on running <b>StartSonar.bat</b><br />
<b><br /></b>
java.lang.IllegalStateException: Cannot stop. Current container state was: CONSTRUCTED<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.picocontainer.lifecycle.DefaultLifecycleState.stopping(DefaultLifecycleState.java:72)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.picocontainer.DefaultPicoContainer.stop(DefaultPicoContainer.java:794)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.picocontainer.DefaultPicoContainer.stop(DefaultPicoContainer.java:799)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.picocontainer.DefaultPicoContainer.stop(DefaultPicoContainer.java:799)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.core.platform.ComponentContainer.stopComponents(ComponentContainer.java:174)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.core.platform.ComponentContainer.stopComponents(ComponentContainer.java:169)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.platformlevel.PlatformLevel.stop(PlatformLevel.java:97)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.Platform.stopLevel234Containers(Platform.java:227)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.Platform.doStop(Platform.java:256)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.web.PlatformServletContextListener.stopQuietly(PlatformServletContextListener.java:57)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.web.PlatformServletContextListener.contextInitialized(PlatformServletContextListener.java:50)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4727)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5189)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1419)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1409)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at java.util.concurrent.FutureTask.run(Unknown Source)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at java.lang.Thread.run(Unknown Source)<br />
2017.04.20 09:02:59 ERROR web[][o.a.c.c.C.[.[.[/]] Exception sending context initialized event to listener instance of class org.sonar.server.platform.web.PlatformServletContextListener<br />
java.lang.IllegalStateException: <b><span style="color: red;">Fail to load plugin Governance [governance]</span></b><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.plugins.ServerExtensionInstaller.installExtensions(ServerExtensionInstaller.java:73)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.platformlevel.PlatformLevel4.start(PlatformLevel4.java:527)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.Platform.start(Platform.java:203)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.Platform.startLevel34Containers(Platform.java:177)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.Platform.doStart(Platform.java:100)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.Platform.doStart(Platform.java:79)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.sonar.server.platform.web.PlatformServletContextListener.contextInitialized(PlatformServletContextListener.java:45)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4727)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5189)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1419)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1409)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at java.util.concurrent.FutureTask.run(Unknown Source)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>at java.lang.Thread.run(Unknown Source)<br />
<br />
After Removing that plugin from the plugins folder, i am able to run <b>StartSonar.bat </b>and able to see SonarQube in <b>http://localhost:9000.</b></div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-20387804827710172262017-04-18T10:13:00.001+05:302017-04-20T09:23:20.517+05:30JIT vs AOT Compilation [Just in Time vs Ahead of Time Compilation]<div dir="ltr" style="text-align: left;" trbidi="on">
JIT - JUST in TIME Compilation<br />
<br />
<ul style="background-color: white; border: 0px; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; margin: 0px 0px 1em 30px; padding: 0px;">
<li style="border: 0px; margin: 0px 0px 0.5em; padding: 0px; word-wrap: break-word;">Compiled in the browser.</li>
<li style="border: 0px; margin: 0px 0px 0.5em; padding: 0px; word-wrap: break-word;">Each file compiled separately.</li>
<li style="border: 0px; margin: 0px 0px 0.5em; padding: 0px; word-wrap: break-word;">No need to build after changing your code and before reloading the browser page.</li>
<li style="border: 0px; margin: 0px; padding: 0px; word-wrap: break-word;">Suitable for local development.</li>
</ul>
<div>
<span style="color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif;"><span style="font-size: 15px;">AOT - Ahead of Time Compilation</span></span></div>
<div>
<span style="color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif;"><span style="font-size: 15px;"><br /></span></span></div>
<div>
<ul style="background-color: white; border: 0px; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; margin: 0px 0px 1em 30px; padding: 0px;">
<li style="border: 0px; margin: 0px 0px 0.5em; padding: 0px; word-wrap: break-word;">Compiled by the machine itself, via the command line (Faster).</li>
<li style="border: 0px; margin: 0px 0px 0.5em; padding: 0px; word-wrap: break-word;">All code compiled together, inlining HTML/CSS in the scripts.</li>
<li style="border: 0px; margin: 0px 0px 0.5em; padding: 0px; word-wrap: break-word;">No need to deploy the compiler (Half of Angular size).</li>
<li style="border: 0px; margin: 0px 0px 0.5em; padding: 0px; word-wrap: break-word;">More secure, original source not disclosed.</li>
<li style="border: 0px; margin: 0px; padding: 0px; word-wrap: break-word;">Suitable for production builds.</li>
</ul>
</div>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-79458919166929567382016-03-31T14:57:00.007+05:302016-03-31T14:57:54.908+05:30GIT Flow Steps<div dir="ltr" style="text-align: left;" trbidi="on">
<ol style="text-align: left;">
<li>Create GIT Account</li>
<li>Install GIT [https://git-scm.com/download/win]</li>
<li>Open GIT Bash</li>
<li>Check GIT Version [<b>git --version</b>]</li>
<li>Generate ssh key [<b>ssh-keygen -t rsa -C "OUR-EMAIL_ID"</b>]</li>
<li>Move to .ssh directory in command line [<b>cd C:\users\YOUR_NAME\.ssh</b>]</li>
<li>Copy Public key to Clipboard [<b>clip < ida_rsa.pub></b>]</li>
<li>Configure Public Key in GIT Account [https://github.com/settings/keys]</li>
<li>Clone GIT Repository: [<b>git clone <YOUR_REPOSITORY_URL></b>]</li>
<li>Move to your project folder [<b>cd "MYPROJECT_FOLDER"</b> - This is Repository Name]</li>
<li>Check Existing Branches [<b>git branch</b>]</li>
<li>Checkout to Master / Respective branch [<b>git checkout master</b>]</li>
<li>Check Branch Status to Pull / Rebase updates [<b>git status</b>]</li>
<li>Pull updates fron Branch [<b>git pull origin master</b>] - Here master is a branch name.</li>
<li>Create a Feature [<b>git flow feature start "YOUR_FEATURE_NAME"</b>] - Generally features will be used to accomplish a small tasks. If git flow feature start forces an error, please execute "git flow init" first</li>
<li>Publish Feature Branch into GIT [<b>git flow feature publish "YOUR_FEATURE_NAME"</b>]</li>
<li>Make all necessary file changes or creation or deletions as per your task.</li>
<li>Before commiting your changes, pull if any updtaes available.</li>
<li>Add your updated files to GIT [<b>git add "CREATED_OR_UPDATED_FILE"</b>]</li>
<li>Commit added files into GIT [<b>git commit -v</b>] - Provide test and save changes and commit.</li>
<li>Then push your branch changes [<b>git push origin "YOUR_FEATURE_NAME"</b>]</li>
<li>Then Pull Request in GIT.</li>
<li>Merge Branch Changes into Master. </li>
<li>Check out to Master branch and delete all unnecessary local Branches. [<b>git branch -d "YOUR_FEATURE_NAME"</b>]</li>
</ol>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-34267582862974375152016-01-14T19:25:00.000+05:302016-01-14T19:25:12.528+05:30Drupal 7 - Open Graph Selected images are not sharing into Facebook when both Image field and Description box contains images.<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Basic Configuration to test and solve this problem:</b><br />Create a content type with One Image Field and Body Field (Those are needed to replicate it)<br /><br /><u><b>Successful Scenarios:</b></u><br /><b>Scenario 1:</b><br />1. Add new content for the above content type with images upload by Image Tool only (Image Field)<br />3. Select image from those uploaded images using Open Graph Configuration and saved the node.<br />4. If we are sharing that article, whatever the image that we have shared, that will get shared in Facebook<br /><br /><b>Scenario 2:</b><br />1. Add new content for the above content type with images upload by body field only (Through Text Editor Media / IMCE)<br />3. Select image from those uploaded images using Open Graph Configuration and saved the node.<br />4. If we are sharing that article, whatever the image that we have shared, that will get shared in Facebook<br /><br /><u><b>Unsuccessful Scenario:</b></u><br />1. Add new content for the above content type with images upload by both image tool and body field (Editor).<br />2. Select an image from those uploaded images using Open Graph Configuration and saved the node.<br />3. If we are sharing that article, whatever the image that we are trying to share, will not get shared into Facebook.<br /><br />The original problem behind this is opengraph_meta module will generate images array with URL, alt and title sort of text using a function called "harvest_images_from_node". this function definition is available in opengraph_meta.common.inc file. after forming the array of images, if we remove duplicate images and order them as needed by system, this image sharing issue will get resolved. To do that follow below steps.<br /><br /><u><b>Solution:</b></u><br />1. Open file <b>opengraph_meta.common.inc</b><br />2. Search for function "<b>harvest_images_from_node</b>".<br />3. there replace return of result stagement with below code.<br /> <b>Existing Line</b>: return $ret;<br /> <b> Update TO:</b><br /> $ret = array_map("unserialize", array_unique(array_map("serialize", $ret))); // Remove Duplicates<br /> $result = array_values($ret); // Reorder them<br /> return $result; // Return Result images.<br /> <br />Now check Unsuccessful Scenario. It will work fine. if it is not working, please clear Facebook cache for existing web pages.</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-85933110716262957932016-01-14T19:05:00.000+05:302016-01-14T19:05:04.066+05:30Drupal 7 - Avoid sending thumbnail images to Facebook using Open Graph Meta Tags<div dir="ltr" style="text-align: left;" trbidi="on">
Using Default Open graph Meta tags module, if we select an image from the list and trying to send to facebook, it tag <b>og:image</b> with thumbnail version. Facebook won't allow lesser dimension images while sharing. So, whatever that we want to display in facebook won't be shared in this case. It might take Logo or any image from Web Page.<br /><br />To Resolve this problem, we can have a below patch code.<br /><br /><u><b>STEP1:</b></u><br />1. Open file <b>opengraph_meta.common.inc</b><br />2. Search for a function which is used to render meta tag data for the given node. function name is "<b>render_data</b>". Line Number:<b>249</b><br />3. Add below code after 258 line [i.e., after if (array_key_exists($field, $this->tags_already_output)) {}] <br />$images = OpenGraphMeta::instance()->harvest_images_from_node($node);<br />if (!empty($images)) {<br /> $image_selector_options = array();<br /> foreach ($images as $url => $image) {<br /> $image_selector_options[$url] = $image;<br /> }<br />}<br />4. Add below code after <b>264 </b>line [i.e., After "case self::IMAGE:" line]<br /> $imageId = is_numeric($v) ? $v : 0;<br />5. Change below line to specified one<br /> <b>Existing line</b>: $v = url(ltrim($v,'/'), array('absolute' => TRUE));<br /> <b>Update to:</b> $v = $image_selector_options[$imageId]['url'];<br />6. Save Changes<br /> <br /><u><b>STEP2:</b></u><br />1. In the same opengraph_meta.common.inc file there is a function to extract image fields. change them to form image from file_create_url instead of image_style_url<br />2. Search for a function "extract_image_fields"<br />3. Change below line to specified one.<br /> Existing line: $url = image_style_url('thumbnail', $fields[$_uri_field]);<br /> Update to: $url = file_create_url($fields[$_uri_field]);<br />4. Save Changes<br /> <br /><u><b>STEP3:</b></u><br />1. In opengraph_meta.module, there is a function which will be used to display thumbnails in admin panel while creating or updating node. we have to update that to take original URL and also update the function to taken first image as default one if nothing got selected.<br />2. Open <b>opengraph_meta.module</b> file<br />3. Change below code to specified one<br /> <b> Existing Code</b><br /> foreach ($images as $image) {<br /> $image_selector_options[$image['url']] = OpenGraphMetaDrupalLayer::theme_selector_image($image);<br /> }<br /> <b>Update to:</b><br /> foreach ($images as $url => $image) {<br /> $image_selector_options[$url] = OpenGraphMetaDrupalLayer::theme_selector_image($image);<br /> }<br /> $old_value = !empty($node->opengraph_meta) ? $node->opengraph_meta[OpenGraphMeta::IMAGE] : '';<br /> $default = $old_value && isset($image_selector_options[$old_value]) ? $old_value : key($image_selector_options);<br /><br />4. Change below line to specified one for taking default value in admin configurations section of node add/update.<br /> <b>Existing Line:</b><br /> '#default_value' => !empty($node->opengraph_meta) ? $node->opengraph_meta[OpenGraphMeta::IMAGE] : '',<br /> <b>Update To:</b><br /> '#default_value' => $default,<br />1. Save changes.<br /><br />Now we can check from both frontend and backend whether images are sending with full width and height or not. After updating these also if you could not able to see changes in sharing image to FB, we have to clear cache from Facebook using <a href="http://chaitanyalella.blogspot.in/2013/10/facebook-clear-cache-for-specific.html" target="_blank">Developer </a>link.</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-65344375358513481042016-01-14T11:17:00.000+05:302016-01-14T11:19:40.103+05:30Create a user with only access to SFTP and not to SSH (Shell Executions)<div dir="ltr" style="text-align: left;" trbidi="on">
<u><b>STEP 1:-</b></u> <br />
Create a Group, which restricts users created under that group are not to move out of their Home Directory. This one we have to do it in <b>sshd_config</b> file.<br />
<br />
This example is with SSH and VSFTPD modules. make sure those are installed in your linux box. <br />
<br />
SSHD_CONFIG location would be in /etc/ssh/sshd_config<br />
<br />
Enable / Add below line in sshd_config file.<br />
Subsystem sftp internal-sftp<br />
<br />
# This section must be placed at the very end of sshd_config<br />
Match Group sftpaccessonly<br />
ChrootDirectory /home/%u<br />
ForceCommand internal-sftp<br />
AllowTcpForwarding no<br />
<br />
<u><b>STEP2:</b></u><br />
Create a Group with the name "sftpaccessonly"<br />
<b>$</b> groupadd sftpaccessonly<br />
<br />
<u><b>STEP3:</b></u><br />
Go to HOME directory<br />
<b>$ </b>cd /home<br />
<br />
Create a User in home directory<br />
<br />
<b>$ </b>adduser <your_user_name><br />
<br />
It prompts you a screen to enter password of the user along with other details like their Full Name, Room Number etc.<br />
Enter all details and Confirm that those details are correct.<br />
Now user got created.<br />
<br />
<u><b>STEP4:</b></u><br />
Add user to the Group "sftpaccessonly"<br />
<b>$</b> usermod <your_user_name> -g sftpaccessonly<br />
<br />
<u><b>STEP5:</b></u><br />
Restrict that specific user to execute any shell commands. To deny SSH shell access, run the following command:<br />
<b>$ </b>usermod <your_user_name> -s /bin/false<br />
<br />
<u><b>STEP 6:</b></u><br />
It is very important that root user is having full access on newly created user account.<br />
<b>$ </b>sudo chown root /home/<your_user_name><br />
<br />
<u><b>STEP 7:</b></u><br />
Add write permissions to the directory <your_user_name> and all its contents for user and deny write access for everybody else.<br />
<b>$ </b>sudo chmod go-w /home/<your_user_name><br />
<br />
<u><b>OTHER STEPS:</b></u><br />
create a directory / directories where user wants to have access to them.<br />
sudo mkdir /home/<your_user_name>/<your_directory_name><br />
<br />
Give Permissions to the user with the specified group<br />
sudo chown <your_user_name>:sftpaccessonly /home/<your_user_name>/<your_directory_name><br />
<br />
Give writable permissions.<br />
sudo chmod ug+rwX /home/<your_user_name>/<your_directory_name><br />
<br />
<u><b>Final STEPS:</b></u><br />
Restart SSH<br />
<b>$ </b>service ssh restart<br />
<br />
Restart vsftpd<br />
<b>$ </b>service vsftpd restart<br />
<br />
Now you can login with the created credentials using SFTP. user can only access to their home directory specific folders which you have provided permissions.<br />
<br />
Same users you can not login through SSH.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-35802964143222869972015-10-15T14:25:00.002+05:302015-10-15T14:25:36.566+05:30504 Gateway Timeout Error in Nginx Server<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
When we are dealing with large Drupal / Wordpress setup in Nginx Server with limited resources, then we will be facing the “<b>504 Gateway Time-out</b>” error.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
There are 2 ways to control / fix this problem.</div>
<ul style="text-align: left;">
<li>By Increasing PHP Execution Time from Nginx level.</li>
<li>Minimize the Code execution time by optimizing server calls (This is with respect to programming).</li>
</ul>
<div style="text-align: left;">
In this Article, i would like to show First point of Increasing PHP Execution Time from Nginx Level.</div>
<div style="text-align: left;">
We can follow below steps to increase the php timeout value. By default it's max execution time will be 30s. Now we will increase that to 500 (These seconds depends on your usage). </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
In General of Apache server, if we increase <b>max_execution_time</b> in php.ini file and restart php server will work. but in Nginx, we have to do changes in 2 more places and restart both PHP-FPM & Nginx.</div>
<div style="text-align: left;">
<br /></div>
<ul style="text-align: left;">
<li>Change <b>max_execution_time</b> in php.ini file.</li>
<ul>
<li>Connect to Linux -> Nginx Server Command Prompt</li>
<li>Open PHP.INI file -> <b>vim /etc/php5/fpm/php.ini</b></li>
<li>Change Max Execution Time to 500 seconds -> <b>max_execution_time = 500 </b><br />
</li>
</ul>
<li> Change <b>request_terminate_timeout</b> in PHP-FPM</li>
<ul>
<li>This change needs to be done only if we have un commented <b>request_terminate_timeout</b> line before. As it is commented by default, it takes value of <b>max_execution_time</b> from php.ini</li>
<ul>
<li>Open www conf file - <b>vim /etc/php5/fpm/pool.d/www.conf</b></li>
<li>Change Request Terminate Timeout value to 500 -><b> request_terminate_timeout = 500</b><br />
</li>
</ul>
</ul>
<li>Change <b>fastcgi_read_timeout</b> value in Nginx Config</li>
<ul>
<li>If we want to increase timeout value only for one site, follow below steps.</li>
<ul>
<li>vim /etc/nginx/sites-available/oursitename.com</li>
<li>location ~ \.php$ {<br />
include /etc/nginx/fastcgi_params;<br />
fastcgi_pass unix:/var/run/php5-fpm.sock;<br />
fastcgi_read_timeout 300; <br />
}</li>
</ul>
<li>If we want to increase time limit for all sites in our server, we can edit main nginx.conf file itself</li>
<ul>
<li>vim /etc/nginx/nginx.conf</li>
<li>Add 'fastcgi_read_timeout' in <b>http{}</b> section<code class="no-highlight"></code></li>
<li><code class="no-highlight">http { </code><br />
<code class="no-highlight"> ---Other Lines of code -- </code><br />
<code class="no-highlight"> fastcgi_read_timeout 500; </code><br />
<code class="no-highlight"> ---Other Lines of code -- </code><br />
<code class="no-highlight">}</code></li>
</ul>
</ul>
<li><code class="no-highlight">Reload <b>PHP-FPM</b> and <b>Nginx</b></code></li>
<ul>
<li><code class="no-highlight">Reload PHP-FPM -> <b>service php5-fpm reload</b> </code></li>
<li><code class="no-highlight">Reload Nginx -> <b>service nginx reload</b></code><code class="no-highlight"></code></li>
</ul>
</ul>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-72267511576056210922015-05-28T15:32:00.003+05:302015-05-28T15:33:31.156+05:30Linux Commands<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<u>Mostly Used Commands:</u></h3>
<h3 style="text-align: left;">
</h3>
vi filename.extension - Open a file in editing mode.<br />
:42 (or) vi +42 filename.extension - Move to a particular in a file<br />
Ctrl-Shift-g - To check the line number where we are in.<br />
/searchstring - Search for a string in a file [Next Occurance of String - Press 'n' , Previous Occurance of string - Press 'Shift-n']<br />
<br />
<h3 style="text-align: left;">
<u>Quitting</u></h3>
<div style="text-align: left;">
:x Exit, saving changes<br />
:q Exit as long as there have been no changes<br />
ZZ Exit and save changes if any have been made<br />
:q! Exit and ignore any changes</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<u>Inserting Text</u></h3>
<div style="text-align: left;">
i Insert before cursor<br />
I Insert before line<br />
a Append after cursor<br />
A Append after line<br />
o Open a new line after current line<br />
O Open a new line before current line<br />
r Replace one character<br />
R Replace many characters</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<u>Motion</u></h3>
<div style="text-align: left;">
h Move left<br />
j Move down<br />
k Move up<br />
l Move right<br />
w Move to next word<br />
W Move to next blank delimited word<br />
b Move to the beginning of the word<br />
B Move to the beginning of blank delimted word<br />
e Move to the end of the word<br />
E Move to the end of Blank delimited word<br />
( Move a sentence back<br />
) Move a sentence forward<br />
{ Move a paragraph back<br />
} Move a paragraph forward<br />
0 Move to the begining of the line<br />
$ Move to the end of the line<br />
1G Move to the first line of the file<br />
G Move to the last line of the file<br />
nG Move to nth line of the file<br />
:n Move to nth line of the file<br />
fc Move forward to c<br />
Fc Move back to c<br />
H Move to top of screen<br />
M Move to middle of screen<br />
L Move to botton of screen<br />
% Move to associated ( ), { }, [ ]</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<u>Deleting Text</u></h3>
<div style="text-align: left;">
Almost all deletion commands are performed by typing d followed by a motion. For example, dw deletes a word. A few other deletes are:<br />
x Delete character to the right of cursor<br />
X Delete character to the left of cursor<br />
D Delete to the end of the line<br />
dd Delete current line<br />
:d Delete current line</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<u>Search for strings</u></h3>
<div style="text-align: left;">
/string Search forward for string<br />
?string Search back for string<br />
n Search for next instance of string<br />
N Search for previous instance of string</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<u>Replace</u></h3>
<div style="text-align: left;">
The search and replace function is accomplished with the :s command. It is commonly used in combination with ranges or the :g command (below).<br />
:s/pattern/string/flags Replace pattern with string according to flags.<br />
g Flag - Replace all occurences of pattern<br />
c Flag - Confirm replaces.<br />
& Repeat last :s command</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<u>Regular Expressions</u></h3>
<div style="text-align: left;">
. (dot) Any single character except newline<br />
* zero or more occurances of any character<br />
[...] Any single character specified in the set<br />
[^...] Any single character not specified in the set<br />
^ Anchor - beginning of the line<br />
$ Anchor - end of line<br />
\< Anchor - begining of word<br />
\> Anchor - end of word<br />
\(...\) Grouping - usually used to group conditions<br />
\n Contents of nth grouping<br />
</div>
<h3 style="text-align: left;">
<u>[...] - Set Examples [A-Z] The SET from Capital A to Capital Z</u></h3>
<div style="text-align: left;">
[a-z] The SET from lowercase a to lowercase z<br />
[0-9] The SET from 0 to 9 (All numerals)<br />
[./=+] The SET containing . (dot), / (slash), =, and +<br />
[-A-F] The SET from Capital A to Capital F and the dash (dashes must be specified first)<br />
[0-9 A-Z] The SET containing all capital letters and digits and a space<br />
[A-Z][a-zA-Z] In the first position, the SET from Capital A to Capital Z<br />
In the second character position, the SET containing all letters<br />
</div>
<h3 style="text-align: left;">
<u>Regular Expression Examples /Hello/ Matches if the line contains the value Hello</u></h3>
<div style="text-align: left;">
/^TEST$/ Matches if the line contains TEST by itself<br />
/^[a-zA-Z]/ Matches if the line starts with any letter<br />
/^[a-z].*/ Matches if the first character of the line is a-z and there is at least one more of any character following it<br />
/2134$/ Matches if line ends with 2134<br />
/\(21|35\)/ Matches is the line contains 21 or 35<br />
Note the use of ( ) with the pipe symbol to specify the 'or' condition<br />
/[0-9]*/ Matches if there are zero or more numbers in the line<br />
/^[^#]/ Matches if the first character is not a # in the line<br />
Notes:<br />
1. Regular expressions are case sensitive<br />
2. Regular expressions are to be used where pattern is specified<br />
</div>
<h3 style="text-align: left;">
<u>Counts</u></h3>
<div style="text-align: left;">
Nearly every command may be preceded by a number that specifies how many times it is to be performed. For example, 5dw will delete 5 words and 3fe will move the cursor forward to the 3rd occurence of the letter e. Even insertions may be repeated conveniently with thismethod, say to insert the same line 100 times.<br />
</div>
<h3 style="text-align: left;">
<u>Ranges</u></h3>
<div style="text-align: left;">
Ranges may precede most "colon" commands and cause them to be executed on a line or lines. For example :3,7d would delete lines 3-7. Ranges are commonly combined with the :s command to perform a replacement on several lines, as with :.,$s/pattern/string/g to make a replacement from the current line to the end of the file.<br />
:n,m Range - Lines n-m<br />
:. Range - Current line<br />
:$ Range - Last line<br />
:'c Range - Marker c<br />
:% Range - All lines in file<br />
:g/pattern/ Range - All lines that contain pattern<br />
</div>
<h3 style="text-align: left;">
<u>Files</u></h3>
<div style="text-align: left;">
:w file Write to file<br />
:r file Read file in after line<br />
:n Go to next file<br />
:p Go to previos file<br />
:e file Edit file<br />
!!program Replace line with output from program<br />
</div>
<h3 style="text-align: left;">
<u>Other</u></h3>
<div style="text-align: left;">
~ Toggle upp and lower case<br />
J Join lines<br />
. Repeat last text-changing command<br />
u Undo last change<br />
U Undo all changes to line</div>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-71819713636325719182014-07-08T18:36:00.003+05:302014-07-08T18:40:04.863+05:30Drupal 7 - CKEditor - Create Custom Styles.<div dir="ltr" style="text-align: left;" trbidi="on">
To Create Our Own Styles to display them in CKEditor, we have to follow below mentioned steps.<br />
<br />
<b>Adding Styles Drop down to CKEditor:</b><br />
<ul style="text-align: left;">
<li>By default, CKEditor will not be having option to select styles.</li>
<li>Add styles down to editor by configuring CKEditor Settings.</li>
<ul>
<li>Go to Configuration -> Content Authoring -> CKEditor (admin/config/content/ckeditor)</li>
</ul>
<ul>
<li>Select <b>Edit </b>option related to the Profile Which you are using in your application. In my case i am using Full Profile. So, clicking on Edit option related to <b>Full </b>Profile (admin/config/content/ckeditor/edit/Full)</li>
<li>Expand <b>Edit Appearance</b> fieldset by clicking on <b> Edit Appearance</b> toggle set.</li>
<li>Place Styles Drop down into Used Buttons region from Full Buttons Region</li>
</ul>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwOUD8QqFMwFLU-1p-OIjKhwjRz05b4UrQaJ2p9mXYyfQNAqgvWa2ufHnVgc5Ml6Q9TshGrREfz8GtLp0ClpVfMjWkhjnpa7HHI5UCSSvYxhIRfSsCnbSkC5kCn0yvNxwfVeKgyEnBGA/s1600/styles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwOUD8QqFMwFLU-1p-OIjKhwjRz05b4UrQaJ2p9mXYyfQNAqgvWa2ufHnVgc5Ml6Q9TshGrREfz8GtLp0ClpVfMjWkhjnpa7HHI5UCSSvYxhIRfSsCnbSkC5kCn0yvNxwfVeKgyEnBGA/s1600/styles.png" height="200" width="400" /></a></div>
<ul style="text-align: left;"><ul>
<li> Click on <b>Save </b>button at the bottom of page.</li>
</ul>
</ul>
<b>Create Custom Styles:</b><br />
<ul style="text-align: left;">
<li>Custom CSS can be created from <b>ckeditor.styles.js</b> file. </li>
<li>This file by default got located in /sites/all/modules/ckedior/ckeditor.styles.js.</li>
<li>Copy the file and place it in your user current theme folder. In my case my UI theme is bartik. So, i am placing ckeditor.styles.js file into /themes/bartik/ckeditor.styles.js.</li>
<li>Open the file.</li>
<li>Remove unnecessary styles from list.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKWhv2F9DARtFGsjn-mp3glJ_0Muurq2zQtpBzONhj4xb_CAgl6QF0-XDAVmdGc9ECDRtZFRhDJhSPQfE8hmM9obOPux5N29r3ZhGVMfKsfokYUi_uSKIr3Sz8Brk_37ahH-kMUI2VZ0E/s1600/styles_sample_file.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKWhv2F9DARtFGsjn-mp3glJ_0Muurq2zQtpBzONhj4xb_CAgl6QF0-XDAVmdGc9ECDRtZFRhDJhSPQfE8hmM9obOPux5N29r3ZhGVMfKsfokYUi_uSKIr3Sz8Brk_37ahH-kMUI2VZ0E/s1600/styles_sample_file.png" height="185" width="400" /></a></div>
<br />
<ul style="text-align: left;">
<li>Add your own styles.</li>
<ul>
<li>Example: If you want add "<b>cinimatography</b>" class to selected text with an additional div added to it, use below code.</li>
<ul>
<li>{ name : 'Cinematography' , element : 'div', attributes : { 'class' : '<b>cinimatography</b>' } },</li>
</ul>
<li>Name: This value will get displayed in CKeditor's Styles Drop down.</li>
<li>Element: Tag will be added to the selected text.</li>
<li>attributes: We can able add classes to the elements.</li>
<li>styles: We can able to add property value pairs. Example, color, background-color etc. </li>
</ul>
<li>After adding all the necessary styles, you can Save the file.</li>
</ul>
<b>Make sure our Custom Styles get displayed in CKEditor Properly:</b> <br />
<ol style="text-align: left;"><ul>
<li>To Display our custom CSS in Styles drop down, first we have to tell the CKEditor to consider ckeditor.styles.js file from our theme folder. To do that,</li>
<li> Go to Configuration -> Content Authoring -> CKEditor (admin/config/content/ckeditor)</li>
<li>Select <b>Edit </b>option
related to the Profile Which you are using in your application. In my
case i am using Full Profile. So, clicking on Edit option related to <b>Full </b>Profile (admin/config/content/ckeditor/edit/Full)</li>
</ul>
<ul>
<li>Expand CSS fieldset by clicking on CSS toggle set.</li>
<li>There you could able to see different options. We have to configure them.</li>
<ul>
<li><span style="background-color: white; color: #333333; display: inline ! important; float: none; font-family: 'Lucida Grande','Lucida Sans Unicode',sans-serif; font-size: 13px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 20.0063px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">Change </span><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #333333; display: inline !important; float: none; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 20.006303787231445px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">Predefined styles </span><span style="background-color: white; color: #333333; display: inline ! important; float: none; font-family: 'Lucida Grande','Lucida Sans Unicode',sans-serif; font-size: 13px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 20.0063px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">to</span><br /><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #222222; display: inline !important; float: none; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: auto; word-spacing: 0px;">Define path to ckeditor.styles.js</span></li>
<li><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #222222; display: inline !important; float: none; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: auto; word-spacing: 0px;"> </span><span style="background-color: white; color: #333333; display: inline ! important; float: none; font-family: 'Lucida Grande','Lucida Sans Unicode',sans-serif; font-size: 13px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 20.0063px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">Set </span><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #333333; display: inline !important; float: none; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 20.006303787231445px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">Predefined styles path </span><span style="background-color: white; color: #333333; display: inline ! important; float: none; font-family: 'Lucida Grande','Lucida Sans Unicode',sans-serif; font-size: 13px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 20.0063px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">to <b>%tckeditor.styles.js?v1</b></span><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #333333; display: inline !important; float: none; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 20.006303787231445px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"> (</span><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #333333; display: inline !important; float: none; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 20.006303787231445px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><code style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #666666; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 14.779858589172363px; margin: 0.5em 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">%t</code><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #666666; display: inline !important; float: none; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 14.779858589172363px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><span class="Apple-converted-space"> </span>– path to current user theme. By Default Drupal 7 uses <b>bartik </b></span></span><span style="background-color: white; color: #333333; display: inline ! important; float: none; font-family: 'Lucida Grande','Lucida Sans Unicode',sans-serif; font-size: 13px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 20.0063px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #666666; display: inline !important; float: none; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 14.779858589172363px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">theme</span></span><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #333333; display: inline !important; float: none; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 20.006303787231445px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">. </span><span style="background-color: white; color: #333333; display: inline ! important; float: none; font-family: 'Lucida Grande','Lucida Sans Unicode',sans-serif; font-size: 13px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 20.0063px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">If you did not enable any other theme, your theme would be bartik only.</span><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #333333; display: inline !important; float: none; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 20.006303787231445px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">)</span></li>
</ul>
<li>Expand <b>Advanced Options</b> fieldset by clicking on <b>Advanced Options</b> toggle set.</li>
<li>There you could able to see <b>Custom JavaScript configuration</b> Text area. </li>
<li>Add <b>config.allowedContent = true;</b> line into that text area. This option is used to allow CKEditor to hold the classes, styles that we are adding using editor.</li>
<li>After making all changes. Save the Configuration form.</li>
</ul>
</ol>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJoz3FGW7m3pMbn5fj38Yv8wPXdDhWyB7QxMxIt20T9ZUgV7hRCPNMG3GlESLTTPb03arDDNop3wKe8P1W8z5K_t957h7SUB8IkOkuRiXe4TAD8kc_3bl98KuTDMEfv2vZWygFSZ37Ko/s1600/configs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJoz3FGW7m3pMbn5fj38Yv8wPXdDhWyB7QxMxIt20T9ZUgV7hRCPNMG3GlESLTTPb03arDDNop3wKe8P1W8z5K_t957h7SUB8IkOkuRiXe4TAD8kc_3bl98KuTDMEfv2vZWygFSZ37Ko/s1600/configs.png" height="151" width="400" /></a></div>
<br />
<b>Go to Content Add / Edit Page. See that new updates available under Styles Drop Down. </b><br />
<br /></div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-65243362894796090762014-04-01T19:56:00.002+05:302014-04-01T19:56:52.454+05:30HTML5 LocalStorage vs Cookies?<div dir="ltr" style="text-align: left;" trbidi="on">
Cookies are having limited Storage Capacity upto <b>4096 Bytes</b>.<br />
Local Storage is having capacity to store data upto <b>5MB</b><br />
<br />
Using Local Storage we no need to parse a string to get data.
Instead you can make a call for the variable name and it's value is returned. The same applies
with creating and deleting data as well.<br />
<br />
Local Storage Is <strong>not</strong> sent with every HTTP request.<br />
Cookies are sent with every HTTP request.<br />
<br />
Each domain stores all its cookies in a single string, which can make parsing data
difficult. </div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-63499171373879860312014-04-01T19:50:00.000+05:302014-04-01T19:50:01.271+05:30JQuery $ vs $.fn?<div dir="ltr" style="text-align: left;" trbidi="on">
<b>$.fn</b> points to the <b>jQuery.prototype</b>. Any methods or properties we add to it become available to all instance of the jQuery wrapped objects.<br />
<br />
<br />
<br />
<b>$.fn</b> we will be using to create plugins and can be called using <b>$(<someselector>).pluginname()</b>;<br /><br /><b>$.something</b> adds a property or function to the <b>jQuery </b>object itself.<br /><br />Use the first form<b> $.fn.something</b> when we're dealing with DOM elements on the page, and our plugin does something to the elements.<br />
<br />
Use <b>$.something</b> When the plugin has nothing to do with the DOM elements. </div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-9009189984224546522014-03-04T18:04:00.000+05:302014-03-04T18:07:38.793+05:30IIS - NON WWW to WWW URL Redirection.<div dir="ltr" style="text-align: left;" trbidi="on">
URL Redirection using IIS 7.0 / 7.5.<br />
In IIS server, we have an option called URL Rewrite.<br />
<br />
Steps to Redirect an URL:<br />
--------------------------<br />
<br />
<ul style="text-align: left;">
<li>Open IIS Manager (Internet Information Services Manager).</li>
<li>Double Click on URL Rewrite Icon.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTHFMZcEghDt0zS6dkOp_ngqZWN2A3Af4s1hRiB0A7r5vnRBnKjkF99V1B6_GjH-R9yh7mtYyMXXG8_cmDLsKzCk9r2otmUu7DDR-qOZYAplAMAyhZkGMxyi325w6QeMLKGJEMyn7qlo/s1600/screen1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTHFMZcEghDt0zS6dkOp_ngqZWN2A3Af4s1hRiB0A7r5vnRBnKjkF99V1B6_GjH-R9yh7mtYyMXXG8_cmDLsKzCk9r2otmUu7DDR-qOZYAplAMAyhZkGMxyi325w6QeMLKGJEMyn7qlo/s1600/screen1.png" height="268" width="400" /></a></div>
<br />
<ul style="text-align: left;">
<li>Click on <b>Add Rules</b> link under <b>Actions Pane</b> on Right Side bar.</li>
<li>Select <b>Blank Rule</b> option from the Popup window and click on <b>OK</b></li>
<li>Provide Rule Name as "<b>Non www mysitename.com to www</b>"</li>
<li>Select Match URL using "<b>wildcards</b>".</li>
<li>Expand Conditions box</li>
<ul>
<li>Click on <b>Add Condition</b> link on right sidebar.</li>
<li>Make Condition input as <b>{HTTP_HOST}</b></li>
<li>Select Input string as "<b>Matches the Pattern</b>"</li>
<li>pattern as <b>mysitename.com</b></li>
<li>Click on OK</li>
</ul>
<li>Set Action under Action Box</li>
<ul>
<li>Select Action Type as "<b>Redirect</b>"</li>
<li>Fill Redirect URL as "<b>http://www.mysitename.com/{R:0}</b>" under Action Properties Section.</li>
<li>Check <b>Append Query String</b> Checkbox</li>
<li>Select Redirect Type as "<b>Permanent 301</b>"</li>
</ul>
<li>Click on <b>Apply</b> link on Right Side bar</li>
</ul>
<br />
<b>Using Simple Text Editor Also we can Redirect the URL:</b><br />
---------------------------------------------------------------<br />
<br />
<b>Wildcard based redirection:</b><br />
<br />
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;"><</span><span style="color: maroon;">rewrite</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">rules</span><span style="color: blue;">></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">rule</span> <span style="color: red;">name</span><span style="color: blue;">="Non www mysitename.com to www"</span> <span style="color: red;">patternSyntax</span><span style="color: blue;">="Wildcard"</span> <span style="color: red;">stopProcessing</span><span style="color: blue;">="true"</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">match</span> <span style="color: red;">url</span><span style="color: blue;">="*"</span> <span style="color: blue;">/></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">conditions</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">add</span> <span style="color: red;">input</span><span style="color: blue;">="{HTTP_HOST}"</span> <span style="color: red;">pattern</span><span style="color: blue;">="mysitename.com"</span> <span style="color: blue;">/></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"></</span><span style="color: maroon;">conditions</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">action</span> <span style="color: red;">type</span><span style="color: blue;">="Redirect"</span> <span style="color: red;">url</span><span style="color: blue;">="http://www.mysitename.com/{R:0}"</span> <span style="color: blue;">/></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"></</span><span style="color: maroon;">rule</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"></</span><span style="color: maroon;">rules</span><span style="color: blue;">></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;"></</span><span style="color: maroon;">rewrite</span><span style="color: blue;">></span></pre>
<br />
<b>Regular Expression based URL redirection:</b><br />
<br />
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;"><</span><span style="color: maroon;">rewrite</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">rules</span><span style="color: blue;">></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">rule</span> <span style="color: red;">name</span><span style="color: blue;">="</span><span style="color: blue;"><span style="color: blue;">Non www mysitename.com to www</span>"</span> <span style="color: red;">patternSyntax</span><span style="color: blue;">="ECMAScript"</span> <span style="color: red;">stopProcessing</span><span style="color: blue;">="true"</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">match</span> <span style="color: red;">url</span><span style="color: blue;">=".*"</span> <span style="color: blue;">/></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">conditions</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">add</span> <span style="color: red;">input</span><span style="color: blue;">="{HTTP_HOST}"</span> <span style="color: red;">pattern</span><span style="color: blue;">="^</span><span style="color: blue;"><span style="color: blue;">mysitename</span>.com$"</span> <span style="color: blue;">/></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"></</span><span style="color: maroon;">conditions</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"><</span><span style="color: maroon;">action</span> <span style="color: red;">type</span><span style="color: blue;">="Redirect"</span> <span style="color: red;">url</span><span style="color: blue;">="http://www.</span><span style="color: blue;"><span style="color: blue;">mysitename</span>.com/{R:0}"</span> <span style="color: blue;">/></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"></</span><span style="color: maroon;">rule</span><span style="color: blue;">></span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;"></</span><span style="color: maroon;">rules</span><span style="color: blue;">></span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;"></</span><span style="color: maroon;">rewrite</span><span style="color: blue;">></span></pre>
<br /></div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-20612343283803257422014-03-01T11:13:00.003+05:302014-03-01T11:13:58.529+05:30Explain lifecycle of a JSP?<div dir="ltr" style="text-align: left;" trbidi="on">
A JSP Lifecycle consists of following phases:<br />
<ul class="list">
<li><b>Compilation</b>: When a browser asks for a JSP, the JSP engine
first checks to see whether it needs to compile the page. If the page
has never been compiled, or if the JSP has been modified since it was
last compiled, the JSP engine compiles the page.<br />
The compilation process involves three steps:<br />
</li>
<ul class="list">
<li>Parsing the JSP.</li>
<li>Turning the JSP into a servlet.</li>
<li>Compiling the servlet.</li>
</ul>
</ul>
<ul class="list">
<li><b>Initialization:</b> When a container loads a JSP it invokes the jspInit() method before servicing any requests</li>
</ul>
<ul class="list">
<li><b>Execution:</b> Whenever a browser requests a JSP and the page
has been loaded and initialized, the JSP engine invokes the
_jspService() method in the JSP.The _jspService() method of a JSP is
invoked once per a request and is responsible for generating the
response for that request and this method is also responsible for
generating responses to all seven of the HTTP methods ie. GET, POST,
DELETE etc.</li>
</ul>
<ul class="list">
<li><b>Cleanup:</b> The destruction phase of the JSP life cycle
represents when a JSP is being removed from use by a container.The
jspDestroy() method is the JSP equivalent of the destroy method for
servlets.</li>
</ul>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-29523962193346093322014-03-01T11:12:00.004+05:302014-03-01T11:12:52.677+05:30What are the advantages of JSP over Server-Side Includes (SSI)?<div dir="ltr" style="text-align: left;" trbidi="on">
SSI is really only intended for simple inclusions, not for "real"
programs that use form data, make database connections, and the like.</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-91628193095126496162014-03-01T11:12:00.001+05:302014-03-01T11:12:12.849+05:30What are the advantages of JSP over Pure Servlets?<div dir="ltr" style="text-align: left;" trbidi="on">
JSP is more convenient to write (and to modify!) regular HTML than to
have plenty of println statements that generate the HTML. Other
advantages are:<br />
<ul class="list">
<li>Embedding of Java code in HTML pages.</li>
<li>Platform independence.</li>
<li>Creation of database-driven Web applications.</li>
<li>Server-side programming capabilities.</li>
</ul>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-8358704907509445702014-03-01T11:10:00.004+05:302014-03-01T11:10:45.764+05:30What are the advantages of JSP over Active Server Pages (ASP)?<div dir="ltr" style="text-align: left;" trbidi="on">
JSP is portable to other operating systems and non-Microsoft Web servers.</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-29145845459908371452014-03-01T11:09:00.003+05:302014-03-01T11:09:47.592+05:30What are advantages of using JSP?<div dir="ltr" style="text-align: left;" trbidi="on">
JSP offer several advantages as listed below:<br />
<ul class="list">
<li>Performance is significantly better because JSP allows embedding Dynamic Elements in HTML Pages itself.</li>
</ul>
<ul class="list">
<li>JSP are always compiled before it's processed by the server
unlike CGI/Perl which requires the server to load an interpreter and the
target script each time the page is requested.</li>
</ul>
<ul class="list">
<li>JavaServer Pages are built on top of the Java Servlets API, so
like Servlets, JSP also has access to all the powerful Enterprise Java
APIs, including JDBC, JNDI, EJB, JAXP etc.</li>
</ul>
<ul class="list">
<li>JSP pages can be used in combination with servlets that handle
the business logic, the model supported by Java servlet template
engines.</li>
</ul>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-72384779396704184712014-03-01T11:08:00.003+05:302014-03-01T11:08:34.945+05:30What are JSTL formatting tags ?<div dir="ltr" style="text-align: left;" trbidi="on">
The JSTL formatting tags are used to format and display text, the
date, the time, and numbers for internationalized Web sites.<br />
<br />
Following
is the syntax to include Formatting library in our JSP:<br />
<pre class="prettyprint prettyprinted"><span class="pun"><%@</span><span class="pln"> taglib prefix</span><span class="pun">=</span><span class="str">"fmt"</span><span class="pln">
uri</span><span class="pun">=</span><span class="str">"http://java.sun.com/jsp/jstl/fmt"</span><span class="pln"> %></span></pre>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-7623197778564461122014-03-01T11:08:00.000+05:302014-03-01T11:08:01.745+05:30What are JSTL SQL tags?<div dir="ltr" style="text-align: left;" trbidi="on">
The JSTL SQL tag library provides tags for interacting with
relational databases (RDBMSs) such as Oracle, mySQL, or Microsoft SQL
Server.<br />
<br />
Following is the syntax to include JSTL SQL library in our JSP:<br />
<br />
<pre class="prettyprint prettyprinted"><span class="pun"><%@</span><span class="pln"> taglib prefix</span><span class="pun">=</span><span class="str">"sql"</span><span class="pln">
uri</span><span class="pun">=</span><span class="str">"http://java.sun.com/jsp/jstl/sql"</span><span class="pln"> %></span></pre>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-56687004963344488902014-03-01T11:07:00.001+05:302014-03-01T11:07:27.139+05:30What are JSTL XML tags?<div dir="ltr" style="text-align: left;" trbidi="on">
The JSTL XML tags provide a JSP-centric way of creating and
manipulating XML documents. Following is the syntax to include JSTL XML
library in our JSP.<br />
<br />
<br />
<pre class="prettyprint prettyprinted"><span class="pun"><%@</span><span class="pln"> taglib prefix</span><span class="pun">=</span><span class="str">"x"</span><span class="pln">
uri</span><span class="pun">=</span><span class="str">"http://java.sun.com/jsp/jstl/xml"</span><span class="pln"> %></span></pre>
</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0tag:blogger.com,1999:blog-5972170652479184227.post-59166610771766500072014-03-01T11:06:00.003+05:302014-03-01T11:06:15.290+05:30How can we disable EL ?<div dir="ltr" style="text-align: left;" trbidi="on">
We can disable using isELIgnored attribute of the page directive:<br />
<pre class="prettyprint prettyprinted"><span class="pln">
</span><span class="pun"><%@</span><span class="pln"> page isELIgnored </span><span class="pun">=</span><span class="str">"true|false"</span><span class="pln"> %></span></pre>
<pre class="prettyprint prettyprinted"><span class="pln">
</span></pre>
If it is true, EL expressions are ignored when they appear in static
text or tag attributes.<br />
If it is false, EL expressions are evaluated by
the container.</div>
Fullstack Technology Guidehttp://www.blogger.com/profile/16396968883184471142noreply@blogger.com0