React - Turn-key research data management repository

<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="canonical" href="https://inveniordm.docs.cern.ch/develop/best-practices/react/"> <link rel="prev" href="../css-js/"> <link rel="next" href="../ui/"> <link rel="icon" href="../../../images/favicon.svg"> <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.40"> <title>React - Turn-key research data management repository</title> <link rel="stylesheet" href="../../../assets/stylesheets/main.8c3ca2c6.min.css"> <link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css"> <link rel="stylesheet" href="../../../stylesheets/extra.css"> <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script> </head> <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="custom"> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> <label class="md-overlay" for="__drawer"></label> <div data-md-component="skip"> <a href="#react" class="md-skip"> Skip to content </a> </div> <div data-md-component="announce"> </div> <header class="md-header" data-md-component="header"> <nav class="md-header__inner md-grid" aria-label="Header"> <a href="../../.." title="Turn-key research data management repository" class="md-header__button md-logo" aria-label="Turn-key research data management repository" data-md-component="logo"> <img src="../../../images/logo-rdm.png" alt="logo"> </a> <label class="md-header__button md-icon" for="__drawer"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class="md-header__title" data-md-component="header-title"> <div class="md-header__ellipsis"> <div class="md-header__topic"> Turn-key research data management repository </div> <div class="md-header__topic" data-md-component="header-topic"> React </div> </div> </div> <form class="md-header__option" data-md-component="palette"> <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="custom" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0"> <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg> </label> <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="orange" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1"> <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for="__search"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class="md-search" data-md-component="search" role="dialog"> <label class="md-search__overlay" for="__search"></label> <div class="md-search__inner" role="search"> <form class="md-search__form" name="search"> <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required> <label class="md-search__icon md-icon" for="__search"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class="md-search__options" aria-label="Search"> <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> </form> <div class="md-search__output"> <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix> <div class="md-search-result" data-md-component="search-result"> <div class="md-search-result__meta"> Initializing search </div> <ol class="md-search-result__list" role="presentation"></ol> </div> </div> </div> </div> </div> <div class="md-header__source"> <a href="https://github.com/inveniosoftware/docs-invenio-rdm" title="Go to repository" class="md-source" data-md-component="source"> <div class="md-source__icon md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg> </div> <div class="md-source__repository"> GitHub </div> </a> </div> </nav> </header> <div class="md-container" data-md-component="container"> <nav class="md-tabs" aria-label="Tabs" data-md-component="tabs"> <div class="md-grid"> <ul class="md-tabs__list"> <li class="md-tabs__item"> <a href="../../.." class="md-tabs__link"> Home </a> </li> <li class="md-tabs__item"> <a href="../../../features/" class="md-tabs__link"> Features </a> </li> <li class="md-tabs__item"> <a href="../../../install/" class="md-tabs__link"> Install </a> </li> <li class="md-tabs__item"> <a href="../../../customize/" class="md-tabs__link"> Customize </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href="../../" class="md-tabs__link"> Develop </a> </li> <li class="md-tabs__item"> <a href="../../../deploy/" class="md-tabs__link"> Deploy </a> </li> <li class="md-tabs__item"> <a href="../../../reference/" class="md-tabs__link"> Reference </a> </li> <li class="md-tabs__item"> <a href="../../../releases/" class="md-tabs__link"> Releases </a> </li> <li class="md-tabs__item"> <a href="../../../maintenance/" class="md-tabs__link"> Maintainers </a> </li> <li class="md-tabs__item"> <a href="../../../contribute/" class="md-tabs__link"> Onboard & Contribute </a> </li> </ul> </div> </nav> <main class="md-main" data-md-component="main"> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0"> <label class="md-nav__title" for="__drawer"> <a href="../../.." title="Turn-key research data management repository" class="md-nav__button md-logo" aria-label="Turn-key research data management repository" data-md-component="logo"> <img src="../../../images/logo-rdm.png" alt="logo"> </a> Turn-key research data management repository </label> <div class="md-nav__source"> <a href="https://github.com/inveniosoftware/docs-invenio-rdm" title="Go to repository" class="md-source" data-md-component="source"> <div class="md-source__icon md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg> </div> <div class="md-source__repository"> GitHub </div> </a> </div> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../.." class="md-nav__link"> Home </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" > <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0"> Features </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_2"> Features </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../features/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../features/ux/" class="md-nav__link"> Beautiful UX </a> </li> <li class="md-nav__item"> <a href="../../../features/scalable/" class="md-nav__link"> Highly scalable </a> </li> <li class="md-nav__item"> <a href="../../../features/customization/" class="md-nav__link"> Customizable </a> </li> <li class="md-nav__item"> <a href="../../../features/interoperable/" class="md-nav__link"> Interoperable </a> </li> <li class="md-nav__item"> <a href="../../../features/powerful/" class="md-nav__link"> Powerful </a> </li> <li class="md-nav__item"> <a href="../../../features/secure/" class="md-nav__link"> Secure </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8" > <label class="md-nav__link" for="__nav_2_8" id="__nav_2_8_label" tabindex="0"> Features walk-through </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_2_8"> Features walk-through </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../features/features-walk-through/" class="md-nav__link"> Features overview </a> </li> <li class="md-nav__item"> <a href="../../../features/features-walk-through/banners/" class="md-nav__link"> Site banners </a> </li> <li class="md-nav__item"> <a href="../../../features/features-walk-through/notifications/" class="md-nav__link"> Notifications </a> </li> <li class="md-nav__item"> <a href="../../../features/features-walk-through/access_requests/" class="md-nav__link"> Access requests </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" > <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0"> Install </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3"> Install </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../install/" class="md-nav__link"> Quick start </a> </li> <li class="md-nav__item"> <a href="../../../install/requirements/" class="md-nav__link"> System requirements </a> </li> <li class="md-nav__item"> <a href="../../../install/cli/" class="md-nav__link"> Install CLI </a> </li> <li class="md-nav__item"> <a href="../../../install/scaffold/" class="md-nav__link"> Scaffold </a> </li> <li class="md-nav__item"> <a href="../../../install/build-setup-run/" class="md-nav__link"> Build, setup & run </a> </li> <li class="md-nav__item"> <a href="../../../install/configuration/" class="md-nav__link"> Configure </a> </li> <li class="md-nav__item"> <a href="../../../install/run/" class="md-nav__link"> Use </a> </li> <li class="md-nav__item"> <a href="../../../install/migrate/" class="md-nav__link"> Migrate </a> </li> <li class="md-nav__item"> <a href="../../../install/destroy/" class="md-nav__link"> Destroy </a> </li> <li class="md-nav__item"> <a href="../../../install/troubleshoot/" class="md-nav__link"> Troubleshooting </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" > <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0"> Customize </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4"> Customize </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" > <label class="md-nav__link" for="__nav_4_2" id="__nav_4_2_label" tabindex="0"> Look-and-feel </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_2"> Look-and-feel </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/logo/" class="md-nav__link"> Change logo </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/templates/" class="md-nav__link"> Change templates </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/theme/" class="md-nav__link"> Change theme </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/font/" class="md-nav__link"> Change font </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../customize/authentication/" class="md-nav__link"> Authentication </a> </li> <li class="md-nav__item"> <a href="../../../customize/emails/" class="md-nav__link"> Sending emails </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_5" > <label class="md-nav__link" for="__nav_4_5" id="__nav_4_5_label" tabindex="0"> Search </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_5"> Search </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/search/" class="md-nav__link"> Change facets/sorting </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_6" > <label class="md-nav__link" for="__nav_4_6" id="__nav_4_6_label" tabindex="0"> Vocabularies </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_6"> Vocabularies </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/vocabularies/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/resource_types/" class="md-nav__link"> Resource types </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/affiliations/" class="md-nav__link"> Affiliations </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/names/" class="md-nav__link"> Names </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/funding/" class="md-nav__link"> Funding </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/subjects/" class="md-nav__link"> Subjects </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/users/" class="md-nav__link"> Users </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" > <label class="md-nav__link" for="__nav_4_7" id="__nav_4_7_label" tabindex="0"> Metadata </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_7"> Metadata </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/metadata/optional_fields/" class="md-nav__link"> Optional metadata </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7_2" > <label class="md-nav__link" for="__nav_4_7_2" id="__nav_4_7_2_label" tabindex="0"> Custom fields </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_7_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_7_2"> Custom fields </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/metadata/custom_fields/records/" class="md-nav__link"> Add fields to records </a> </li> <li class="md-nav__item"> <a href="../../../customize/metadata/custom_fields/communities/" class="md-nav__link"> Add fields to communities </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../customize/record_landing_page/" class="md-nav__link"> Record landing page </a> </li> <li class="md-nav__item"> <a href="../../../customize/static_pages/" class="md-nav__link"> Static pages </a> </li> <li class="md-nav__item"> <a href="../../../customize/dois/" class="md-nav__link"> DOI registration </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11" > <label class="md-nav__link" for="__nav_4_11" id="__nav_4_11_label" tabindex="0"> Other PIDs integrations </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_11_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_11"> Other PIDs integrations </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/other-pids/urns/" class="md-nav__link"> DNB URNs </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../customize/s3/" class="md-nav__link"> Storage </a> </li> <li class="md-nav__item"> <a href="../../../customize/upload_limits/" class="md-nav__link"> Upload Limits </a> </li> <li class="md-nav__item"> <a href="../../../customize/metadata_only/" class="md-nav__link"> Metadata-only records </a> </li> <li class="md-nav__item"> <a href="../../../customize/Logging/" class="md-nav__link"> Logging </a> </li> <li class="md-nav__item"> <a href="../../../customize/i18n-and-l10n/" class="md-nav__link"> Internationalisation (i18n) and Localisation (l10n) </a> </li> <li class="md-nav__item"> <a href="../../../customize/notifications/" class="md-nav__link"> Notifications </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" checked> <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex=""> Develop </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="true"> <label class="md-nav__title" for="__nav_5"> Develop </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" > <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0"> Getting started </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2"> Getting started </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../getting-started/source-code/" class="md-nav__link"> Source code </a> </li> <li class="md-nav__item"> <a href="../../getting-started/package-development/" class="md-nav__link"> Package development </a> </li> <li class="md-nav__item"> <a href="../../getting-started/instance-development/" class="md-nav__link"> Instance development </a> </li> <li class="md-nav__item"> <a href="../../getting-started/debugging/" class="md-nav__link"> Debugging </a> </li> <li class="md-nav__item"> <a href="../../getting-started/code-style/" class="md-nav__link"> Coding style </a> </li> <li class="md-nav__item"> <a href="../../getting-started/virtualenvs/" class="md-nav__link"> Virtual environments </a> </li> <li class="md-nav__item"> <a href="../../getting-started/help/" class="md-nav__link"> Getting help </a> </li> <li class="md-nav__item"> <a href="../../process/" class="md-nav__link"> Development process </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_3" checked> <label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="0"> Best practices </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="true"> <label class="md-nav__title" for="__nav_5_3"> Best practices </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../accessibility/" class="md-nav__link"> Accessibility (a11y) </a> </li> <li class="md-nav__item"> <a href="../commits/" class="md-nav__link"> Commits, PRs & reviews </a> </li> <li class="md-nav__item"> <a href="../css-js/" class="md-nav__link"> CSS/JavaScript </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc"> <label class="md-nav__link md-nav__link--active" for="__toc"> React </label> <a href="./" class="md-nav__link md-nav__link--active"> React </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class="md-nav__title" for="__toc"> Table of contents </label> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <li class="md-nav__item"> <a href="#dont-use-react-when" class="md-nav__link"> Don't use React when... </a> </li> <li class="md-nav__item"> <a href="#use-react-when" class="md-nav__link"> Use React when... </a> </li> <li class="md-nav__item"> <a href="#best-practices" class="md-nav__link"> Best practices </a> <nav class="md-nav" aria-label="Best practices"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#functional-vs-class-components" class="md-nav__link"> Functional vs Class components </a> <nav class="md-nav" aria-label="Functional vs Class components"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#on-hooks" class="md-nav__link"> On Hooks </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#use-semantic-ui-react" class="md-nav__link"> Use Semantic UI React </a> </li> <li class="md-nav__item"> <a href="#on-overridable" class="md-nav__link"> On Overridable </a> <nav class="md-nav" aria-label="On Overridable"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#overridable-components-naming" class="md-nav__link"> Overridable components naming </a> </li> <li class="md-nav__item"> <a href="#clear-interfaces" class="md-nav__link"> Clear interfaces </a> </li> <li class="md-nav__item"> <a href="#extract-inner-implementation" class="md-nav__link"> Extract inner implementation </a> </li> <li class="md-nav__item"> <a href="#re-usable-components" class="md-nav__link"> Re-usable components </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../ui/" class="md-nav__link"> User interface </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_4" > <label class="md-nav__link" for="__nav_5_4" id="__nav_5_4_label" tabindex="0"> Topic guides </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_4"> Topic guides </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../topics/resource/" class="md-nav__link"> Building resources </a> </li> <li class="md-nav__item"> <a href="../../topics/service/" class="md-nav__link"> Building services </a> </li> <li class="md-nav__item"> <a href="../../topics/serializers/" class="md-nav__link"> Building serializers </a> </li> <li class="md-nav__item"> <a href="../../topics/uow/" class="md-nav__link"> Grouping atomic operations </a> </li> <li class="md-nav__item"> <a href="../../topics/validation/" class="md-nav__link"> Sanitize input data </a> </li> <li class="md-nav__item"> <a href="../../topics/theming/" class="md-nav__link"> Theming </a> </li> <li class="md-nav__item"> <a href="../../topics/administration_panel/" class="md-nav__link"> Administration panel </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_5" > <label class="md-nav__link" for="__nav_5_5" id="__nav_5_5_label" tabindex="0"> How-to guides </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_5"> How-to guides </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../howtos/i18n/" class="md-nav__link"> Translation (i18n) </a> </li> <li class="md-nav__item"> <a href="../../howtos/custom_fields/" class="md-nav__link"> Create a new custom field </a> </li> <li class="md-nav__item"> <a href="../../howtos/custom_code/" class="md-nav__link"> Create custom code and views </a> </li> <li class="md-nav__item"> <a href="../../howtos/add_javascript/" class="md-nav__link"> Add JavaScript </a> </li> <li class="md-nav__item"> <a href="../../howtos/override_components/" class="md-nav__link"> Override UI React components </a> </li> <li class="md-nav__item"> <a href="../../howtos/search_terms_migration/" class="md-nav__link"> Create search terms mappings </a> </li> <li class="md-nav__item"> <a href="../../howtos/alembic/" class="md-nav__link"> Create a database migration </a> </li> <li class="md-nav__item"> <a href="../../howtos/security-fix/" class="md-nav__link"> Fix a vulnerability </a> </li> <li class="md-nav__item"> <a href="../../howtos/dev_email/" class="md-nav__link"> Test emails locally </a> </li> <li class="md-nav__item"> <a href="../../howtos/route_migration/" class="md-nav__link"> Migrate legacy routes </a> </li> <li class="md-nav__item"> <a href="../../howtos/backup_search_indices/" class="md-nav__link"> Back up search indices </a> </li> <li class="md-nav__item"> <a href="../../howtos/restrict_access/" class="md-nav__link"> Restrict access to pages </a> </li> <li class="md-nav__item"> <a href="../../howtos/notifications/" class="md-nav__link"> Create and configure notifications </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_6" > <label class="md-nav__link" for="__nav_5_6" id="__nav_5_6_label" tabindex="0"> Architecture </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_6"> Architecture </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../architecture/" class="md-nav__link"> Introduction </a> </li> <li class="md-nav__item"> <a href="../../architecture/infrastructure/" class="md-nav__link"> Infrastructure </a> </li> <li class="md-nav__item"> <a href="../../architecture/software/" class="md-nav__link"> Software </a> </li> <li class="md-nav__item"> <a href="../../architecture/runtime/" class="md-nav__link"> Runtime </a> </li> <li class="md-nav__item"> <a href="../../architecture/requests/" class="md-nav__link"> Requests </a> </li> <li class="md-nav__item"> <a href="../../architecture/communities/" class="md-nav__link"> Communities </a> </li> <li class="md-nav__item"> <a href="../../architecture/records/" class="md-nav__link"> Records </a> </li> <li class="md-nav__item"> <a href="../../architecture/event_handling/" class="md-nav__link"> Event handling </a> </li> <li class="md-nav__item"> <a href="../../architecture/notifications/" class="md-nav__link"> Notifications </a> </li> <li class="md-nav__item"> <a href="../../architecture/reading/" class="md-nav__link"> Recommended reading </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_7" > <label class="md-nav__link" for="__nav_5_7" id="__nav_5_7_label" tabindex="0"> Concepts </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_7"> Concepts </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../concepts/concurrency-control/" class="md-nav__link"> Optimistic concurrency control </a> </li> <li class="md-nav__item"> <a href="../../concepts/transactions/" class="md-nav__link"> Database transaction management </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../deploy/" class="md-nav__link"> Deploy </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" > <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0"> Reference </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7"> Reference </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../reference/cli/" class="md-nav__link"> CLI </a> </li> <li class="md-nav__item"> <a href="../../../reference/configuration/" class="md-nav__link"> Configuration </a> </li> <li class="md-nav__item"> <a href="../../../reference/metadata/" class="md-nav__link"> Metadata </a> </li> <li class="md-nav__item"> <a href="../../../reference/metadata/optional_metadata/" class="md-nav__link"> Optional metadata </a> </li> <li class="md-nav__item"> <a href="../../../reference/oai_pmh/" class="md-nav__link"> OAI-PMH </a> </li> <li class="md-nav__item"> <a href="../../../reference/export_formats/" class="md-nav__link"> Export formats </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_8" > <label class="md-nav__link" for="__nav_7_8" id="__nav_7_8_label" tabindex="0"> REST API </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7_8"> REST API </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/rest_api_index/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_quickstart/" class="md-nav__link"> Quickstart </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_communities/" class="md-nav__link"> Communities </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_drafts_records/" class="md-nav__link"> Drafts and Records </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_groups/" class="md-nav__link"> Groups </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_members/" class="md-nav__link"> Members </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_requests/" class="md-nav__link"> Requests </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_users/" class="md-nav__link"> Users </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_reviews/" class="md-nav__link"> Reviews </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_vocabularies/" class="md-nav__link"> Vocabularies </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_names/" class="md-nav__link"> Names </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_funders/" class="md-nav__link"> Funders </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_awards/" class="md-nav__link"> Awards </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_oaipmh_sets/" class="md-nav__link"> OAI-PMH Sets </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_statistics/" class="md-nav__link"> Statistics </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_9" > <label class="md-nav__link" for="__nav_7_9" id="__nav_7_9_label" tabindex="0"> Custom fields </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7_9"> Custom fields </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/custom_fields/widgets/" class="md-nav__link"> UI widgets </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_10" > <label class="md-nav__link" for="__nav_7_10" id="__nav_7_10_label" tabindex="0"> Administration </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_10_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7_10"> Administration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/administration_reference/" class="md-nav__link"> Reference </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../reference/file_storage/" class="md-nav__link"> File storage </a> </li> <li class="md-nav__item"> <a href="../../../reference/statistics/" class="md-nav__link"> Usage statistics </a> </li> <li class="md-nav__item"> <a href="../../../reference/notifications/" class="md-nav__link"> Notifications </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" > <label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="0"> Releases </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8"> Releases </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../releases/maintenance-policy/" class="md-nav__link"> Maintenance policy </a> </li> <li class="md-nav__item"> <a href="../../../releases/upgrade-policy/" class="md-nav__link"> Upgrade policy </a> </li> <li class="md-nav__item"> <a href="../../../releases/security-policy/" class="md-nav__link"> Security policy </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_5" > <label class="md-nav__link" for="__nav_8_5" id="__nav_8_5_label" tabindex="0"> Version v12.0 LTS </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_5"> Version v12.0 LTS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v12/version-v12.0.0/" class="md-nav__link"> Release Notes v12.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v12/upgrade-v12.0/" class="md-nav__link"> Upgrade from v11 to v12 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_6" > <label class="md-nav__link" for="__nav_8_6" id="__nav_8_6_label" tabindex="0"> Version v11.0 STS </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_6"> Version v11.0 STS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v11/version-v11.0.0/" class="md-nav__link"> Release Notes v11.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v11/upgrade-v11.0/" class="md-nav__link"> Upgrade from v10 to v11 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_7" > <label class="md-nav__link" for="__nav_8_7" id="__nav_8_7_label" tabindex="0"> Version v9.1 LTS </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_7"> Version v9.1 LTS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v9/version-v9.1.0/" class="md-nav__link"> Release Notes v9.1 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v9/version-v9.0.0/" class="md-nav__link"> Release Notes v9.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/migrate-docker-images/" class="md-nav__link"> Migrate Docker images </a> </li> <li class="md-nav__item"> <a href="../../../releases/v9/migrate-opensearch-v9/" class="md-nav__link"> Migrate v9 to OpenSearch </a> </li> <li class="md-nav__item"> <a href="../../../releases/v9/upgrade-v9.0/" class="md-nav__link"> Upgrade from v8 to v9 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8" > <label class="md-nav__link" for="__nav_8_8" id="__nav_8_8_label" tabindex="0"> Legacy Versions </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8"> Legacy Versions </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_1" > <label class="md-nav__link" for="__nav_8_8_1" id="__nav_8_8_1_label" tabindex="0"> Version v10.1 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_1_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_1"> Version v10.1 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v10/version-v10.1.0/" class="md-nav__link"> Release Notes v10.1 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v10/version-v10.0.0/" class="md-nav__link"> Release Notes v10.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v10/upgrade-v10.0/" class="md-nav__link"> Upgrade from v9 to v10 </a> </li> <li class="md-nav__item"> <a href="../../../releases/migrate-docker-images/" class="md-nav__link"> Migrate Docker images </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_2" > <label class="md-nav__link" for="__nav_8_8_2" id="__nav_8_8_2_label" tabindex="0"> Version v8.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_2"> Version v8.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v8/version-v8.0.0/" class="md-nav__link"> Release Notes v8.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v8/upgrade-v8.0/" class="md-nav__link"> Upgrade from v7 to v8 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_3" > <label class="md-nav__link" for="__nav_8_8_3" id="__nav_8_8_3_label" tabindex="0"> Version v7.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_3"> Version v7.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v7/version-v7.0.0/" class="md-nav__link"> Release Notes v7.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v7/upgrade-v7.0/" class="md-nav__link"> Upgrade from v6 to v7 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_4" > <label class="md-nav__link" for="__nav_8_8_4" id="__nav_8_8_4_label" tabindex="0"> Version v6.0.5 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_4"> Version v6.0.5 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v6/version-v6.0.5/" class="md-nav__link"> Release Notes v6.0.5 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v6/upgrade-v6.0.5/" class="md-nav__link"> Upgrade from v6.0.x to v6.0.5 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v6/version-v6.0.0/" class="md-nav__link"> Release Notes v6.0.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v6/upgrade-v6.0/" class="md-nav__link"> Upgrade from v4 to v6 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_5" > <label class="md-nav__link" for="__nav_8_8_5" id="__nav_8_8_5_label" tabindex="0"> Version v5.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_5"> Version v5.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v5/version-v5.0.0/" class="md-nav__link"> Release Notes v5.0 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_6" > <label class="md-nav__link" for="__nav_8_8_6" id="__nav_8_8_6_label" tabindex="0"> Version v4.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_6"> Version v4.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v4/version-v4.0.0/" class="md-nav__link"> Release Notes v4.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v4/upgrade-v4.0/" class="md-nav__link"> Upgrade from v3 to v4 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_7" > <label class="md-nav__link" for="__nav_8_8_7" id="__nav_8_8_7_label" tabindex="0"> Version v3.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_7"> Version v3.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v3/version-v3.0.0/" class="md-nav__link"> Release Notes v3.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v3/upgrade-v3.0/" class="md-nav__link"> Upgrade from v2 to v3 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_8" > <label class="md-nav__link" for="__nav_8_8_8" id="__nav_8_8_8_label" tabindex="0"> Version v2.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_8"> Version v2.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v2/version-v2.0.0/" class="md-nav__link"> Release Notes v2.0 </a> </li> <li class="md-nav__item"> <a href="../../../releases/v2/upgrade-v2.0/" class="md-nav__link"> Upgrade from v1 to v2 </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_9" > <label class="md-nav__link" for="__nav_8_8_9" id="__nav_8_8_9_label" tabindex="0"> Version v1.0 </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_9"> Version v1.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v1/version-v1.0.0/" class="md-nav__link"> Release Notes v1.0 </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9" > <label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="0"> Maintainers </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_9"> Maintainers </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../maintenance/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/newcomers/" class="md-nav__link"> Newcomers </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/board-workflow/" class="md-nav__link"> Sprintboard workflow </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/pr-community-board/" class="md-nav__link"> Community PR board </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/release-management/" class="md-nav__link"> Release management </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/modules/" class="md-nav__link"> Modules on GitHub </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/branch-management/" class="md-nav__link"> Branch management </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/demosite/" class="md-nav__link"> Demo site & docs </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/docker-images/" class="md-nav__link"> Docker images </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/rfcs/" class="md-nav__link"> RFCs </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/documentation/" class="md-nav__link"> Writing documentation </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_10" > <label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="0"> Onboard & Contribute </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_10"> Onboard & Contribute </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../contribute/" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../contribute/onboarding/" class="md-nav__link"> Onboarding </a> </li> <li class="md-nav__item"> <a href="../../../contribute/code-of-conduct/" class="md-nav__link"> Code of conduct </a> </li> <li class="md-nav__item"> <a href="../../../contribute/copyright-policy/" class="md-nav__link"> Copyright policy </a> </li> <li class="md-nav__item"> <a href="../../../contribute/roadmap/" class="md-nav__link"> Roadmap </a> </li> <li class="md-nav__item"> <a href="../../../contribute/translators-guide/" class="md-nav__link"> Translators guide </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" > <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class="md-nav__title" for="__toc"> Table of contents </label> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <li class="md-nav__item"> <a href="#dont-use-react-when" class="md-nav__link"> Don't use React when... </a> </li> <li class="md-nav__item"> <a href="#use-react-when" class="md-nav__link"> Use React when... </a> </li> <li class="md-nav__item"> <a href="#best-practices" class="md-nav__link"> Best practices </a> <nav class="md-nav" aria-label="Best practices"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#functional-vs-class-components" class="md-nav__link"> Functional vs Class components </a> <nav class="md-nav" aria-label="Functional vs Class components"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#on-hooks" class="md-nav__link"> On Hooks </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#use-semantic-ui-react" class="md-nav__link"> Use Semantic UI React </a> </li> <li class="md-nav__item"> <a href="#on-overridable" class="md-nav__link"> On Overridable </a> <nav class="md-nav" aria-label="On Overridable"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#overridable-components-naming" class="md-nav__link"> Overridable components naming </a> </li> <li class="md-nav__item"> <a href="#clear-interfaces" class="md-nav__link"> Clear interfaces </a> </li> <li class="md-nav__item"> <a href="#extract-inner-implementation" class="md-nav__link"> Extract inner implementation </a> </li> <li class="md-nav__item"> <a href="#re-usable-components" class="md-nav__link"> Re-usable components </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-content" data-md-component="content"> <article class="md-content__inner md-typeset"> <h1 id="react">React<a class="headerlink" href="#react" title="Permanent link">¶</a></h1> React is a very nice JavaScript library for building user interfaces, but its usage should not be abused. Carefully consider pros and cons when deciding if you should create a new React application or not. <h2 id="dont-use-react-when">Don't use React when...<a class="headerlink" href="#dont-use-react-when" title="Permanent link">¶</a></h2> <ul> <li>you need a small JavaScript snippet, for example to implement a user action (a click, hide/show, slider/animations). Consider that animations can be done with CSS only;</li> <li>you are developing a Jinja <code>macro</code>: a macro can be included in the DOM, you don't control it. It could affect web page performance (for example, when added to the homepage). If you are planning to mark some components <code>Overridable</code> in a React app in a macro, consider that it will not work. Prefer <a href="https://stackoverflow.com/questions/20435653/what-is-vanillajs">VanillaJS</a> or jQuery.</li> </ul> <h2 id="use-react-when">Use React when...<a class="headerlink" href="#use-react-when" title="Permanent link">¶</a></h2> <ul> <li>When you need a large, complex or a web app where high user interactivity is needed, for example a search page, avoiding page reload on each user action.</li> </ul> <h2 id="best-practices">Best practices<a class="headerlink" href="#best-practices" title="Permanent link">¶</a></h2> <h3 id="functional-vs-class-components">Functional vs Class components<a class="headerlink" href="#functional-vs-class-components" title="Permanent link">¶</a></h3> <ul> <li>Are you creating a component with only the <code>render</code> function? A functional component might be a good idea, it is less verbose:</li> </ul> <div class="highlight"><pre><code>export const MyCmp = (props) => <div>{...}<div/>; </code></pre></div> <ul> <li>Are you creating a more complex component, handling component's lifecycle or local/Redux state? Prefer a class component, it is more declarative, more readable:</li> </ul> <div class="highlight"><pre><code>class MyCmp extends Component { ... </code></pre></div> <h4 id="on-hooks">On Hooks<a class="headerlink" href="#on-hooks" title="Permanent link">¶</a></h4> Don't use <a href="https://reactjs.org/docs/hooks-overview.html">React Hooks</a>. Using hooks requires developers not only to learn React, but also to familiarize with this approach and remember the ad-hoc syntax: <div class="highlight"><pre><code>const [count, setCount] = useState(0); ... useEffect(() => { ... return ... }); </code></pre></div> The classic component's lifecycle methods are surely much more verbose, but they favor clarity, readability and understanding of the code, in particular in the InvenioRDM context, where developers with different levels of experience are collaborating. <h3 id="use-semantic-ui-react">Use Semantic UI React<a class="headerlink" href="#use-semantic-ui-react" title="Permanent link">¶</a></h3> Use Semantic UI React components in React, instead of CSS classes. The React versions of Semantic UI components have normally implemented some logic, which is crucial for the component to work correctly. The plain CSS Semantic UI might not have all the features available when you use them in React. ❌ DON'T <div class="highlight"><pre><code>import React, { Component } from "react"; class MyAccordion extends Component {} render(){ <div className="ui accordion" key={agg.title}></div> } </code></pre></div> ✅ DO <div class="highlight"><pre><code>import React, { Component } from "react"; import { Accordion } from "semantic-ui-react"; class MyAccordion extends Component {} render(){ <Accordion key={agg.title}/> } </code></pre></div> For each UI component, Semantic UI (SUI) has its own props. When creating your own component which uses SUI components, you should be split your component's props and the dedicated SUI props using the <code>ui</code> name. This will make clear what are the SUI props: <div class="highlight"><pre><code>render() { const { name, isDisabled, ...ui } = this.props; return ( <Button name={name} disabled={isDisabled} {...ui} /> ); } </code></pre></div> <h3 id="on-overridable">On Overridable<a class="headerlink" href="#on-overridable" title="Permanent link">¶</a></h3> See the <a href="../../howtos/override_components/">How to override UI React components</a> how-to for detailed explanations on the library itself. The library allows developers to mark components that can be overridden. While it is very easy to use, it can also lead to subtle errors. <h4 id="overridable-components-naming">Overridable components naming<a class="headerlink" href="#overridable-components-naming" title="Permanent link">¶</a></h4> The <code>id</code> of each Overridable component should use the following pattern: <div class="highlight"><pre><code><Overridable id="[InvenioModuleName].[ReactApp].[Component].[Element]" name={name}> </code></pre></div> <ul> <li><code>[InvenioModuleName]</code>: the Invenio module name, e.g. <code>InvenioCommunities</code> or <code>InvenioAppRDM</code>.</li> <li><code>[ReactApp]</code>: the name of the web page where the ReactApp will be rendered, e.g. <code>MembersList</code>, <code>MyDashboard</code>, <code>MyUploads</code>, <code>MyCommunities</code>, <code>DepositForm</code>. There is no exact naming here, try to be consistent with the existing ones.</li> <li><code>[Component]</code>: the name of the component in the React app, e.g. <code>ResultsList</code>, <code>SortBy</code>, <code>ListItem</code>, <code>BtnAccept</code>.</li> <li><code>[Element]</code>: the name of the UI section inside the component. <code>Layout</code> is normally used of the entire Overridable component, inside the <code>render()</code> function, <code>Container</code> or <code>Title</code> might be used in an inner section, in case of large components:</li> </ul> <div class="highlight"><pre><code>render() { return ( <Overridable id="InvenioCommunities.InvitationsList.ListItem.Layout"> ... <Overridable id="InvenioCommunities.InvitationsList.ListItem.Container"> ... <Overridable id="InvenioCommunities.InvitationsList.ListItem.Title"> </code></pre></div> Names should be CamelCase. <h4 id="clear-interfaces">Clear interfaces<a class="headerlink" href="#clear-interfaces" title="Permanent link">¶</a></h4> Make sure that your component APIs are very clear. Why? Because when re-implementing a component, the developer should clearly understand what <code>props</code> are passed to the Overridable component. ❌ DON'T <div class="highlight"><pre><code>import React, { Component } from "react"; export class ErrorPage extends Component { render() { const { errorCode, errorMessage, error, children } = this.props; return ( <Overridable id="..." {...this.props}> ... </code></pre></div> Passing <code>{...this.props}</code> as params makes things very hard for developers. The interface of the overridden component will look like: <div class="highlight"><pre><code>const MyErrorPage = (props) => { // what `props`??? } </code></pre></div> ✅ DO <div class="highlight"><pre><code>export class ErrorPage extends Component { render() { const { errorCode, errorMessage, error, children } = this.props; return ( <Overridable id="..." errorCode={errorCode} errorMessage={errorMessage}> ... </code></pre></div> The interface is now very clear: <div class="highlight"><pre><code>const MyErrorPage = ({errorCode, errorMessage}) => { ... } </code></pre></div> <h4 id="extract-inner-implementation">Extract inner implementation<a class="headerlink" href="#extract-inner-implementation" title="Permanent link">¶</a></h4> It is unfortunately very easy to make a mistake and use <code>props</code> from the upper component, without passing them down: ❌ DON'T <div class="highlight"><pre><code>import React, { Component } from "react"; export class OneComponent extends Component { render() { const { name, disabled } = this.props; return ( <Overridable id="Invenio[ModuleName].OneComponent.layout" name={name}> // `disabled` prop forgotten here <Element name={name} disabled={disabled} // here we use a prop that is not passed!!! </code></pre></div> ✅ DO <div class="highlight"><pre><code>import React, { Component } from "react"; /* * Extracting the inner component helps: * - The original developer to make sure the component interface is clear and contains all `props`. * - The developer overriding the component to copy/paste it. */ const InnerComponent = ({ name }) => { return <Element name={name} /> } export class OneComponent extends Component { render() { const { name, disabled } = this.props; return ( <Overridable id="Invenio[ModuleName].OneComponent.layout" name={name}> <InnerComponent name={name} /> </code></pre></div> This will not ensure that the mistake is avoided, but it hopefully helps detecting it. <h4 id="re-usable-components">Re-usable components<a class="headerlink" href="#re-usable-components" title="Permanent link">¶</a></h4> When implementing re-usable components, <code>Overridable</code> should probably not be used. The generic component should have enough <code>props</code> to be customizable and <code>Overridable</code> should be outside, as a wrapper. This is also because it is difficult to inject a variable/prop to be used as <code>id</code>. <code><Overridable id="${appName}.EditBtn"</code> might lead to infinite loops! ❌ DON'T Definition: <div class="highlight"><pre><code>import React, { Component } from "react"; export class EditButton extends Component { render() { const { name, disabled } = this.props; return <Overridable id="EditBtn" ...> // we don't want hardcoded ids for re-usable components </code></pre></div> Usage: <div class="highlight"><pre><code>import React, { Component } from "react"; import { EditButton } from "..." export class OneComponent extends Component { render() { const { name, disabled } = this.props; return ( <EditButton ... // Overridable is inside the re-usable component </code></pre></div> ✅ DO Definition: <div class="highlight"><pre><code>import React, { Component } from "react"; // Do not use Overridable inside here export class EditButton extends Component { render() { const { name, disabled } = this.props; return <div>...</div> </code></pre></div> Usage: <div class="highlight"><pre><code>import React, { Component } from "react"; import { EditButton } from "..." export class OneComponent extends Component { render() { const { name, disabled } = this.props; return ( <Overridable id="InvenioCommunities.InvitationsList.ListItem.Layout"> <EditButton ... </code></pre></div> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer" > <a href="../css-js/" class="md-footer__link md-footer__link--prev" aria-label="Previous: CSS/JavaScript"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class="md-footer__title"> Previous <div class="md-ellipsis"> CSS/JavaScript </div> </div> </a> <a href="../ui/" class="md-footer__link md-footer__link--next" aria-label="Next: User interface"> <div class="md-footer__title"> Next <div class="md-ellipsis"> User interface </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Copyright © 2019-2024 CERN, Northwestern University and contributors. </div> Made with <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener"> Material for MkDocs </a> </div> <div class="md-social"> <a href="https://github.com/inveniosoftware" target="_blank" rel="noopener" title="github.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.tabs", "navigation.footer", "content.code.copy"], "search": "../../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script> <script src="../../../assets/javascripts/bundle.525ec568.min.js"></script> </body> </html>

CINXE.COM

React - Turn-key research data management repository