[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002F10-react-code-snippets-that-every-developer-needs":671,"blog-author-\u002Fblog\u002F10-react-code-snippets-that-every-developer-needs":1188,"i-material-symbols:arrow-back-rounded":1203},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":1175,"buttonUrl":1175,"category":1176,"date":1177,"description":1178,"draft":1179,"editorsPick":1179,"extension":1180,"featured":1179,"image":1181,"imageAlt":1182,"meta":1183,"navigation":32,"ogImage":1175,"ogImageAlt":1175,"path":1184,"seo":1185,"stem":1186,"tags":1175,"__hash__":1187},"blog\u002Fblog\u002F10-react-code-snippets-that-every-developer-needs.md","10 React Code Snippets that Every Developer Needs","Abara Vivian","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fadvanced-git-strategies-for-developers\u002Fauthor.jpeg","Abara Vivian headshot.","abara-vivian",{"type":679,"value":680,"toc":1155},"minimark",[681,685,688,691,696,707,711,714,743,747,755,782,789,793,796,801,821,832,839,843,860,866,872,876,892,898,904,908,925,931,937,941,958,964,970,974,992,998,1004,1008,1024,1030,1036,1040,1056,1062,1068,1072,1088,1094,1100,1104,1121,1127,1133,1137,1152],[682,683,684],"p",{},"In React development, the principle of reusability holds significant importance. The ability to craft generic functions and components that can be reused not only streamlines code refactoring but also adheres to the fundamental principle “Don't Repeat Yourself” (DRY). This approach not only enhances React code efficiency and maintainability but also increases productivity by saving valuable time.",[682,686,687],{},"As developers, we frequently encounter components that warrant reuse across various projects. For instance, a generic button component with consistent properties might be needed in multiple pages or applications. While manually copying and pasting components across projects might seem like a quick fix, it can lead to unnecessary errors and inefficiency. This is where the practice of saving React code snippets proves invaluable. By storing these reusable code fragments, developers can expedite future development tasks.",[682,689,690],{},"However, there's a caveat to this approach. As the repository of saved snippets grows, it can become unwieldy, making it challenging to navigate and maintain. To address this issue, employing a dedicated code snippet management tool becomes imperative. Such tools facilitate organized storage and retrieval of snippets, thereby enhancing developer efficiency and project scalability. This article explores the importance of saving and managing code snippets using a snippet management tool and some essential code snippets that you can use in any React project.",[692,693,695],"h2",{"id":694},"what-is-react","What is React?",[682,697,698,699,706],{},"React is a front-end library that is based on JavaScript. It is maintained by teams at Meta, and commonly used to build user interfaces. ReactJS can be combined with other frameworks, like Next.js, to create mobile and server-rendered applications, among other uses. Check out the ",[700,701,705],"a",{"href":702,"rel":703},"https:\u002F\u002Freact.dev\u002Flearn",[704],"nofollow","React docs"," to learn more.",[692,708,710],{"id":709},"why-you-need-a-snippet-management-tool","Why You Need a Snippet Management Tool",[682,712,713],{},"A snippet management tool is a software application designed to help developers store, organize, manage, and retrieve their code snippets effectively. It serves as an indispensable asset for developers by facilitating version control and collaboration among team members. While this is not a replacement for documentation like the Reactjs docs, maintaining your own snippet repository is an excellent way to enhance your personal workflow. Here are some major reasons why every developer needs one:",[715,716,717,725,731,737],"ul",{},[718,719,720,724],"li",{},[721,722,723],"strong",{},"Efficiency",": With a snippet management tool, developers can quickly access and insert commonly used code snippets into their projects without the need to rewrite them from scratch. This saves significant time and effort during development, allowing developers to focus more on solving problems and building features rather than repetitive tasks.",[718,726,727,730],{},[721,728,729],{},"Consistency",": By storing and organizing code snippets in a central repository, developers can ensure consistency across projects. This means using the same reliable and tested code snippets repeatedly, reducing the risk of errors and inconsistencies in codebases. It also helps maintain uniform coding standards and practices across teams and projects.",[718,732,733,736],{},[721,734,735],{},"Knowledge Sharing",": Snippet management tools enable developers to share useful code snippets with their team members or the broader developer community. This fosters collaboration and knowledge sharing within teams and across organizations, as developers can benefit from each other's expertise and solutions to common coding challenges.",[718,738,739,742],{},[721,740,741],{},"Learning and Growth",": As developers accumulate and organize code in their snippet management tool, they also build a valuable resource for learning and personal growth. By reviewing and reusing snippets, developers can deepen their understanding of coding patterns, best practices, and advanced techniques. Over time, this continuous learning process enhances their skills and makes them more proficient developers.",[692,744,746],{"id":745},"introducing-pieces","Introducing Pieces",[682,748,749,750,754],{},"In this article, we will use ",[700,751,8],{"href":752,"rel":753},"https:\u002F\u002Fpieces.app\u002F",[704]," to store the discussed React code. Pieces is not your ordinary snippet management tool; it's a powerhouse equipped with on-device AI that learns from your actions, automatically adding titles, descriptions, related links, and more. With a plethora of outstanding features, Pieces is a must-have tool for every developer. These features include:",[756,757,758,764,770,776],"ol",{},[718,759,760,763],{},[721,761,762],{},"Snippet Management",": Effortlessly save and store various developer resources such as code snippets, scratch files, and screenshots.",[718,765,766,769],{},[721,767,768],{},"AI-Enabled Features",": Pieces includes an on-device copilot that assists in capturing, enriching, and reusing materials. It streamlines collaboration and solves complex problems through a contextual understanding of workflows.",[718,771,772,775],{},[721,773,774],{},"Extensions and Plugins",": Compatible with VS Code, GitHub, web browsers, Microsoft Teams, and more, allowing for enhanced developer materials across workflows and improved AI capabilities.",[718,777,778,781],{},[721,779,780],{},"Personal Copilot",": Pieces' copilot and code capture feature enable saving, sharing, generating, and understanding code snippets and concepts. This boosts productivity during online research and problem-solving endeavors.",[682,783,784,788],{},[700,785,787],{"href":449,"rel":786},[704],"Pieces revolutionizes"," the way developers manage and utilize their resources.",[692,790,792],{"id":791},"_10-essential-react-code-snippets","10 Essential React Code Snippets",[682,794,795],{},"As a React developer, there are components or code snippets that you may need to reuse multiple times. Let’s take a look at some React example code as you’re getting started with React. Here are some of the major, most-used React code components:",[797,798,800],"h3",{"id":799},"_1-functional-component-with-props","1. Functional Component with Props",[715,802,803,809,815],{},[718,804,805,808],{},[721,806,807],{},"Description",": A fundamental building block in React apps that creates reusable UI components.",[718,810,811,814],{},[721,812,813],{},"Use case",": Displaying a message passed as a prop.",[718,816,817,820],{},[721,818,819],{},"Code snippet",":",[822,823,828],"pre",{"className":824,"code":826,"language":827},[825],"language-text","import React from 'react';\n  const MyComponent = (props) => {\n    return \n {props.message} \n;\n  };\n  export default MyComponent;\n","text",[829,830,826],"code",{"__ignoreMap":831},"",[682,833,834],{},[700,835,838],{"href":836,"rel":837},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=76194daa7b",[704],"Save this code",[797,840,842],{"id":841},"_2-list-rendering","2. List Rendering",[715,844,845,851,856],{},[718,846,847,850],{},[721,848,849],{},"Description:"," Renders items in a list, mostly from an API or database, to be displayed on the user interface.",[718,852,853,855],{},[721,854,813],{},": Displaying a list of items.",[718,857,858,820],{},[721,859,819],{},[822,861,864],{"className":862,"code":863,"language":827},[825],"import React from 'react';\nconst List = ({ items }) => {\n  return (\n      {items.map(item => (\n{item.name}\n      ))}\n  );\n};\nexport default List;\n",[829,865,863],{"__ignoreMap":831},[682,867,868],{},[700,869,838],{"href":870,"rel":871},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=66b443b024",[704],[797,873,875],{"id":874},"_3-forms","3. Forms",[715,877,878,883,888],{},[718,879,880,882],{},[721,881,807],{},": React code that handles forms and input submission.",[718,884,885,887],{},[721,886,813],{},": Creating a form for user input.",[718,889,890,820],{},[721,891,819],{},[822,893,896],{"className":894,"code":895,"language":827},[825],"import React, { useState } from 'react';\nconst Form = () => {\nconst [value, setValue] = useState('');\n  const handleChange = (e) => setValue(e.target.value);\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    \u002F\u002F Handle form submission\n  };\n  return (\nSubmit    \n  );\n};\nexport default Form;\n",[829,897,895],{"__ignoreMap":831},[682,899,900],{},[700,901,838],{"href":902,"rel":903},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=72454ea3d3",[704],[797,905,907],{"id":906},"_4-custom-hooks","4. Custom Hooks",[715,909,910,915,921],{},[718,911,912,914],{},[721,913,807],{},": Creates a hook for reusing stateful logic.",[718,916,917,920],{},[721,918,919],{},"Use case:"," Fetching data from an API with reusable logic.",[718,922,923,820],{},[721,924,819],{},[822,926,929],{"className":927,"code":928,"language":827},[825],"import { useState, useEffect } from 'react';\nconst useFetch = (url) => {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  useEffect(() => {\n    const fetchData = async () => {\n      const response = await fetch(url);\n      const data = await response.json();\n      setData(data);\n      setLoading(false);\n    };\n    fetchData();\n  }, [url]);\n  return { data, loading };\n};\nexport default useFetch;\n",[829,930,928],{"__ignoreMap":831},[682,932,933],{},[700,934,838],{"href":935,"rel":936},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=6586428f6c",[704],[797,938,940],{"id":939},"_5-modal-component","5. Modal Component",[715,942,943,948,953],{},[718,944,945,947],{},[721,946,849],{}," A component for displaying overlay modals.",[718,949,950,952],{},[721,951,919],{}," Displaying a notification modal.",[718,954,955],{},[721,956,957],{},"Code Snippet:",[822,959,962],{"className":960,"code":961,"language":827},[825],"import React from 'react';\nconst Modal = ({ isOpen, onClose, children }) => {\n  return isOpen ? (\n              {children}        Close          \n  ) : null;\n};\nexport default Modal;\n",[829,963,961],{"__ignoreMap":831},[682,965,966],{},[700,967,838],{"href":968,"rel":969},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=f7b34e82a4",[704],[797,971,973],{"id":972},"_6-tabs-component","6. Tabs Component",[715,975,976,981,987],{},[718,977,978,980],{},[721,979,807],{},": A tab component for switching between different content.",[718,982,983,986],{},[721,984,985],{},"Use Case",": Implementing tabbed navigation for different sections of a page",[718,988,989,820],{},[721,990,991],{},"Code Snippet",[822,993,996],{"className":994,"code":995,"language":827},[825],"import React, { useState } from 'react';\nconst Tabs = ({ tabs }) => {\n  const [activeTab, setActiveTab] = useState(0);\n  return (\n      {tabs.map((tab, index) => (                  key={index}          className={`tab ${index === activeTab ? 'active' : ''}`}          onClick={() => setActiveTab(index)}        >          {tab.title}        \n      ))}\n{tabs[activeTab].content}\n);\n};\nexport default Tabs;\n",[829,997,995],{"__ignoreMap":831},[682,999,1000],{},[700,1001,838],{"href":1002,"rel":1003},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=36434b9162",[704],[797,1005,1007],{"id":1006},"_7-image-slider-component","7. Image Slider Component",[715,1009,1010,1015,1020],{},[718,1011,1012,1014],{},[721,1013,807],{},": An image slider for displaying multiple images.",[718,1016,1017,1019],{},[721,1018,813],{},": Image carousel",[718,1021,1022,820],{},[721,1023,819],{},[822,1025,1028],{"className":1026,"code":1027,"language":827},[825],"import React, { useState } from 'react';\nconst ImageSlider = ({ images }) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n  const nextSlide = () => setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));\n  const prevSlide = () => setCurrentIndex((prevIndex) => (prevIndex === 0 \nimages.length - 1 : prevIndex - 1));\n  return (\n      Prev            Next    \n  );\n};\nexport default ImageSlider;\n",[829,1029,1027],{"__ignoreMap":831},[682,1031,1032],{},[700,1033,838],{"href":1034,"rel":1035},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=a99548a4e2",[704],[797,1037,1039],{"id":1038},"_8-button-component","8. Button Component",[715,1041,1042,1047,1052],{},[718,1043,1044,1046],{},[721,1045,807],{},": Reusable button component in React code.",[718,1048,1049,1051],{},[721,1050,813],{},": A UI button component that accepts different props.",[718,1053,1054,820],{},[721,1055,819],{},[822,1057,1060],{"className":1058,"code":1059,"language":827},[825],"import React from 'react';\nimport PropTypes from 'prop-types';\nconst Button = ({ type, className, children, ...props }) => {\n  return (\n    \n      type={type}\n      className={className}\n      {...props}\n    >\n      {children}\n  );\n};\nButton.propTypes = {\n  type: PropTypes.oneOf(['button', 'submit', 'reset']),\n  className: PropTypes.string,\n  children: PropTypes.node.isRequired,\n};\nButton.defaultProps = {\n  type: 'button',\n  className: '',\n};\nexport default Button;\n",[829,1061,1059],{"__ignoreMap":831},[682,1063,1064],{},[700,1065,838],{"href":1066,"rel":1067},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=e13748af92",[704],[797,1069,1071],{"id":1070},"_9-loading-spinner-component","9. Loading Spinner Component",[715,1073,1074,1079,1084],{},[718,1075,1076,1078],{},[721,1077,849],{}," A reusable loading spinner to simulate a loading effect.",[718,1080,1081,1083],{},[721,1082,813],{},": Show loading spinner when data from an API is yet to arrive.",[718,1085,1086],{},[721,1087,957],{},[822,1089,1092],{"className":1090,"code":1091,"language":827},[825],"import React from 'react';\nconst Spinner = ({ size, color }) => {\n  const spinnerStyle = {\n    width: size,\n    height: size,\n    borderTopColor: color,\n    borderLeftColor: 'transparent',\n    animation: 'spin 1s linear infinite',\n    borderWidth: '2px',\n    borderStyle: 'solid',\n    borderRadius: '50%',\n  };\n  return (\n  );\n};\nSpinner.defaultProps = {\n  size: '6',\n  color: 'rgba(59, 130, 246, 1)',\n};\nexport default Spinner;\n",[829,1093,1091],{"__ignoreMap":831},[682,1095,1096],{},[700,1097,838],{"href":1098,"rel":1099},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=1ec04281ef",[704],[797,1101,1103],{"id":1102},"_10-dropdown-component","10. Dropdown Component",[715,1105,1106,1111,1116],{},[718,1107,1108,1110],{},[721,1109,807],{},": A component for selecting options.",[718,1112,1113,1115],{},[721,1114,813],{},": Select options based on a filter or category.",[718,1117,1118],{},[721,1119,1120],{},"Code snippet:",[822,1122,1125],{"className":1123,"code":1124,"language":827},[825],"import React from 'react';\nconst Dropdown = ({ options, onSelect }) => {\n  return (\n onSelect(e.target.value)}>      {options.map((option) => (                  {option.label}              ))}    \n  );\n};\nexport default Dropdown;\n",[829,1126,1124],{"__ignoreMap":831},[682,1128,1129],{},[700,1130,838],{"href":1131,"rel":1132},"https:\u002F\u002F977e10f0-4293-44c1-83d4-c8e54ea498ef.pieces.cloud\u002F?p=336148912b",[704],[692,1134,1136],{"id":1135},"conclusion","Conclusion",[682,1138,1139,1140,1145,1146,1151],{},"In this article, we've covered some handy React code snippets that can save you time and effort in your projects. But why stop there? Create and save your favorite snippets to avoid reinventing the wheel and keep your solutions organized. Ready to boost your productivity? ",[700,1141,1144],{"href":1142,"rel":1143},"https:\u002F\u002Fdocs.pieces.app\u002Finstallation-getting-started\u002Fwindows",[704],"Download the Pieces desktop app"," to start building your personal snippet library. And don't forget to check out our ",[700,1147,1150],{"href":1148,"rel":1149},"https:\u002F\u002Fpieces.app\u002Fblog",[704],"blog"," for more developer-related insights.",[682,1153,1154],{},"Let’s code smarter, not harder. Happy coding!",{"title":831,"searchDepth":1156,"depth":1156,"links":1157},2,[1158,1159,1160,1161,1174],{"id":694,"depth":1156,"text":695},{"id":709,"depth":1156,"text":710},{"id":745,"depth":1156,"text":746},{"id":791,"depth":1156,"text":792,"children":1162},[1163,1165,1166,1167,1168,1169,1170,1171,1172,1173],{"id":799,"depth":1164,"text":800},3,{"id":841,"depth":1164,"text":842},{"id":874,"depth":1164,"text":875},{"id":906,"depth":1164,"text":907},{"id":939,"depth":1164,"text":940},{"id":972,"depth":1164,"text":973},{"id":1006,"depth":1164,"text":1007},{"id":1038,"depth":1164,"text":1039},{"id":1070,"depth":1164,"text":1071},{"id":1102,"depth":1164,"text":1103},{"id":1135,"depth":1156,"text":1136},null,"Software Development","2024-05-14T00:00:00.000Z","With these 10 React code snippets, you can save time in your development projects. Learn to manage all of your snippets with a code snippet manager like Pieces.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-19-comprehensive-guide\u002Fhero.jpeg","IDE.",{},"\u002Fblog\u002F10-react-code-snippets-that-every-developer-needs",{"title":673,"description":1178},"blog\u002F10-react-code-snippets-that-every-developer-needs","Ek7iFpmfGY4NmfnmWcb433XUVO7eWbB5lzqpaFG16iE",{"id":1189,"title":674,"body":1190,"description":1194,"draft":1179,"extension":1180,"meta":1197,"navigation":32,"path":1198,"photo":1199,"photoAlt":1175,"seo":1200,"stem":1201,"__hash__":1202},"authors\u002Fauthors\u002Fabara-vivian.md",{"type":679,"value":1191,"toc":1195},[1192],[682,1193,1194],{},"Front-End Developer with expertise in Next.js, React.js, JavaScript, CSS & libraries, and HTML. Skilled in crafting responsive designs and user-friendly interfaces, with a strong command of GitHub for version control and collaboration. Passionate about building scalable, high-performance web applications with a focus on modern frameworks and clean code.",{"title":831,"searchDepth":1156,"depth":1156,"links":1196},[],{},"\u002Fauthors\u002Fabara-vivian","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fabara-vivian.jpeg",{"title":674,"description":1194},"authors\u002Fabara-vivian","D5R8CJ5vttf875HuwcxgDLlEUYo85zOA81vOfKX1qs4",{"left":1204,"top":1204,"width":1205,"height":1205,"rotate":1204,"vFlip":1179,"hFlip":1179,"body":1206},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]