{"id":2915,"date":"2026-02-04T11:38:59","date_gmt":"2026-02-04T11:38:59","guid":{"rendered":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/?p=2915"},"modified":"2026-02-05T05:28:41","modified_gmt":"2026-02-05T05:28:41","slug":"first-customization","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/kivicare-lite\/documentation\/developer-tool\/getting-statrted\/first-customization\/","title":{"rendered":"First Customization"},"content":{"rendered":"<div class=\"nolwrap\">\n<p>Let\u2019s make your <strong>first change<\/strong> to KiviCare and watch <strong>Hot Module Replacement (HMR)<\/strong> in action.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What You\u2019ll Learn<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edit a React component<\/li>\n\n\n\n<li>See live changes using HMR<\/li>\n\n\n\n<li>Build the project for production<\/li>\n\n\n\n<li>Understand the development workflow<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Prerequisites<\/strong><\/h2>\n\n\n\n<p>Make sure:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dev server is running \u2192 <code>npm run dev<\/code><\/li>\n\n\n\n<li>KiviCare dashboard is open in the browser<\/li>\n\n\n\n<li>Your code editor is ready<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Find a Component to Edit<\/strong><\/h2>\n\n\n\n<p>We\u2019ll modify the <strong>Dashboard homepage<\/strong>.<\/p>\n\n\n\n<p><strong>File:<\/strong><br><code>app\/dashboard\/views\/dashboard\/Dashboard.jsx<\/code><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your code editor<\/li>\n\n\n\n<li>Go to <code>app\/dashboard\/views\/dashboard\/<\/code><\/li>\n\n\n\n<li>Open <strong>Dashboard.jsx<\/strong><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Make a Simple Change<\/strong><\/h2>\n\n\n\n<p>Locate the main heading and update it.<\/p>\n\n\n\n<p><strong>Before<\/strong><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">&lt;h1&gt;Dashboard&lt;\/h1&gt;\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>After<\/strong><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">&lt;h1&gt;Dashboard - Custom Extended Version&lt;\/h1&gt;\n&lt;p&gt;Welcome to my customized KiviCare installation!&lt;\/p&gt;\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 3: See HMR in Action<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Save the file<\/li>\n\n\n\n<li>Switch to your browser<\/li>\n\n\n\n<li>Watch the update appear instantly<\/li>\n<\/ol>\n\n\n\n<p><strong>What happened behind the scenes?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vite detected the file change<\/li>\n\n\n\n<li>It pushed the update through WebSocket<\/li>\n\n\n\n<li>React hot-reloaded the component<\/li>\n\n\n\n<li>No full page reload<\/li>\n\n\n\n<li>No state loss<\/li>\n<\/ul>\n\n\n\n<p>This is the power of <strong>Hot Module Replacement<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 4: Add Custom Styling<\/strong><\/h2>\n\n\n\n<p>Now let\u2019s style the section.<\/p>\n\n\n\n<p><strong>File:<\/strong><br><code>app\/dashboard\/assets\/scss\/custom.scss<\/code><\/p>\n\n\n\n<p>Add:<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">.custom-welcome {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  padding: 2rem;\n  border-radius: 12px;\n  margin-bottom: 2rem;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n\n  h1 {\n    color: white;\n    margin-bottom: 0.5rem;\n  }\n\n  p {\n    color: rgba(255, 255, 255, 0.9);\n    font-size: 1.1rem;\n  }\n}\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                            <span class=\"line-number\">7<\/span>\n                                            <span class=\"line-number\">8<\/span>\n                                            <span class=\"line-number\">9<\/span>\n                                            <span class=\"line-number\">10<\/span>\n                                            <span class=\"line-number\">11<\/span>\n                                            <span class=\"line-number\">12<\/span>\n                                            <span class=\"line-number\">13<\/span>\n                                            <span class=\"line-number\">14<\/span>\n                                            <span class=\"line-number\">15<\/span>\n                                            <span class=\"line-number\">16<\/span>\n                                            <span class=\"line-number\">17<\/span>\n                                            <span class=\"line-number\">18<\/span>\n                                            <span class=\"line-number\">19<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 5: Apply the Styling<\/strong><\/h2>\n\n\n\n<p>Update your JSX:<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">&lt;div&gt;\n  &lt;h1&gt;Dashboard - Custom Extended Version&lt;\/h1&gt;\n  &lt;p&gt;Welcome to my customized KiviCare installation!&lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p>Save and view the styled result instantly.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 6: Add Interactivity<\/strong><\/h2>\n\n\n\n<p>Let\u2019s add a button with a toast message.<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">import React, { useState } from &#039;react&#039;;\nimport { Button } from &#039;react-bootstrap&#039;;\nimport { toast } from &#039;react-toastify&#039;;\n\nconst handleWelcome = () =&gt; {\n  toast.success(&#039;Welcome to KiviCare Extended Version!&#039;);\n};\n\nreturn (\n  &lt;div&gt;\n    &lt;h1&gt;Dashboard - Custom Extended Version&lt;\/h1&gt;\n    &lt;p&gt;Welcome to my customized KiviCare installation!&lt;\/p&gt;\n    &lt;Button&gt;\n      Click to Welcome yourself!\n    &lt;\/Button&gt;\n  &lt;\/div&gt;\n);\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                            <span class=\"line-number\">7<\/span>\n                                            <span class=\"line-number\">8<\/span>\n                                            <span class=\"line-number\">9<\/span>\n                                            <span class=\"line-number\">10<\/span>\n                                            <span class=\"line-number\">11<\/span>\n                                            <span class=\"line-number\">12<\/span>\n                                            <span class=\"line-number\">13<\/span>\n                                            <span class=\"line-number\">14<\/span>\n                                            <span class=\"line-number\">15<\/span>\n                                            <span class=\"line-number\">16<\/span>\n                                            <span class=\"line-number\">17<\/span>\n                                            <span class=\"line-number\">18<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p>Save and click the button to test.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 7: Build for Production<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Stop the dev server \u2192 <code>Ctrl + C<\/code><\/li>\n\n\n\n<li>Run:<\/li>\n<\/ol>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run build\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p>This generates optimized files inside <code>dist\/<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 8: Test the Production Build<\/strong><\/h2>\n\n\n\n<p>With the dev server stopped:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Refresh your WordPress site<\/li>\n\n\n\n<li>Your changes should still appear<\/li>\n\n\n\n<li>Open DevTools \u2192 Network<\/li>\n\n\n\n<li>Confirm assets load from <code>dist\/<\/code> (not localhost:8080)<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Understanding the Workflow<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Development Mode<\/h3>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run dev\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<ul class=\"wp-block-list\">\n<li>Dev server runs<\/li>\n\n\n\n<li>HMR enabled<\/li>\n\n\n\n<li>Fast rebuilds<\/li>\n\n\n\n<li>Debug-friendly<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Production Mode<\/h3>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run build\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<ul class=\"wp-block-list\">\n<li>Code minified<\/li>\n\n\n\n<li>Optimized assets<\/li>\n\n\n\n<li>Files stored in <code>dist\/<\/code><\/li>\n\n\n\n<li>Ready for deployment<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Best Practices<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <code>__()<\/code> for translatable strings<\/li>\n\n\n\n<li> Prefer <code>react-bootstrap<\/code> components<\/li>\n\n\n\n<li> Follow React hooks rules<\/li>\n\n\n\n<li> Keep components small<\/li>\n\n\n\n<li> Always test production builds<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Troubleshooting<\/strong><\/h2>\n\n\n\n<p><strong>Changes not visible?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure dev server is running<\/li>\n\n\n\n<li>Hard refresh browser<\/li>\n\n\n\n<li>Check console for errors<\/li>\n\n\n\n<li>Confirm file path<\/li>\n<\/ul>\n\n\n\n<p><strong>HMR not working?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Restart dev server<\/li>\n\n\n\n<li>Check <code>vite.config.js<\/code><\/li>\n\n\n\n<li>Clear cache<\/li>\n<\/ul>\n\n\n\n<p><strong>Build failing?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fix syntax errors<\/li>\n\n\n\n<li>Verify imports<\/li>\n\n\n\n<li>Run <code>npm run lint<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Congratulations \ud83c\udf89<\/strong><\/h2>\n\n\n\n<p>You\u2019ve now:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Made your first customization<\/li>\n\n\n\n<li>Used HMR<\/li>\n\n\n\n<li>Added custom styles<\/li>\n\n\n\n<li>Built for production<\/li>\n\n\n\n<li>Learned the dev workflow<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Let\u2019s make your first change to KiviCare and watch Hot Module Replacement (HMR) in action. What You\u2019ll Learn Prerequisites Make sure: Step 1: Find a Component to Edit We\u2019ll modify the Dashboard homepage. File:app\/dashboard\/views\/dashboard\/Dashboard.jsx Step 2: Make a Simple Change Locate the main heading and update it. Before After Step 3: See HMR in Action [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[81],"tags":[],"class_list":["post-2915","post","type-post","status-publish","format-standard","hentry","category-getting-statrted"],"featured_image_src":null,"author_info":{"display_name":"wordpressadminiq","author_link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/author\/wordpressadminiq\/"},"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/comments?post=2915"}],"version-history":[{"count":4,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2915\/revisions"}],"predecessor-version":[{"id":2923,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2915\/revisions\/2923"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/media?parent=2915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/categories?post=2915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/tags?post=2915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}