React Page 4 - DEV Community

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>React Page 4 - DEV Community</title> <meta name="last-updated" content="2025-04-06 02:27:23 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1743906443"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-b8bdff515245fe895f3035d77697afb35d5d7e114bdf68291667479d4b289751.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-7258612fccf5d56314a6e4ad1898b4f818f474c4bb3485e302428d489a769a17.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-b74902d56433062a87f5f1ce74769baf2a1a698772f46952b0ac72bc95c4abfd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-7dcdad3172ab4501a4598fe8b716c7a88146e79fd42256d36fb1b83e27bf77cf.js"> <link rel="canonical" href="https://dev.to/t/react/page/4" /> <meta name="description" content="react content on DEV Community"> <meta name="keywords" content="software development, engineering, react"> <meta property="og:type" content="website" /> <meta property="og:url" content="https://dev.to/t/react/page/4" /> <meta property="og:title" content="React" /> <meta property="og:description" content="React content on DEV Community" /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@React"> <meta name="twitter:title" content="React"> <meta name="twitter:description" content="React content on DEV Community"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="128x128" /> <meta name="apple-mobile-web-app-title" content="dev.to"> <meta name="application-name" content="dev.to"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" /> <meta property="forem:name" content="DEV Community" /> <meta property="forem:logo" content="https://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <meta property="forem:domain" content="dev.to" /> </head> <body class="sans-serif-article-body default-header" data-user-status="logged-out" data-community-name="DEV Community" data-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2025-04-04T21:14:30Z" data-latest-commit-id="80dddae49850f88ae36ea53ef7b4cd07bd8b133e" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-dynamic-url-component="bmar11" data-ga4-tracking-id="G-TYEM8Y3JN3"> <script> if (navigator.userAgent === 'ForemWebView/1' || window.frameElement) { document.body.classList.add("hidden-shell"); } </script> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="secondary-crayons-stylesheet" /> <div id="body-styles"> <style> :root { --accent-brand-lighter-rgb: 80, 99, 301; --accent-brand-rgb: 59, 73, 223; --accent-brand-darker-rgb: 47, 58, 178; } </style> </div> <div id="audiocontent" data-podcast=""> </div> <div class="navigation-progress" id="navigation-progress"></div> <header id="topbar" class="crayons-header topbar print-hidden"> <span id="route-change-target" tabindex="-1"></span> <a href="#main-content" class="skip-content-link">Skip to content</a> <div class="crayons-header__container"> <span class="inline-block m:hidden "> <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ag0ve2m5pjcn8wdn1j37nr0mx4cfcqm7" class="crayons-icon"><title id="ag0ve2m5pjcn8wdn1j37nr0mx4cfcqm7">Navigation menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </button> </span> <a href="/" class="site-logo" aria-label="DEV Community Home"> <img class="site-logo__img" src="https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" alt="DEV Community"> </a> <div class="crayons-header--search js-search-form" id="header-search"> <form accept-charset="UTF-8" method="get" action="/search" role="search"> <div class="crayons-fields crayons-fields--horizontal"> <div class="crayons-field flex-1 relative"> <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" /> <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahxgncrhlk92w3gjus2f4zbw43nn6hub" aria-hidden="true" class="crayons-icon"><title id="ahxgncrhlk92w3gjus2f4zbw43nn6hub">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </button> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="a6utmkm1domehca7qc63irq5wg43znoo" aria-hidden="true" class="crayons-icon"><title id="a6utmkm1domehca7qc63irq5wg43znoo">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="https://dev.to/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="https://dev.to/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </div> </div> </header> <div class="hamburger"> <div class="hamburger__content"> <header class="hamburger__content__header"> <h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community</h2> <button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5yrzbor3snok1029kfr47f9m0bu8i9r" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="a5yrzbor3snok1029kfr47f9m0bu8i9r">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </button> </header> <div class="p-2 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper tagged_articles tagged_articles-index" data-current-page="tagged_articles-index"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <div data-tag-id="125" data-tag-name="react" id="tag-125" class="crayons-layout js-tag-card"> <header class="crayons-card branded-4 p-4 l:p-6 spec__tag-header" style="border-top-color: #222222 "> <div class="flex"> <img src="https://media2.dev.to/dynamic/image/width=64,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F26%2Freact-sticker.png" alt="" class="mr-4" style="transform: rotate(0deg); width: 64px; height: 64px;" /> <div class="flex flex-col w-100 justify-center"> <div class="flex justify-between items-center"> <h1 class="crayons-title"> React </h1> <div id="tag-buttons-125" class="mt-auto flex items-end justify-between"> <div class="flex gap-2"> <button class="c-btn c-btn--primary js-follow-tag-button" aria-label="Follow tag: react"> Follow </button> <button class="c-btn js-hide-tag-button" aria-label="Hide tag: react"> Hide </button> </div> </div> </div> <p class="max-w-100 m:max-w-75 pt-2 s:pt-4"> Official tag for Facebook's React JavaScript library for building user interfaces </p> </div> </div> </header> </div> <div class="home sub-home" id="index-container" data-params="{"tag":"react","sort_by":"hotness_score","sort_direction":"desc"}" data-which="" data-tag="react" data-feed="base-feed" data-requires-approval="false" data-articles-since=""> <div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left"> <div class="sidebar-bg" id="sidebar-bg-left"></div> <aside class="side-bar"> <div class="widget js-policy-article-create"> <a class="crayons-btn crayons-btn--s" href="/new/react"> Create Post </a> </div> <div class="widget"> <header> <h4>submission guidelines</h4> </header> <div class="widget-body"> <p>1️⃣ Post Facebook's React ⚛ related posts/questions/discussion topics here~</p> <p>2️⃣ There are no silly posts or questions as we all learn from each other👩‍🎓👨‍🎓</p> <p>3️⃣ Adhere to dev.to 👩‍💻👨‍💻<a href="https://dev.to/code-of-conduct">Code of Conduct</a></p> </div> </div> <div class="widget"> <header> <h4>about #react</h4> </header> <div class="widget-body"> <p><a href="https://reactjs.org/">React</a> is a declarative, component-based library, you can learn once, and write anywhere</p> <p><strong>Editor Guide</strong></p> <p>Check out this <a href="https://dev.to/p/editor_guide">Editor Guide</a><br> or <a href="https://dev.to/hoverbaum/how-to-add-code-highlighting-to-your-devto-posts-2lp6">this post</a> to learn how to add code syntax highlights, embed CodeSandbox/Codepen, etc</p> <p><strong>Official Documentations & Source</strong></p> <ul> <li><a href="https://reactjs.org/">Docs</a></li> <li><a href="https://reactjs.org/docs/getting-started.html">Tutorial</a></li> <li><a href="https://reactjs.org/community/support.html">Community</a></li> <li><a href="https://reactjs.org/blog/2019/02/06/react-v16.8.0.html">Blog</a></li> <li> <a href="https://github.com/facebook/react/">Source code</a> on GitHub</li> </ul> <p><strong>Improving Your Chances for a Reply</strong></p> <p>by putting a minimal example to either <a href="https://jsfiddle.net/Luktwrdm/">JSFiddle</a>, <a href="https://codesandbox.io/s/new">Code Sandbox</a>, or <a href="https://stackblitz.com/">StackBlitz</a>. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!</p> <p><strong>Where else to ask questions</strong></p> <ul> <li> <a href="https://stackoverflow.com/questions/tagged/reactjs">StackOverflow tagged with [reactjs]</a> <a href="https://www.reddit.com/r/reactjs/comments/eictui/beginners_thread_easy_questions_jan_2020/">Beginner's Thread / Easy Questions (Jan 2020)</a> on <a href="https://www.reddit.com/r/reactjs">r/reactjs</a> subreddit.</li> </ul> <p><em>Note: a new "Beginner's Thread" created as sticky post on the first day of each month</em></p> <p><strong>Learn in Public</strong></p> <p>Don't afraid to post an article or being wrong.<br> <a href="https://www.swyx.io/writing/learn-in-public/">Learn in public</a>.</p> </div> </div> <div class="sidebar-data"> <div> 40372 Posts Published </div> <hr /> <div class="olderposts-header">Older #react posts</div> <div class="olderposts-links"> <a href="https://dev.to/t/react" class="olderposts-pagenumber">1</a> <a href="https://dev.to/t/react/page/2" class="olderposts-pagenumber">2</a> <a href="https://dev.to/t/react/page/3" class="olderposts-pagenumber">3</a> <span class="olderposts-pagenumber">4</span> <a href="https://dev.to/t/react/page/5" class="olderposts-pagenumber">5</a> <a href="https://dev.to/t/react/page/6" class="olderposts-pagenumber">6</a> <a href="https://dev.to/t/react/page/7" class="olderposts-pagenumber">7</a> <a href="https://dev.to/t/react/page/8" class="olderposts-pagenumber">8</a> <a href="https://dev.to/t/react/page/9" class="olderposts-pagenumber">9</a> </div> </div> </aside> </div> <main class="articles-list" id="main-content" data-follow-button-container="true"> <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls"> <h1 class="screen-reader-only">Posts</h1> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden mb-auto" id="on-page-nav-butt-left" aria-label="nav-button-left"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="as1bv9q34mmtx4t39bzpqvw8oe40tqtf" class="crayons-icon"><title id="as1bv9q34mmtx4t39bzpqvw8oe40tqtf">Left menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> <div class="flex-1 flex items-center justify-between"> <div class="crayons-notice w-100" aria-live="polite">👋 <a href="/enter">Sign in</a> for the ability to sort posts by <strong>relevant</strong>, <strong>latest</strong>, or <strong>top</strong>.</div> </div> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden mb-auto" id="on-page-nav-butt-right" aria-label="nav-button-right"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5auhh9praze20e0nbxk5xtkt5a64wfr" class="crayons-icon"><title id="a5auhh9praze20e0nbxk5xtkt5a64wfr">Right menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> </header> <div class="substories" id="substories"> <div class="crayons-story " data-feed-content-id="2362556" data-content-user-id="311241"> <a href="https://dev.to/silvanocerza/a-new-way-to-sync-your-obsidian-vault-3nlh" aria-labelledby="article-link-2362556" class="crayons-story__hidden-navigation-link">A new way to sync your Obsidian vault</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/silvanocerza" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F311241%2F73b83860-0943-49f5-95cf-8a228b77845a.jpg" alt="silvanocerza profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/silvanocerza" class="crayons-story__secondary fw-medium m:hidden"> Silvano Cerza </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2362556" aria-controls="story-author-preview-content-2362556" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Silvano Cerza profile details"> Silvano Cerza </button> <div id="story-author-preview-content-2362556" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/silvanocerza" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F311241%2F73b83860-0943-49f5-95cf-8a228b77845a.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Silvano Cerza</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":311241,"className":"User","name":"Silvano Cerza"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="311241"></div> </div> </div> </div> </div> <a href="https://dev.to/silvanocerza/a-new-way-to-sync-your-obsidian-vault-3nlh" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-28T12:01:56Z">Mar 28</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743163316"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/silvanocerza/a-new-way-to-sync-your-obsidian-vault-3nlh" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmnj7ee1xiv3uj0u8zgtl.png" id="article-link-2362556"> A new way to sync your Obsidian vault </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(38, 190, 0, 0.10); --tag-prefix: #26BE00; --tag-bg-hover: rgba(38, 190, 0, 0.10); --tag-prefix-hover: #26BE00; " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/silvanocerza/a-new-way-to-sync-your-obsidian-vault-3nlh#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - A new way to sync your Obsidian vault"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="apydhiodl5pj9jzjq3qbw67v9i2tzyla" class="crayons-icon"><title id="apydhiodl5pj9jzjq3qbw67v9i2tzyla">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 8 min read </small> <button type="button" id="article-save-button-2362556" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2362556" data-article-author-id="311241" aria-label="Save post A new way to sync your Obsidian vault to reading list" title="Save post A new way to sync your Obsidian vault to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2362678" data-content-user-id="1160448"> <a href="https://dev.to/andreiisakov1/select-box-value-in-a-react-table-does-not-refresh-3k2a" aria-labelledby="article-link-2362678" class="crayons-story__hidden-navigation-link">Select box value in a react table does not refresh</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/andreiisakov1" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1160448%2Fe3301136-3451-47e5-adb7-e2bd7ddebda7.png" alt="andreiisakov1 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/andreiisakov1" class="crayons-story__secondary fw-medium m:hidden"> Andrei </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2362678" aria-controls="story-author-preview-content-2362678" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Andrei profile details"> Andrei </button> <div id="story-author-preview-content-2362678" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/andreiisakov1" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1160448%2Fe3301136-3451-47e5-adb7-e2bd7ddebda7.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Andrei</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1160448,"className":"User","name":"Andrei"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1160448"></div> </div> </div> </div> </div> <a href="https://dev.to/andreiisakov1/select-box-value-in-a-react-table-does-not-refresh-3k2a" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-28T12:06:40Z">Mar 28</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743163600"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/andreiisakov1/select-box-value-in-a-react-table-does-not-refresh-3k2a" data-preload-image="" id="article-link-2362678"> Select box value in a react table does not refresh </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/andreiisakov1/select-box-value-in-a-react-table-does-not-refresh-3k2a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Select box value in a react table does not refresh"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abe3o4vvg0zq02nb2wk74q787cuhnel1" class="crayons-icon"><title id="abe3o4vvg0zq02nb2wk74q787cuhnel1">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2362678" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2362678" data-article-author-id="1160448" aria-label="Save post Select box value in a react table does not refresh to reading list" title="Save post Select box value in a react table does not refresh to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2362467" data-content-user-id="800131"> <a href="https://dev.to/minaaj/create-react-app-is-dead-heres-what-you-should-use-instead-1e9f" aria-labelledby="article-link-2362467" class="crayons-story__hidden-navigation-link">Create React App Is Dead! Here’s What You Should Use Instead 🚀</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/minaaj" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F800131%2F0f903c0f-7bd1-4e2b-8ad3-f3017f639281.png" alt="minaaj profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/minaaj" class="crayons-story__secondary fw-medium m:hidden"> Minhaj T </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2362467" aria-controls="story-author-preview-content-2362467" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Minhaj T profile details"> Minhaj T </button> <div id="story-author-preview-content-2362467" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/minaaj" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F800131%2F0f903c0f-7bd1-4e2b-8ad3-f3017f639281.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Minhaj T</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":800131,"className":"User","name":"Minhaj T"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="800131"></div> </div> </div> </div> </div> <a href="https://dev.to/minaaj/create-react-app-is-dead-heres-what-you-should-use-instead-1e9f" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-28T10:11:22Z">Mar 28</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743156682"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/minaaj/create-react-app-is-dead-heres-what-you-should-use-instead-1e9f" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxuqr734nojta57hthdqz.jpg" id="article-link-2362467"> Create React App Is Dead! Here’s What You Should Use Instead 🚀 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/minaaj/create-react-app-is-dead-heres-what-you-should-use-instead-1e9f#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Create React App Is Dead! Here’s What You Should Use Instead 🚀"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abbtxt674iejv73y9o565jw2mx6s87ix" class="crayons-icon"><title id="abbtxt674iejv73y9o565jw2mx6s87ix">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2362467" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2362467" data-article-author-id="800131" aria-label="Save post Create React App Is Dead! Here’s What You Should Use Instead 🚀 to reading list" title="Save post Create React App Is Dead! Here’s What You Should Use Instead 🚀 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2362517" data-content-user-id="138802"> <a href="https://dev.to/manoj_004d/enhancing-sales-data-visualization-advanced-interactivity-with-canvasjs-and-react-table-45ff" aria-labelledby="article-link-2362517" class="crayons-story__hidden-navigation-link">Enhancing Sales Data Visualization: Advanced Interactivity with CanvasJS and React Table</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/manoj_004d" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F138802%2F8bbb787a-3922-4853-9bf8-0dcf40653dae.jpg" alt="manoj_004d profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/manoj_004d" class="crayons-story__secondary fw-medium m:hidden"> Manoj Mohan </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2362517" aria-controls="story-author-preview-content-2362517" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Manoj Mohan profile details"> Manoj Mohan </button> <div id="story-author-preview-content-2362517" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/manoj_004d" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F138802%2F8bbb787a-3922-4853-9bf8-0dcf40653dae.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Manoj Mohan</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":138802,"className":"User","name":"Manoj Mohan"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="138802"></div> </div> </div> </div> </div> <a href="https://dev.to/manoj_004d/enhancing-sales-data-visualization-advanced-interactivity-with-canvasjs-and-react-table-45ff" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-28T10:42:14Z">Mar 28</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743158534"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/manoj_004d/enhancing-sales-data-visualization-advanced-interactivity-with-canvasjs-and-react-table-45ff" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyrj1bniwc883vpmh1nf2.png" id="article-link-2362517"> Enhancing Sales Data Visualization: Advanced Interactivity with CanvasJS and React Table </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/datavisualization"><span class="crayons-tag__prefix">#</span>datavisualization</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/canvasjs"><span class="crayons-tag__prefix">#</span>canvasjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/tanstack"><span class="crayons-tag__prefix">#</span>tanstack</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/manoj_004d/enhancing-sales-data-visualization-advanced-interactivity-with-canvasjs-and-react-table-45ff#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Enhancing Sales Data Visualization: Advanced Interactivity with CanvasJS and React Table"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="apu8j87ofef9d450r1is9bd64xfexqhy" class="crayons-icon"><title id="apu8j87ofef9d450r1is9bd64xfexqhy">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2362517" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2362517" data-article-author-id="138802" aria-label="Save post Enhancing Sales Data Visualization: Advanced Interactivity with CanvasJS and React Table to reading list" title="Save post Enhancing Sales Data Visualization: Advanced Interactivity with CanvasJS and React Table to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2371933" data-content-user-id="3003565"> <a href="https://dev.to/shanting_hou_a0b33242a4b8/svggles-make-interactive-svg-illustrations-in-react-with-1-line-2l9b" aria-labelledby="article-link-2371933" class="crayons-story__hidden-navigation-link">🎨 svggles – Make Interactive SVG Illustrations in React (with 1 Line)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/shanting_hou_a0b33242a4b8" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3003565%2Fcac58a33-a8e9-42a2-8eee-4d331442d9a7.png" alt="shanting_hou_a0b33242a4b8 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/shanting_hou_a0b33242a4b8" class="crayons-story__secondary fw-medium m:hidden"> Shanting Hou </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2371933" aria-controls="story-author-preview-content-2371933" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Shanting Hou profile details"> Shanting Hou </button> <div id="story-author-preview-content-2371933" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/shanting_hou_a0b33242a4b8" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3003565%2Fcac58a33-a8e9-42a2-8eee-4d331442d9a7.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Shanting Hou</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":3003565,"className":"User","name":"Shanting Hou"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="3003565"></div> </div> </div> </div> </div> <a href="https://dev.to/shanting_hou_a0b33242a4b8/svggles-make-interactive-svg-illustrations-in-react-with-1-line-2l9b" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-01T19:16:26Z">Apr 1</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743534986"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/shanting_hou_a0b33242a4b8/svggles-make-interactive-svg-illustrations-in-react-with-1-line-2l9b" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8reckw34h0gkqgheqwit.png" id="article-link-2371933"> 🎨 svggles – Make Interactive SVG Illustrations in React (with 1 Line) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(38, 190, 0, 0.10); --tag-prefix: #26BE00; --tag-bg-hover: rgba(38, 190, 0, 0.10); --tag-prefix-hover: #26BE00; " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(6, 255, 106, 0.10); --tag-prefix: #06ff6a; --tag-bg-hover: rgba(6, 255, 106, 0.10); --tag-prefix-hover: #06ff6a; " href="/t/design"><span class="crayons-tag__prefix">#</span>design</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/shanting_hou_a0b33242a4b8/svggles-make-interactive-svg-illustrations-in-react-with-1-line-2l9b#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🎨 svggles – Make Interactive SVG Illustrations in React (with 1 Line)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a654zoe8zosgr51nmdekrc2ccomn2d14" class="crayons-icon"><title id="a654zoe8zosgr51nmdekrc2ccomn2d14">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2371933" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2371933" data-article-author-id="3003565" aria-label="Save post 🎨 svggles – Make Interactive SVG Illustrations in React (with 1 Line) to reading list" title="Save post 🎨 svggles – Make Interactive SVG Illustrations in React (with 1 Line) to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2371199" data-content-user-id="396661"> <a href="https://dev.to/naveenchandar/iife-in-javascript-1ob4" aria-labelledby="article-link-2371199" class="crayons-story__hidden-navigation-link">IIFE in Javascript</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/naveenchandar" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F396661%2Fe27ecfc7-6d2d-40aa-ad74-b2a367f30deb.jpeg" alt="naveenchandar profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/naveenchandar" class="crayons-story__secondary fw-medium m:hidden"> Naveenchandar </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2371199" aria-controls="story-author-preview-content-2371199" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Naveenchandar profile details"> Naveenchandar </button> <div id="story-author-preview-content-2371199" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/naveenchandar" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F396661%2Fe27ecfc7-6d2d-40aa-ad74-b2a367f30deb.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Naveenchandar</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":396661,"className":"User","name":"Naveenchandar"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="396661"></div> </div> </div> </div> </div> <a href="https://dev.to/naveenchandar/iife-in-javascript-1ob4" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-01T12:49:32Z">Apr 1</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743511772"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/naveenchandar/iife-in-javascript-1ob4" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyt9aykez1ftg8qf030rd.png" id="article-link-2371199"> IIFE in Javascript </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/naveenchandar/iife-in-javascript-1ob4" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2371199" aria-label="Add a comment to post - IIFE in Javascript"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/naveenchandar/iife-in-javascript-1ob4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - IIFE in Javascript"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aadngfebc2nza8qqhiisptxq3uu4udup" class="crayons-icon"><title id="aadngfebc2nza8qqhiisptxq3uu4udup">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2371199" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2371199" data-article-author-id="396661" aria-label="Save post IIFE in Javascript to reading list" title="Save post IIFE in Javascript to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2361965" data-content-user-id="1693846"> <a href="https://dev.to/zgbocode/how-to-build-a-live-streaming-app-using-zegocloud-in-reactjs-2l0f" aria-labelledby="article-link-2361965" class="crayons-story__hidden-navigation-link">How to Build a Live Streaming App using ZEGOCLOUD in React.js</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/zgbocode" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1693846%2F6cfbc465-c263-4732-9d0d-66c37383af2f.png" alt="zgbocode profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/zgbocode" class="crayons-story__secondary fw-medium m:hidden"> Emmanuel Ezeigbo </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2361965" aria-controls="story-author-preview-content-2361965" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Emmanuel Ezeigbo profile details"> Emmanuel Ezeigbo </button> <div id="story-author-preview-content-2361965" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/zgbocode" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1693846%2F6cfbc465-c263-4732-9d0d-66c37383af2f.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Emmanuel Ezeigbo</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1693846,"className":"User","name":"Emmanuel Ezeigbo"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1693846"></div> </div> </div> </div> </div> <a href="https://dev.to/zgbocode/how-to-build-a-live-streaming-app-using-zegocloud-in-reactjs-2l0f" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-28T06:02:28Z">Mar 28</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743141748"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/zgbocode/how-to-build-a-live-streaming-app-using-zegocloud-in-reactjs-2l0f" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faes5y0yk2au8viu24box.png" id="article-link-2361965"> How to Build a Live Streaming App using ZEGOCLOUD in React.js </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/zgbocode/how-to-build-a-live-streaming-app-using-zegocloud-in-reactjs-2l0f#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How to Build a Live Streaming App using ZEGOCLOUD in React.js"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1xthk1hknwyxsnky8en1ok3we3a0p2g" class="crayons-icon"><title id="a1xthk1hknwyxsnky8en1ok3we3a0p2g">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2361965" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2361965" data-article-author-id="1693846" aria-label="Save post How to Build a Live Streaming App using ZEGOCLOUD in React.js to reading list" title="Save post How to Build a Live Streaming App using ZEGOCLOUD in React.js to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2312904" data-content-user-id="2891846"> <a href="https://dev.to/tene/introduction-to-react-394m" aria-labelledby="article-link-2312904" class="crayons-story__hidden-navigation-link">Introduction to React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/tene" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2891846%2F49c5cee4-a6a3-4aa3-89a6-e3fa0b111a20.jpg" alt="tene profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/tene" class="crayons-story__secondary fw-medium m:hidden"> TenE </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2312904" aria-controls="story-author-preview-content-2312904" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="TenE profile details"> TenE </button> <div id="story-author-preview-content-2312904" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/tene" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2891846%2F49c5cee4-a6a3-4aa3-89a6-e3fa0b111a20.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">TenE</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2891846,"className":"User","name":"TenE"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2891846"></div> </div> </div> </div> </div> <a href="https://dev.to/tene/introduction-to-react-394m" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-01T00:30:00Z">Apr 1</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743467400"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/tene/introduction-to-react-394m" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F477jtonv0wa54t3byicf.jpg" id="article-link-2312904"> Introduction to React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/tene/introduction-to-react-394m#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Introduction to React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="afzv6xf5uhgw6y9xveggovq9vxzwa2lj" class="crayons-icon"><title id="afzv6xf5uhgw6y9xveggovq9vxzwa2lj">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2312904" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2312904" data-article-author-id="2891846" aria-label="Save post Introduction to React to reading list" title="Save post Introduction to React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2369333" data-content-user-id="2908438"> <a href="https://dev.to/shelly_agarwal_19/splice-vs-tospliced-which-one-to-prefer-in-javascript-2i7c" aria-labelledby="article-link-2369333" class="crayons-story__hidden-navigation-link">splice() vs toSpliced() which one to prefer in javascript?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/shelly_agarwal_19" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2908438%2Fadd8a8ba-6eb5-42ff-ac23-1c711ff1c868.jpg" alt="shelly_agarwal_19 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/shelly_agarwal_19" class="crayons-story__secondary fw-medium m:hidden"> shelly agarwal </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2369333" aria-controls="story-author-preview-content-2369333" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="shelly agarwal profile details"> shelly agarwal </button> <div id="story-author-preview-content-2369333" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/shelly_agarwal_19" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2908438%2Fadd8a8ba-6eb5-42ff-ac23-1c711ff1c868.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">shelly agarwal</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2908438,"className":"User","name":"shelly agarwal"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2908438"></div> </div> </div> </div> </div> <a href="https://dev.to/shelly_agarwal_19/splice-vs-tospliced-which-one-to-prefer-in-javascript-2i7c" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-31T17:48:26Z">Mar 31</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743443306"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/shelly_agarwal_19/splice-vs-tospliced-which-one-to-prefer-in-javascript-2i7c" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj8a6jcscoru93w9x1ryf.jpg" id="article-link-2369333"> splice() vs toSpliced() which one to prefer in javascript? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/shelly_agarwal_19/splice-vs-tospliced-which-one-to-prefer-in-javascript-2i7c" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2369333" aria-label="Add a comment to post - splice() vs toSpliced() which one to prefer in javascript?"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/shelly_agarwal_19/splice-vs-tospliced-which-one-to-prefer-in-javascript-2i7c#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - splice() vs toSpliced() which one to prefer in javascript?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ajh4b8ocbp5oij14jhpuh7wlvrgiadqq" class="crayons-icon"><title id="ajh4b8ocbp5oij14jhpuh7wlvrgiadqq">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2369333" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2369333" data-article-author-id="2908438" aria-label="Save post splice() vs toSpliced() which one to prefer in javascript? to reading list" title="Save post splice() vs toSpliced() which one to prefer in javascript? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2368891" data-content-user-id="2998091"> <a href="https://dev.to/kangisecha/software-engineeringmodule-1-and-2-2fg2" aria-labelledby="article-link-2368891" class="crayons-story__hidden-navigation-link">Software engineering: Building responsive portfolio and expo mobile application.</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/kangisecha" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2998091%2F58fcc03e-bfc0-48ad-bc15-e7ee054b5ace.png" alt="kangisecha profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/kangisecha" class="crayons-story__secondary fw-medium m:hidden"> Kang'isecha Michael </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2368891" aria-controls="story-author-preview-content-2368891" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Kang'isecha Michael profile details"> Kang'isecha Michael </button> <div id="story-author-preview-content-2368891" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kangisecha" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2998091%2F58fcc03e-bfc0-48ad-bc15-e7ee054b5ace.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Kang'isecha Michael</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2998091,"className":"User","name":"Kang'isecha Michael"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2998091"></div> </div> </div> </div> </div> <a href="https://dev.to/kangisecha/software-engineeringmodule-1-and-2-2fg2" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-31T13:38:43Z">Mar 31</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743428323"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/kangisecha/software-engineeringmodule-1-and-2-2fg2" data-preload-image="" id="article-link-2368891"> Software engineering: Building responsive portfolio and expo mobile application. </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/github"><span class="crayons-tag__prefix">#</span>github</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/kangisecha/software-engineeringmodule-1-and-2-2fg2" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2368891" aria-label="Add a comment to post - Software engineering: Building responsive portfolio and expo mobile application."> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/kangisecha/software-engineeringmodule-1-and-2-2fg2#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Software engineering: Building responsive portfolio and expo mobile application."> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aca1r9iaclvpuw56lygds6e33scn9123" class="crayons-icon"><title id="aca1r9iaclvpuw56lygds6e33scn9123">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2368891" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2368891" data-article-author-id="2998091" aria-label="Save post Software engineering: Building responsive portfolio and expo mobile application. to reading list" title="Save post Software engineering: Building responsive portfolio and expo mobile application. to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2367723" data-content-user-id="2691452"> <a href="https://dev.to/allan_/the-frontend-engineering-290b" aria-labelledby="article-link-2367723" class="crayons-story__hidden-navigation-link">The Frontend engineering</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/allan_" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2691452%2Fb082bad1-f8c1-49cc-8a1d-d26cdf067804.jpg" alt="allan_ profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/allan_" class="crayons-story__secondary fw-medium m:hidden"> Allan </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2367723" aria-controls="story-author-preview-content-2367723" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Allan profile details"> Allan </button> <div id="story-author-preview-content-2367723" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/allan_" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2691452%2Fb082bad1-f8c1-49cc-8a1d-d26cdf067804.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Allan</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2691452,"className":"User","name":"Allan"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2691452"></div> </div> </div> </div> </div> <a href="https://dev.to/allan_/the-frontend-engineering-290b" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-31T09:19:16Z">Mar 31</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743412756"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/allan_/the-frontend-engineering-290b" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8dpeong3x0lo118j2jjf.jpg" id="article-link-2367723"> The Frontend engineering </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(29, 219, 231, 0.10); --tag-prefix: #1ddbe7; --tag-bg-hover: rgba(29, 219, 231, 0.10); --tag-prefix-hover: #1ddbe7; " href="/t/reactnative"><span class="crayons-tag__prefix">#</span>reactnative</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/allan_/the-frontend-engineering-290b#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - The Frontend engineering"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ap2a5fpcqckx3rssm46tos08bjft27kg" class="crayons-icon"><title id="ap2a5fpcqckx3rssm46tos08bjft27kg">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2367723" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2367723" data-article-author-id="2691452" aria-label="Save post The Frontend engineering to reading list" title="Save post The Frontend engineering to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2358810" data-content-user-id="2838560"> <a href="https://dev.to/ali007depug/callback-props-in-react-37m0" aria-labelledby="article-link-2358810" class="crayons-story__hidden-navigation-link">Callback props in React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ali007depug" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2838560%2F2c18e462-9d69-4d30-abea-a4fe6c44753c.png" alt="ali007depug profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ali007depug" class="crayons-story__secondary fw-medium m:hidden"> Ali AbdElbagi </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2358810" aria-controls="story-author-preview-content-2358810" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Ali AbdElbagi profile details"> Ali AbdElbagi </button> <div id="story-author-preview-content-2358810" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/ali007depug" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2838560%2F2c18e462-9d69-4d30-abea-a4fe6c44753c.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Ali AbdElbagi</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2838560,"className":"User","name":"Ali AbdElbagi"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2838560"></div> </div> </div> </div> </div> <a href="https://dev.to/ali007depug/callback-props-in-react-37m0" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-26T20:24:06Z">Mar 26</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743020646"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/ali007depug/callback-props-in-react-37m0" data-preload-image="" id="article-link-2358810"> Callback props in React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/ali007depug/callback-props-in-react-37m0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Callback props in React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="asdni9l12l2eovtzbkwiweyaey2eij40" class="crayons-icon"><title id="asdni9l12l2eovtzbkwiweyaey2eij40">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2358810" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2358810" data-article-author-id="2838560" aria-label="Save post Callback props in React to reading list" title="Save post Callback props in React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2366734" data-content-user-id="571654"> <a href="https://dev.to/uttam_py/what-is-virtual-dom-and-how-does-it-works-1ff5" aria-labelledby="article-link-2366734" class="crayons-story__hidden-navigation-link">What is Virtual DOM and How does It Works?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/uttam_py" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F571654%2F62233663-3ce6-416c-a315-981bf09430f3.png" alt="uttam_py profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/uttam_py" class="crayons-story__secondary fw-medium m:hidden"> Uttam </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2366734" aria-controls="story-author-preview-content-2366734" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Uttam profile details"> Uttam </button> <div id="story-author-preview-content-2366734" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/uttam_py" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F571654%2F62233663-3ce6-416c-a315-981bf09430f3.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Uttam</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":571654,"className":"User","name":"Uttam"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="571654"></div> </div> </div> </div> </div> <a href="https://dev.to/uttam_py/what-is-virtual-dom-and-how-does-it-works-1ff5" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-31T07:10:32Z">Mar 31</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743405032"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/uttam_py/what-is-virtual-dom-and-how-does-it-works-1ff5" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fol280wxsuei8scr3usmr.png" id="article-link-2366734"> What is Virtual DOM and How does It Works? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/uttam_py/what-is-virtual-dom-and-how-does-it-works-1ff5" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2366734" aria-label="Add a comment to post - What is Virtual DOM and How does It Works?"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/uttam_py/what-is-virtual-dom-and-how-does-it-works-1ff5#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - What is Virtual DOM and How does It Works?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a327som90t9unmn5wsfg73h6wqk7s9np" class="crayons-icon"><title id="a327som90t9unmn5wsfg73h6wqk7s9np">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2366734" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2366734" data-article-author-id="571654" aria-label="Save post What is Virtual DOM and How does It Works? to reading list" title="Save post What is Virtual DOM and How does It Works? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2358505" data-content-user-id="2979032"> <a href="https://dev.to/aniket_ap/from-local-development-to-live-server-a-complete-guide-to-deploying-your-react-js-project-on-ubuntu-1idd" aria-labelledby="article-link-2358505" class="crayons-story__hidden-navigation-link">From Local Development to Live Server: A Complete Guide to Deploying Your React JS Project on Ubuntu</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/aniket_ap" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2979032%2F74d2ab33-1884-49e6-831c-a831dfe6a7ca.jpg" alt="aniket_ap profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/aniket_ap" class="crayons-story__secondary fw-medium m:hidden"> Aniket </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2358505" aria-controls="story-author-preview-content-2358505" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Aniket profile details"> Aniket </button> <div id="story-author-preview-content-2358505" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/aniket_ap" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2979032%2F74d2ab33-1884-49e6-831c-a831dfe6a7ca.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Aniket</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2979032,"className":"User","name":"Aniket"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2979032"></div> </div> </div> </div> </div> <a href="https://dev.to/aniket_ap/from-local-development-to-live-server-a-complete-guide-to-deploying-your-react-js-project-on-ubuntu-1idd" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-26T16:49:20Z">Mar 26</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743007760"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/aniket_ap/from-local-development-to-live-server-a-complete-guide-to-deploying-your-react-js-project-on-ubuntu-1idd" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdtzipntazzm4wooaee4c.png" id="article-link-2358505"> From Local Development to Live Server: A Complete Guide to Deploying Your React JS Project on Ubuntu </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(233, 84, 32, 0.10); --tag-prefix: #E95420; --tag-bg-hover: rgba(233, 84, 32, 0.10); --tag-prefix-hover: #E95420; " href="/t/ubuntu"><span class="crayons-tag__prefix">#</span>ubuntu</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/linux"><span class="crayons-tag__prefix">#</span>linux</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/aniket_ap/from-local-development-to-live-server-a-complete-guide-to-deploying-your-react-js-project-on-ubuntu-1idd#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - From Local Development to Live Server: A Complete Guide to Deploying Your React JS Project on Ubuntu"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aem9ghfhrt023olj80dn3k67nyiinykg" class="crayons-icon"><title id="aem9ghfhrt023olj80dn3k67nyiinykg">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2358505" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2358505" data-article-author-id="2979032" aria-label="Save post From Local Development to Live Server: A Complete Guide to Deploying Your React JS Project on Ubuntu to reading list" title="Save post From Local Development to Live Server: A Complete Guide to Deploying Your React JS Project on Ubuntu to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2357970" data-content-user-id="975859"> <a href="https://dev.to/kristiyanvelkov/what-are-top-companies-really-asking-in-react-interviews-mg4" aria-labelledby="article-link-2357970" class="crayons-story__hidden-navigation-link">What are top companies really asking in React interviews?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/kristiyanvelkov" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F975859%2Fbbea00d0-837b-43f0-889d-76d221499235.jpeg" alt="kristiyanvelkov profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/kristiyanvelkov" class="crayons-story__secondary fw-medium m:hidden"> Kristiyan Velkov </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2357970" aria-controls="story-author-preview-content-2357970" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Kristiyan Velkov profile details"> Kristiyan Velkov </button> <div id="story-author-preview-content-2357970" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kristiyanvelkov" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F975859%2Fbbea00d0-837b-43f0-889d-76d221499235.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Kristiyan Velkov</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":975859,"className":"User","name":"Kristiyan Velkov"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="975859"></div> </div> </div> </div> </div> <a href="https://dev.to/kristiyanvelkov/what-are-top-companies-really-asking-in-react-interviews-mg4" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-26T11:59:00Z">Mar 26</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742990340"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/kristiyanvelkov/what-are-top-companies-really-asking-in-react-interviews-mg4" data-preload-image="" id="article-link-2357970"> What are top companies really asking in React interviews? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/interview"><span class="crayons-tag__prefix">#</span>interview</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(42, 37, 102, 0.10); --tag-prefix: #2A2566; --tag-bg-hover: rgba(42, 37, 102, 0.10); --tag-prefix-hover: #2A2566; " href="/t/career"><span class="crayons-tag__prefix">#</span>career</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/kristiyanvelkov/what-are-top-companies-really-asking-in-react-interviews-mg4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - What are top companies really asking in React interviews?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9bh3yjrc3jq7cvjdzd3kbivixcel11n" class="crayons-icon"><title id="a9bh3yjrc3jq7cvjdzd3kbivixcel11n">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2357970" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2357970" data-article-author-id="975859" aria-label="Save post What are top companies really asking in React interviews? to reading list" title="Save post What are top companies really asking in React interviews? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2356505" data-content-user-id="2976061"> <a href="https://dev.to/roozer_grom_b659e0c7acc0c/building-a-video-call-app-with-zegocloud-sdk-and-react-js-a-step-by-step-guide-in-10-minutes-5i9" aria-labelledby="article-link-2356505" class="crayons-story__hidden-navigation-link">Building a Video Call App with ZEGOCLOUD SDK and React JS: A Step-by-Step Guide In 10 Minutes</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/roozer_grom_b659e0c7acc0c" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2976061%2Fc0704149-9624-468e-8aac-db187478fa10.png" alt="roozer_grom_b659e0c7acc0c profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/roozer_grom_b659e0c7acc0c" class="crayons-story__secondary fw-medium m:hidden"> Roozer Grom </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2356505" aria-controls="story-author-preview-content-2356505" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Roozer Grom profile details"> Roozer Grom </button> <div id="story-author-preview-content-2356505" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/roozer_grom_b659e0c7acc0c" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2976061%2Fc0704149-9624-468e-8aac-db187478fa10.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Roozer Grom</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2976061,"className":"User","name":"Roozer Grom"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2976061"></div> </div> </div> </div> </div> <a href="https://dev.to/roozer_grom_b659e0c7acc0c/building-a-video-call-app-with-zegocloud-sdk-and-react-js-a-step-by-step-guide-in-10-minutes-5i9" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-26T08:40:23Z">Mar 26</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742978423"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/roozer_grom_b659e0c7acc0c/building-a-video-call-app-with-zegocloud-sdk-and-react-js-a-step-by-step-guide-in-10-minutes-5i9" data-preload-image="" id="article-link-2356505"> Building a Video Call App with ZEGOCLOUD SDK and React JS: A Step-by-Step Guide In 10 Minutes </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/zegocloud"><span class="crayons-tag__prefix">#</span>zegocloud</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/videocallapp"><span class="crayons-tag__prefix">#</span>videocallapp</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/roozer_grom_b659e0c7acc0c/building-a-video-call-app-with-zegocloud-sdk-and-react-js-a-step-by-step-guide-in-10-minutes-5i9#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Building a Video Call App with ZEGOCLOUD SDK and React JS: A Step-by-Step Guide In 10 Minutes"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ar4wptuvhd3lid3lpbhl4z30qoh1h99" class="crayons-icon"><title id="ar4wptuvhd3lid3lpbhl4z30qoh1h99">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 7 min read </small> <button type="button" id="article-save-button-2356505" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2356505" data-article-author-id="2976061" aria-label="Save post Building a Video Call App with ZEGOCLOUD SDK and React JS: A Step-by-Step Guide In 10 Minutes to reading list" title="Save post Building a Video Call App with ZEGOCLOUD SDK and React JS: A Step-by-Step Guide In 10 Minutes to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2356691" data-content-user-id="349861"> <a href="https://dev.to/nixx/react-simple-select-a-lightweight-and-customizable-select-component-for-react-5fh4" aria-labelledby="article-link-2356691" class="crayons-story__hidden-navigation-link">React Simple Select: A Lightweight and Customizable Select Component for React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/nixx" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F349861%2F0e1291ec-3258-415b-a8a6-abdf3241cd9a.jpg" alt="nixx profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/nixx" class="crayons-story__secondary fw-medium m:hidden"> ℵi✗✗ </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2356691" aria-controls="story-author-preview-content-2356691" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="ℵi✗✗ profile details"> ℵi✗✗ </button> <div id="story-author-preview-content-2356691" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/nixx" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F349861%2F0e1291ec-3258-415b-a8a6-abdf3241cd9a.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">ℵi✗✗</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":349861,"className":"User","name":"ℵi✗✗"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="349861"></div> </div> </div> </div> </div> <a href="https://dev.to/nixx/react-simple-select-a-lightweight-and-customizable-select-component-for-react-5fh4" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-27T13:15:00Z">Mar 27</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743081300"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/nixx/react-simple-select-a-lightweight-and-customizable-select-component-for-react-5fh4" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffy9rbnji8zy4l0x1hxg8.png" id="article-link-2356691"> React Simple Select: A Lightweight and Customizable Select Component for React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(38, 190, 0, 0.10); --tag-prefix: #26BE00; --tag-bg-hover: rgba(38, 190, 0, 0.10); --tag-prefix-hover: #26BE00; " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/nixx/react-simple-select-a-lightweight-and-customizable-select-component-for-react-5fh4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React Simple Select: A Lightweight and Customizable Select Component for React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aby8nd8kuo3sfhef4x7lgj3ipy8ldatb" class="crayons-icon"><title id="aby8nd8kuo3sfhef4x7lgj3ipy8ldatb">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2356691" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2356691" data-article-author-id="349861" aria-label="Save post React Simple Select: A Lightweight and Customizable Select Component for React to reading list" title="Save post React Simple Select: A Lightweight and Customizable Select Component for React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2357166" data-content-user-id="2977098"> <a href="https://dev.to/grouptech/james-nick-compton-37mf" aria-labelledby="article-link-2357166" class="crayons-story__hidden-navigation-link">james Nick Compton</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/grouptech" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2977098%2F19be7e37-4220-408b-ac78-1a36381c9ab9.jpg" alt="grouptech profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/grouptech" class="crayons-story__secondary fw-medium m:hidden"> James </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2357166" aria-controls="story-author-preview-content-2357166" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="James profile details"> James </button> <div id="story-author-preview-content-2357166" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/grouptech" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2977098%2F19be7e37-4220-408b-ac78-1a36381c9ab9.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">James</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2977098,"className":"User","name":"James"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2977098"></div> </div> </div> </div> </div> <a href="https://dev.to/grouptech/james-nick-compton-37mf" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-26T05:47:40Z">Mar 26</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742968060"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/grouptech/james-nick-compton-37mf" data-preload-image="" id="article-link-2357166"> james Nick Compton </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(23, 253, 26, 0.10); --tag-prefix: #17fd1a; --tag-bg-hover: rgba(23, 253, 26, 0.10); --tag-prefix-hover: #17fd1a; " href="/t/ai"><span class="crayons-tag__prefix">#</span>ai</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(254, 255, 165, 0.10); --tag-prefix: #FEFFA5; --tag-bg-hover: rgba(254, 255, 165, 0.10); --tag-prefix-hover: #FEFFA5; " href="/t/tutorial"><span class="crayons-tag__prefix">#</span>tutorial</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/grouptech/james-nick-compton-37mf#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - james Nick Compton"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a2dwdko8g8obddhkolh1v1usf2h4jjta" class="crayons-icon"><title id="a2dwdko8g8obddhkolh1v1usf2h4jjta">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2357166" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2357166" data-article-author-id="2977098" aria-label="Save post james Nick Compton to reading list" title="Save post james Nick Compton to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2353388" data-content-user-id="2177953"> <a href="https://dev.to/jaywatson2pt0/lets-build-a-full-stack-app-using-the-mern-stack-part-3-react-nextjs-ui-5fcd" aria-labelledby="article-link-2353388" class="crayons-story__hidden-navigation-link">Let's Build a Full-Stack App Using the MERN Stack! Part 3: React NextJS UI</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/jaywatson2pt0" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2177953%2F0bd52c95-c6ed-4af7-8275-434fb9cc7ca4.jpeg" alt="jaywatson2pt0 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/jaywatson2pt0" class="crayons-story__secondary fw-medium m:hidden"> Jay Watson </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2353388" aria-controls="story-author-preview-content-2353388" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Jay Watson profile details"> Jay Watson </button> <div id="story-author-preview-content-2353388" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/jaywatson2pt0" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2177953%2F0bd52c95-c6ed-4af7-8275-434fb9cc7ca4.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Jay Watson</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2177953,"className":"User","name":"Jay Watson"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2177953"></div> </div> </div> </div> </div> <a href="https://dev.to/jaywatson2pt0/lets-build-a-full-stack-app-using-the-mern-stack-part-3-react-nextjs-ui-5fcd" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-25T23:43:55Z">Mar 25</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742946235"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/jaywatson2pt0/lets-build-a-full-stack-app-using-the-mern-stack-part-3-react-nextjs-ui-5fcd" data-preload-image="" id="article-link-2353388"> Let's Build a Full-Stack App Using the MERN Stack! Part 3: React NextJS UI </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/fullstack"><span class="crayons-tag__prefix">#</span>fullstack</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/jaywatson2pt0/lets-build-a-full-stack-app-using-the-mern-stack-part-3-react-nextjs-ui-5fcd#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Let's Build a Full-Stack App Using the MERN Stack! Part 3: React NextJS UI"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7tzpbuing2dni6ilwi5r1v6n96id8cr" class="crayons-icon"><title id="a7tzpbuing2dni6ilwi5r1v6n96id8cr">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2353388" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2353388" data-article-author-id="2177953" aria-label="Save post Let's Build a Full-Stack App Using the MERN Stack! Part 3: React NextJS UI to reading list" title="Save post Let's Build a Full-Stack App Using the MERN Stack! Part 3: React NextJS UI to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2357815" data-content-user-id="1162010"> <a href="https://dev.to/drishti1920/vite-shadcn-boilerplate-save-time-and-get-started-quickly-jhg" aria-labelledby="article-link-2357815" class="crayons-story__hidden-navigation-link">React+ ShadCN Dark Theme Boilerplate</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/drishti1920" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1162010%2F9124dc81-1457-4634-ae0a-e7c9ee33468d.jpg" alt="drishti1920 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/drishti1920" class="crayons-story__secondary fw-medium m:hidden"> Drishti Saraf </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2357815" aria-controls="story-author-preview-content-2357815" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Drishti Saraf profile details"> Drishti Saraf </button> <div id="story-author-preview-content-2357815" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/drishti1920" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1162010%2F9124dc81-1457-4634-ae0a-e7c9ee33468d.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Drishti Saraf</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1162010,"className":"User","name":"Drishti Saraf"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1162010"></div> </div> </div> </div> </div> <a href="https://dev.to/drishti1920/vite-shadcn-boilerplate-save-time-and-get-started-quickly-jhg" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-27T04:47:48Z">Mar 27</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743050868"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/drishti1920/vite-shadcn-boilerplate-save-time-and-get-started-quickly-jhg" data-preload-image="" id="article-link-2357815"> React+ ShadCN Dark Theme Boilerplate </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/drishti1920/vite-shadcn-boilerplate-save-time-and-get-started-quickly-jhg#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React+ ShadCN Dark Theme Boilerplate"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arxnpje22m9r9azzve9amcn92q22uuma" class="crayons-icon"><title id="arxnpje22m9r9azzve9amcn92q22uuma">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2357815" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2357815" data-article-author-id="1162010" aria-label="Save post React+ ShadCN Dark Theme Boilerplate to reading list" title="Save post React+ ShadCN Dark Theme Boilerplate to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2357125" data-content-user-id="2938590"> <a href="https://dev.to/muhammed_fayazts_e35676/web-workers-vs-service-workers-in-react-a-complete-guide-with-use-cases-2po7" aria-labelledby="article-link-2357125" class="crayons-story__hidden-navigation-link">Web Workers vs. Service Workers in React: A Complete Guide with Use Cases</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/muhammed_fayazts_e35676" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2938590%2Fd9ba787f-aecb-43b3-b8b6-5f0689464dd1.jpg" alt="muhammed_fayazts_e35676 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/muhammed_fayazts_e35676" class="crayons-story__secondary fw-medium m:hidden"> Muhammed Fayaz T S </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2357125" aria-controls="story-author-preview-content-2357125" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Muhammed Fayaz T S profile details"> Muhammed Fayaz T S </button> <div id="story-author-preview-content-2357125" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/muhammed_fayazts_e35676" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2938590%2Fd9ba787f-aecb-43b3-b8b6-5f0689464dd1.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Muhammed Fayaz T S</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2938590,"className":"User","name":"Muhammed Fayaz T S"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2938590"></div> </div> </div> </div> </div> <a href="https://dev.to/muhammed_fayazts_e35676/web-workers-vs-service-workers-in-react-a-complete-guide-with-use-cases-2po7" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-26T05:11:39Z">Mar 26</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742965899"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/muhammed_fayazts_e35676/web-workers-vs-service-workers-in-react-a-complete-guide-with-use-cases-2po7" data-preload-image="" id="article-link-2357125"> Web Workers vs. Service Workers in React: A Complete Guide with Use Cases </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/muhammed_fayazts_e35676/web-workers-vs-service-workers-in-react-a-complete-guide-with-use-cases-2po7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Web Workers vs. Service Workers in React: A Complete Guide with Use Cases"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="afhw40muvdx7mlov371lbx4687lswten" class="crayons-icon"><title id="afhw40muvdx7mlov371lbx4687lswten">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2357125" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2357125" data-article-author-id="2938590" aria-label="Save post Web Workers vs. Service Workers in React: A Complete Guide with Use Cases to reading list" title="Save post Web Workers vs. Service Workers in React: A Complete Guide with Use Cases to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2356035" data-content-user-id="667185"> <a href="https://dev.to/cfarhad/react-elementor-115m" aria-labelledby="article-link-2356035" class="crayons-story__hidden-navigation-link">React Elementor</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/cfarhad" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F667185%2F9f923fc3-a4a5-4f33-be22-175f10860b34.jpg" alt="cfarhad profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/cfarhad" class="crayons-story__secondary fw-medium m:hidden"> Farhad Bagheri </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2356035" aria-controls="story-author-preview-content-2356035" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Farhad Bagheri profile details"> Farhad Bagheri </button> <div id="story-author-preview-content-2356035" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/cfarhad" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F667185%2F9f923fc3-a4a5-4f33-be22-175f10860b34.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Farhad Bagheri</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":667185,"className":"User","name":"Farhad Bagheri"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="667185"></div> </div> </div> </div> </div> <a href="https://dev.to/cfarhad/react-elementor-115m" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-25T14:48:45Z">Mar 25</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742914125"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/cfarhad/react-elementor-115m" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F54tgirzosyo08quj37a5.png" id="article-link-2356035"> React Elementor </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(38, 190, 0, 0.10); --tag-prefix: #26BE00; --tag-bg-hover: rgba(38, 190, 0, 0.10); --tag-prefix-hover: #26BE00; " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/cfarhad/react-elementor-115m#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React Elementor"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acpyqe7gj8wupjyyx8y7xuvmundzn8vi" class="crayons-icon"><title id="acpyqe7gj8wupjyyx8y7xuvmundzn8vi">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2356035" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2356035" data-article-author-id="667185" aria-label="Save post React Elementor to reading list" title="Save post React Elementor to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2356497" data-content-user-id="2976164"> <a href="https://dev.to/fourtwentydev/solving-the-contact-form-security-dilemma-in-static-sites-and-spas-59n7" aria-labelledby="article-link-2356497" class="crayons-story__hidden-navigation-link">Solving the Contact Form Security Dilemma in Static Sites and SPAs</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/fourtwentydev" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2976164%2F63cc1968-17c6-4a86-a8d4-8341b26efb19.png" alt="fourtwentydev profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/fourtwentydev" class="crayons-story__secondary fw-medium m:hidden"> FourTwentyDev </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2356497" aria-controls="story-author-preview-content-2356497" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="FourTwentyDev profile details"> FourTwentyDev </button> <div id="story-author-preview-content-2356497" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/fourtwentydev" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2976164%2F63cc1968-17c6-4a86-a8d4-8341b26efb19.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">FourTwentyDev</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2976164,"className":"User","name":"FourTwentyDev"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2976164"></div> </div> </div> </div> </div> <a href="https://dev.to/fourtwentydev/solving-the-contact-form-security-dilemma-in-static-sites-and-spas-59n7" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-25T19:51:20Z">Mar 25</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742932280"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/fourtwentydev/solving-the-contact-form-security-dilemma-in-static-sites-and-spas-59n7" data-preload-image="" id="article-link-2356497"> Solving the Contact Form Security Dilemma in Static Sites and SPAs </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/fourtwentydev/solving-the-contact-form-security-dilemma-in-static-sites-and-spas-59n7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Solving the Contact Form Security Dilemma in Static Sites and SPAs"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aqyqsz950xb1hs2x9rrnqeliajg8aq16" class="crayons-icon"><title id="aqyqsz950xb1hs2x9rrnqeliajg8aq16">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> <button type="button" id="article-save-button-2356497" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2356497" data-article-author-id="2976164" aria-label="Save post Solving the Contact Form Security Dilemma in Static Sites and SPAs to reading list" title="Save post Solving the Contact Form Security Dilemma in Static Sites and SPAs to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2355789" data-content-user-id="911657"> <a href="https://dev.to/sharma572/mastering-objectgroupby-the-game-changer-for-javascript-data-handling-2neg" aria-labelledby="article-link-2355789" class="crayons-story__hidden-navigation-link">🚀 Mastering Object.groupBy(): The Game-Changer for JavaScript Data Handling!</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/sharma572" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F911657%2F3b3c8634-3d4c-436a-bf76-e333c2a61652.jpeg" alt="sharma572 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/sharma572" class="crayons-story__secondary fw-medium m:hidden"> Raunak Sharma </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2355789" aria-controls="story-author-preview-content-2355789" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Raunak Sharma profile details"> Raunak Sharma </button> <div id="story-author-preview-content-2355789" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/sharma572" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F911657%2F3b3c8634-3d4c-436a-bf76-e333c2a61652.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Raunak Sharma</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":911657,"className":"User","name":"Raunak Sharma"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="911657"></div> </div> </div> </div> </div> <a href="https://dev.to/sharma572/mastering-objectgroupby-the-game-changer-for-javascript-data-handling-2neg" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-25T11:50:54Z">Mar 25</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742903454"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/sharma572/mastering-objectgroupby-the-game-changer-for-javascript-data-handling-2neg" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4lb69uzaj8vqy2gbr1pb.png" id="article-link-2355789"> 🚀 Mastering Object.groupBy(): The Game-Changer for JavaScript Data Handling! </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/sharma572/mastering-objectgroupby-the-game-changer-for-javascript-data-handling-2neg#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🚀 Mastering Object.groupBy(): The Game-Changer for JavaScript Data Handling!"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acuqtrvp9150glcxne9xb8s7vb11todp" class="crayons-icon"><title id="acuqtrvp9150glcxne9xb8s7vb11todp">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2355789" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2355789" data-article-author-id="911657" aria-label="Save post 🚀 Mastering Object.groupBy(): The Game-Changer for JavaScript Data Handling! to reading list" title="Save post 🚀 Mastering Object.groupBy(): The Game-Changer for JavaScript Data Handling! to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2356337" data-content-user-id="673257"> <a href="https://dev.to/kadkarl/how-i-built-a-fully-customizable-bottom-navigation-bar-for-ionic-react-43l2" aria-labelledby="article-link-2356337" class="crayons-story__hidden-navigation-link">🚀 How I Built a Fully Customizable Bottom Navigation Bar for Ionic React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/kadkarl" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F673257%2F21fc2a86-d2b7-4738-bd54-68991fa250be.jpeg" alt="kadkarl profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/kadkarl" class="crayons-story__secondary fw-medium m:hidden"> bendahmane kader </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2356337" aria-controls="story-author-preview-content-2356337" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="bendahmane kader profile details"> bendahmane kader </button> <div id="story-author-preview-content-2356337" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kadkarl" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F673257%2F21fc2a86-d2b7-4738-bd54-68991fa250be.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">bendahmane kader</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":673257,"className":"User","name":"bendahmane kader"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="673257"></div> </div> </div> </div> </div> <a href="https://dev.to/kadkarl/how-i-built-a-fully-customizable-bottom-navigation-bar-for-ionic-react-43l2" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-25T17:36:32Z">Mar 25</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742924192"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/kadkarl/how-i-built-a-fully-customizable-bottom-navigation-bar-for-ionic-react-43l2" data-preload-image="" id="article-link-2356337"> 🚀 How I Built a Fully Customizable Bottom Navigation Bar for Ionic React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(163, 252, 85, 0.10); --tag-prefix: #a3fc55; --tag-bg-hover: rgba(163, 252, 85, 0.10); --tag-prefix-hover: #a3fc55; " href="/t/mobile"><span class="crayons-tag__prefix">#</span>mobile</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(76, 138, 255, 0.10); --tag-prefix: #4C8AFF; --tag-bg-hover: rgba(76, 138, 255, 0.10); --tag-prefix-hover: #4C8AFF; " href="/t/ionic"><span class="crayons-tag__prefix">#</span>ionic</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/development"><span class="crayons-tag__prefix">#</span>development</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/kadkarl/how-i-built-a-fully-customizable-bottom-navigation-bar-for-ionic-react-43l2#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🚀 How I Built a Fully Customizable Bottom Navigation Bar for Ionic React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="afaildjxjx6g9u9u8n4famadcvqgpl5y" class="crayons-icon"><title id="afaildjxjx6g9u9u8n4famadcvqgpl5y">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2356337" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2356337" data-article-author-id="673257" aria-label="Save post 🚀 How I Built a Fully Customizable Bottom Navigation Bar for Ionic React to reading list" title="Save post 🚀 How I Built a Fully Customizable Bottom Navigation Bar for Ionic React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="placeholder-div"></div> <div class="single-article-small-pic" id="article-index-hidden-div" style="display:none"></div> </div> <div class="loading-articles" id="loading-articles"> loading... </div> </main> </div> <script src="https://assets.dev.to/assets/storiesList-b9c50cbd898a3a64258a3a49db1c531651b0a4a11937be35ed4651111802b5b5.js" defer="defer"></script> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/tagFollows-25496b4e3bf8bec41c7881be6b330ac8e9aa612d1ce876863a984d934d839384.js" defer="defer"></script> <script src="https://assets.dev.to/assets/feedPreviewCards-8d16b0b656456a28c0a290f756cf6e21e19833111c4796f48c631bfea8323d51.js" defer="defer"></script> <script src="https://assets.dev.to/assets/hideBookmarkButtons-0cc08aac1c422e6b6f75e5284b5350215abf211b59fb3eb8d8a4ef85e205b607.js" defer="defer"></script> <script src="https://assets.dev.to/assets/drawerSliders-823098a874684cfb50f32368b8dd1c7854954b83a588b8b6cfaef1e8fd30d858.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <style> .long-bb-body { max-height: calc(100vh - 200px); overflow: hidden; } .long-bb-bottom { height: 180px; background: linear-gradient(to top, var(--card-bg), transparent); margin-top: -180px; position:relative; z-index: 5; } </style> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/?bb=146443">Neon</a> for supporting our community. </p> </div> <p class="fs-s crayons-footer__description"> <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a> — A constructive and inclusive social network for software developers. With you every step of your journey. </p> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <div class="fs-s"> <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p> <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2025.</p> </div> </div> </footer> <div id="snack-zone"></div> <div id="global-signup-modal" class="authentication-modal hidden"> <div class="authentication-modal__container"> <figure class="authentication-modal__image-container"> <img class="authentication-modal__image" src="https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="DEV Community" loading="lazy" /> </figure> <div class="authentication-modal__content"> <p class="authentication-modal__description"> We're a place where coders share, stay up-to-date and grow their careers. </p> </div> <div class="authentication-modal__actions"> <a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant> Log in </a> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> <script> var userSignedIn = false; if (document.readyState === 'complete' || document.readyState === 'interactive') { initAuth(); } else { document.addEventListener('DOMContentLoaded', initAuth); } function initAuth() { var paramToken = new URLSearchParams(window.location.search).get('jwt'); if (paramToken && !userSignedIn) { authenticateUser(paramToken); } else { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'https://forem.com/auth_pass/iframe'; document.body.appendChild(iframe); window.addEventListener('message', function(event) { if (event.origin !== 'https://forem.com' && event.origin !== window.location.origin) { return; } var data = event.data; if (data.authenticated && !userSignedIn) { authenticateUser(data.token); } else if(data.authenticated && window.ReactNativeWebView && window.ReactNativeWebView.postMessage) { window.ReactNativeWebView.postMessage(JSON.stringify({ action: 'login', token: data.token, })); } }); } function authenticateUser(token) { fetch('/auth_pass/token_login', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getMetaContent('csrf-token'), }, body: JSON.stringify({ token: token }), }) .then(function(response) { return response.json(); }) .then(function(data) { if (data.success) { if (document.head.querySelector('meta[name="user-signed-in"][content="false"]')) { // Reload the page to update the user's state location.reload(); } } }) .catch(function(error) { console.error('Error during authentication:', error); }); } function getMetaContent(name) { var element = document.querySelector('meta[name="' + name + '"]'); return element ? element.getAttribute('content') : ''; } } </script> </body> </html>

CINXE.COM

React Page 4 - DEV Community