CINXE.COM
Standard-Routing – Videokurs: React.js | LinkedIn Learning, früher Lynda.com
<!DOCTYPE html> <html lang="de"> <head> <meta name="pageKey" content="d_learning_course_video_guest"> <!----> <meta name="linkedin:pageTag" content="locked_video"> <meta name="locale" content="de_DE"> <meta id="config" data-app-version="2.0.2217" data-call-tree-id="AAYnlNwkOoEKkT7d99SgRg==" data-multiproduct-name="learning-guest-frontend" data-service-name="learning-guest-frontend" data-browser-id="338fa05e-e08e-4ec8-8045-3e68f7366856" data-enable-page-view-heartbeat-tracking data-page-instance="urn:li:page:learning_course_video_guest;CuvRFfhHSwyDX3heYfmxgQ==" data-disable-jsbeacon-pagekey-suffix="false" data-member-id="0"> <link rel="canonical" href="https://de.linkedin.com/learning/react-grundkurs/standard-routing"> <!----><!----> <!----> <!----> <!----> <link rel="manifest" href="/homepage-guest/manifest.json" crossorigin="use-credentials"> <!----> <script> function getDfd() {let yFn,nFn;const p=new Promise(function(y, n){yFn=y;nFn=n;});p.resolve=yFn;p.reject=nFn;return p;} window.lazyloader = getDfd(); window.tracking = getDfd(); window.impressionTracking = getDfd(); window.ingraphTracking = getDfd(); window.appDetection = getDfd(); window.pemTracking = getDfd(); </script> <!----> <link rel="icon" href="https://static.licdn.com/aero-v1/sc/h/444zstxv7s91nepfm5et6ofge"> <title>Standard-Routing – Videokurs: React.js | LinkedIn Learning, früher Lynda.com</title> <meta name="robots" content="noarchive, max-image-preview:large"> <meta name="description" content="Die Zeiten, in denen Nutzer einen kompletten Seiten-Reload bei der Navigation erfahren, sind zumindest für Web-Apps schon lange vorbei. Doch wie geht das in React? React selbst ist ein Endgeräte-agnostisches Framework und bringt keinen Router von Haus aus mit. Sie erfahren in diesem Film, wie Sie mit React Router einfach und schnell Routing implementieren können."> <meta property="og:site_name" content="LinkedIn"> <meta name="twitter:site" content="@LI_Learning"> <meta name="twitter:card" content="summary"> <meta name="litmsProfileName" content="learning-guest-frontend"> <meta property="og:title" content="Standard-Routing – Videokurs: React.js | LinkedIn Learning, früher Lynda.com"> <meta name="twitter:title" content="Standard-Routing – Videokurs: React.js | LinkedIn Learning, früher Lynda.com"> <meta property="og:description" content="Die Zeiten, in denen Nutzer einen kompletten Seiten-Reload bei der Navigation erfahren, sind zumindest für Web-Apps schon lange vorbei. Doch wie geht das in React? React selbst ist ein Endgeräte-agnostisches Framework und bringt keinen Router von Haus aus mit. Sie erfahren in diesem Film, wie Sie mit React Router einfach und schnell Routing implementieren können."> <meta name="twitter:description" content="Die Zeiten, in denen Nutzer einen kompletten Seiten-Reload bei der Navigation erfahren, sind zumindest für Web-Apps schon lange vorbei. Doch wie geht das in React? React selbst ist ein Endgeräte-agnostisches Framework und bringt keinen Router von Haus aus mit. Sie erfahren in diesem Film, wie Sie mit React Router einfach und schnell Routing implementieren können."> <meta property="og:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQG1_kl-LQOIhQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1652352947144?e=2147483647&v=beta&t=w4OLRH9aBJX3GciWpi9MfhhTJwTY-GW36UBkTsN_mSc"> <meta name="twitter:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQG1_kl-LQOIhQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1652352947144?e=2147483647&v=beta&t=w4OLRH9aBJX3GciWpi9MfhhTJwTY-GW36UBkTsN_mSc"> <!----> <meta property="og:url" content="https://de.linkedin.com/learning/react-grundkurs/standard-routing"> <meta property="og:type" content="website"> <meta name="clientSideIngraphs" content="1" data-gauge-metric-endpoint="/learning-guest/api/ingraphs/gauge" data-counter-metric-endpoint="/learning-guest/api/ingraphs/counter"> <link rel="stylesheet" href="https://static.licdn.com/aero-v1/sc/h/6es157d0jbv932d1tucuon59m"> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"VideoObject","name":"Standard-Routing - React Grundkurs","author":{"@type":"Person","name":"David Lorenz","url":"https://de.linkedin.com/learning/instructors/david-lorenz"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQG1_kl-LQOIhQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1652352947144?e=2147483647&v=beta&t=w4OLRH9aBJX3GciWpi9MfhhTJwTY-GW36UBkTsN_mSc","description":"Die umfangreiche Einführung in das JavaScript-Webframework React mit vielen Praxisbeispielen und Übungen.","duration":"PT6M13S","datePublished":"2022-05-20","uploadDate":"2022-05-20","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/react-grundkurs/standard-routing"} </script> <!----> </head> <body dir="ltr"> <!----><!----><!----> <!----> <a href="#main-content" class="skip-link btn-md btn-primary absolute z-11 -top-[100vh] focus:top-0"> Weiter zum Hauptinhalt </a> <header class="header base-detail-page__header px-mobile-container-padding bg-color-background-container global-alert-offset sticky-header"> <nav class="nav pt-1.5 pb-2 flex items-center justify-between relative flex-nowrap babymamabear:py-1.5 nav--minified-mobile " aria-label="Primär"> <a href="https://de.linkedin.com/learning/?trk=learning-course_nav-header-logo" class="nav__logo-link link-no-visited-state z-1 mr-auto min-h-[52px] flex items-center babybear:z-0 hover:no-underline focus:no-underline active:no-underline babymamabear:mr-3" data-tracking-control-name="learning-course_nav-header-logo" data-tracking-will-navigate> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> </a> <section class="search-bar relative flex flex-grow h-[40px] bg-cool-gray-20 min-w-0 max-w-full mx-4 rounded-sm babymamabear:mx-0 babymamabear:mb-1.5 babymamabear:bg-color-transparent babymamabear:w-full babymamabear:flex babymamabear:flex-wrap search-bar--minified-mobile" data-current-search-type="LEARNING"> <button class="search-bar__placeholder papabear:hidden text-input w-full mt-1.5 !pl-[14px] border-1 border-solid border-color-border-faint rounded-[2px] h-[40px] max-h-[40px] flex items-center overflow-hidden cursor-text" data-tracking-control-name="learning-course_search-switcher-opener"> <icon class="text-color-icon w-3 h-3 mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/397vrsk6op88l4981ji1xe1qt"></icon> <div class="search-bar__full-placeholder font-sans text-md text-color-text max-w-[calc(100%-40px)] text-left whitespace-nowrap overflow-hidden text-ellipsis"> <!----><!----> Suche (Kenntnisse, Themen, Software) <!----> </div> <span class="sr-only">Suche erweitern</span> </button> <div class="switcher-tabs__trigger-and-tabs babymamabear:flex"> <button aria-expanded="false" class="switcher-tabs__placeholder flex !h-full !py-0 !pl-2 !pr-1.5 border-r-1 border-solid border-r-color-border-faint babymamabear:hidden tab-md papabear:tab-vertical papabear:justify-start cursor-pointer" data-tracking-control-name="learning-course_switcher-tabs-placeholder" aria-describedby="switcher-description"> <span class="switcher-tabs__placeholder-text m-auto"></span> <icon class="switcher-tabs__caret-down-filled onload pointer-events-none block my-auto min-h-[24px] min-w-[24px] h-[24px] babymamabear:hidden" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/7asbl4deqijhoy3z2ivveispv"></icon> </button> <div id="switcher-description" class="hidden">Dieser Button zeigt den derzeit ausgewählten Suchtyp an. Bei Erweiterung erscheint eine Liste mit Suchoptionen, die die Sucheingaben so ändern, dass sie zur aktuellen Auswahl passen.</div> <!----> <div class="switcher-tabs hidden z-[1] w-auto min-w-[160px] mb-1.5 py-1 absolute top-[48px] left-0 border-solid border-1 border-color-border-faint papabear:container-raised babymamabear:static babymamabear:w-[100vw] babymamabear:h-[48px] babymamabear:p-0 overflow-y-hidden overflow-x-auto md:overflow-x-hidden"> <ul class="switcher-tabs__list flex flex-1 items-stretch papabear:flex-col" role="tablist"> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="jobs-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="JOBS" data-tracking-control-name="learning-course_switcher-tabs-jobs-search-switcher" id="job-switcher-tab" role="tab"> Jobs </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="people-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="PEOPLE" data-tracking-control-name="learning-course_switcher-tabs-people-search-switcher" id="people-switcher-tab" role="tab"> Personen </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="learning-search-panel" aria-selected="true" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer tab-selected" data-switcher-type="LEARNING" data-tracking-control-name="learning-course_switcher-tabs-learning-search-switcher" id="learning-switcher-tab" role="tab"> Learning </button> </li> </ul> <button aria-label="Schließen" class="switcher-tabs__cancel-btn papabear:hidden block w-6 h-6 m-auto text-color-text-low-emphasis" data-tracking-control-name="learning-course_switcher-tabs-cancel-search-switcher" type="button"> <icon class="switcher-tabs__cancel-icon block w-3 h-3 m-auto onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </div> </div> <section class="base-search-bar w-full h-full" data-searchbar-type="PEOPLE" aria-labelledby="people-switcher-tab" id="people-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/pub/dir" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Vorname" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input" maxlength="500" name="firstName" placeholder="Vorname" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Nachname" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input" maxlength="500" name="lastName" placeholder="Nachname" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="trk" value="learning-course_people-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Suche" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="JOBS" aria-labelledby="job-switcher-tab" id="jobs-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/jobs/search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-form"> <code id="i18n_aria_live_text_no-suggestions" style="display: none"><!--"Keine Vorschläge gefunden."--></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"><!--"Ein Vorschlag. Verwenden Sie zum Navigieren die Auf- und Ab-Tasten."--></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"><!--"Mehrere Vorschläge. Verwenden Sie zum Navigieren die Auf- und Ab-Tasten."--></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input keywords-typeahead-input text-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-keywords-typeahead-list" aria-haspopup="listbox" aria-label="Suche (Stellen oder Unternehmen)" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-keywords" maxlength="500" name="keywords" placeholder="Suche (Stellen oder Unternehmen)" role="combobox" type="search"> <!----> <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-keywords-typeahead-list" role="listbox"></ul> </div> <!----> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <!----> <code id="i18n_aria_live_text_no-suggestions" style="display: none"><!--"Keine Vorschläge gefunden."--></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"><!--"Ein Vorschlag. Verwenden Sie zum Navigieren die Auf- und Ab-Tasten."--></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"><!--"Mehrere Vorschläge. Verwenden Sie zum Navigieren die Auf- und Ab-Tasten."--></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input location-typeahead-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-location-typeahead-list" aria-haspopup="listbox" aria-label="Standort" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-location" maxlength="500" name="location" placeholder="Standort" role="combobox" value="Insel von Hong Kong" type="search"> <!----> <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-location-typeahead-list" role="listbox"></ul> </div> <!----> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="geoId" value="102817007" type="hidden"> <input name="trk" value="learning-course_jobs-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Suche" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="LEARNING" aria-labelledby="learning-switcher-tab" id="learning-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/learning/search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Suche (Kenntnisse, Themen, Software)" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input" maxlength="500" name="keywords" placeholder="Suche (Kenntnisse, Themen, Software)" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input class="nav__search-uoo" name="upsellOrderOrigin" type="hidden"> <input name="trk" value="learning-course_learning-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Suche" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <!----> <div aria-live="polite" class="search-bar__live-text sr-only" role="status"></div> </section> <!----> <div class="nav__cta-container order-3 flex gap-x-1 justify-end min-w-[100px] flex-nowrap flex-shrink-0 babybear:flex-wrap flex-2 babymamabear:min-w-[50px] "> <a class="nav__button-tertiary btn-md btn-tertiary" href="http://de.linkedin.com/learning/subscription/products?courseSlug=react-grundkurs&destRedirectURL=https%3A%2F%2Fde%2Elinkedin%2Ecom%2Flearning%2Freact-grundkurs%2Fstandard-routing&trk=learning-course_nav-header-join&upsellTrk=lil_upsell_nav_subscription&session_redirect=https%3A%2F%2Fde.linkedin.com%2Flearning%2Freact-grundkurs%3Ftrk%3Dlearning-course_tocItem" data-tracking-control-name="lil_upsell_nav_subscription" data-tracking-impression-name="lil_upsell_nav_subscription" data-test-live-nav-primary-cta data-tracking-will-navigate> Kostenlos testen </a> <a class="nav__button-secondary btn-md btn-secondary-emphasis" href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-grundkurs%3Ftrk%3Dlearning-course_tocItem%26trk%3Dlearning-course_tocItem&fromSignIn=true&session_redirect=https%3A%2F%2Fde.linkedin.com%2Flearning%2Freact-grundkurs%3Ftrk%3Dlearning-course_tocItem&trk=learning-course_nav-header-signin" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate> Einloggen </a> <a aria-label="Einloggen" class="nav__link-person papabear:hidden mamabear:hidden" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-grundkurs%3Ftrk%3Dlearning-course_tocItem%26trk%3Dlearning-course_tocItem&fromSignIn=true&session_redirect=https%3A%2F%2Fde.linkedin.com%2Flearning%2Freact-grundkurs%3Ftrk%3Dlearning-course_tocItem&trk=learning-course_nav-header-signin"> <img class="inline-block relative rounded-[50%] w-4 h-4 bg-color-entity-ghost-background" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt> </a> </div> <!----> <!----> </nav> </header> <!----> <div class="cta-banner "> <div class="enterprise-nav"> <div class="enterprise-nav__content-wrapper"> <p id="enterprise-nav-solutions" class="enterprise-nav__content" tabindex="-1"> Lösungen für: </p> <a href="https://learning.linkedin.com/de-de/for-entire-companies?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-business" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-business">Unternehmen</a> <a href="https://learning.linkedin.com/de-de/for-higher-education?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-education" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-education">Bildungseinrichtungen</a> <a href="https://learning.linkedin.com/de-de/for-governments?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-government" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-government">Behörden</a> <a href="/learning/subscription/teams?veh=lil_upx&src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-buy" class="enterprise-nav__content" data-test-live-enterprise-upsell="true" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" data-tracking-impression-name="lil_upsell_learning-course_enterprise-nav_teambuy" id="business-nav-buy">Für Ihr Team erwerben</a> </div> </div> <!----> <!----> </div> <main class="main papabear:flex papabear:w-content-max-w papabear:mx-auto papabear:pt-desktop-content-top-margin mamabear:pt-desktop-content-top-margin " id="main-content" role="main"> <section class="core-rail mx-auto papabear:w-core-rail-width mamabear:max-w-[790px] babybear:max-w-[790px]"> <p class="pre-headline"> Aus dem Kurs: <a href="https://de.linkedin.com/learning/react-grundkurs?trk=course_title" data-tracking-control-name="course_title" data-tracking-will-navigate="true" class="from-the-course__link">React Grundkurs</a> </p> <section class="top-card"> <section class="top-card-layout container-lined overflow-hidden babybear:rounded-[0px]"> <section class="top-card__video-wrapper"> <div class="top-card__video"> <div class="hero-upsell"> <div class="hero-upsell__text-wrap"> <h3 class="hero-upsell__headline"> <icon class="lock-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/2k4trx87nbhljt0s01sd4q7qi"></icon> So erhalten Sie Zugriff auf diesen Kurs </h3> <h4 class="hero-upsell__subheadline"> Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.100 Kurse von Branchenfachleuten. </h4> </div> </div> <img class="top-card__video-image" data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQG1_kl-LQOIhQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1652352947144?e=2147483647&v=beta&t=w4OLRH9aBJX3GciWpi9MfhhTJwTY-GW36UBkTsN_mSc" alt="Standard-Routing"> <!----> </div> </section> <div class="top-card-layout__card relative p-2 papabear:p-details-container-padding"> <div class="top-card-layout__entity-info-container flex flex-wrap papabear:flex-nowrap"> <div class="top-card-layout__entity-info flex-grow flex-shrink-0 basis-0 babybear:flex-none babybear:w-full babybear:flex-none babybear:w-full"> <h1 class="top-card-layout__title font-sans text-lg papabear:text-xl font-bold leading-open text-color-text mb-0"> Standard-Routing – Tutorial zu <a href="https://de.linkedin.com/learning/topics/react-js?trk=video_title_to_software_topic" data-tracking-will-navigate="true" data-tracking-control-name="video_title_to_software_topic"> React.js</a> </h1> <h2 class="top-card-layout__headline break-words font-sans text-md leading-open text-color-text"> Aus dem Kurs: <a href="https://de.linkedin.com/learning/react-grundkurs?trk=course_title" data-tracking-control-name="course_title" data-tracking-will-navigate="true" class="from-the-course__link">React Grundkurs</a> </h2> <!----> <!----> <div class="top-card-layout__cta-container flex flex-wrap mt-0.5 papabear:mt-0 ml-[-12px]"> <a href="http://de.linkedin.com/learning/subscription/products?courseSlug=react-grundkurs&destRedirectURL=https%3A%2F%2Fde%2Elinkedin%2Ecom%2Flearning%2Freact-grundkurs%2Fstandard-routing&trk=course_info&upsellTrk=lil_upsell_course_info_subscription" data-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-impression-name="lil_upsell_course_info_subscription" data-litms-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-will-navigate class="top-card__upsell-link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--primary btn-md btn-primary" data-test-live-course-sub-upsell> Gratismonat starten </a> <a class="buy-for-your-team-cta__link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--secondary btn-md btn-secondary" href="/learning/subscription/teams?veh=lil_upx&src=li-lil-upsell&trk=learning-course_buy-for-your-team-cta" data-tracking-control-name="learning-course_buy-for-your-team-cta" data-tracking-impression-name="lil_upsell_learning-course_buy-for-your-team-cta_teambuy" data-test-live-buy-for-your-team-upsell data-tracking-will-navigate> Für Ihr Team erwerben </a> </div> </div> <!----> </div> <!----> <!----> </div> </section> </section> <div class="details mx-details-container-padding"> <div class="tabs content-tabs" data-tab-id="course-content-tabs"> <ul class="tabs__list" role="tablist"> <!----> <li class="tab flex ml-3 first-of-type:ml-0" role="presentation"> <button aria-selected="true" class="tab-button tab-md tab-selected" data-tracking-control-name="transcripts-tab" data-id="tab__button" role="tab" id="content-tabs__transcripts-btn"> Transkripte </button> </li> <!----> <li class="tab flex ml-3 first-of-type:ml-0" role="presentation"> <button aria-selected="false" class="tab-button tab-md " data-tracking-control-name="offline-tab" data-id="tab__button" role="tab" tabindex="-1" id="content-tabs__offline-btn" data-test-live-offline-tab> Offline-Wiedergabe </button> </li> </ul> <!----> <div class="tab__panel" tabindex="0" role="tabpanel"> <section class="core-section-container my-3 transcripts"> <!----> <h2 class="core-section-container__title section-title"> Standard-Routing </h2> <!----> <div class="core-section-container__content break-words"> <div class="transcripts__copy"> <span class="transcripts__quotation">“</span> <p> Was wäre eine Applikation, ohne die Möglichkeit zu navigieren und an diese Navigationspunkte zurückzuspringen oder sie zu teilen? In dieser Lektion lernen wir, wie wir mit React Router URL-Routen im Frontend abfangen können. Damit können wir dann steuern, was gerendert wird. Bei Web-Apps routen wir technisch innerhalb eines Browsers. Die Umsetzung für andere Build Targets wie Native iOS funktioniert anders. Deswegen ist Routing auch nicht Teil des React Cores. Wir bedienen uns daher der npm-Library React Router. Via "npm install" installieren wir die Library und starten dann mit "npm start" unseren Dev-Server. Wir finden dann eine kleine Seite, die aus drei Components besteht. Der Home Component, die nur statischen Code enthält, die Photos Component, die ein Array von Image-IDs entgegennimmt und entsprechend die Bilder anzeigt, sowie die Single Photo Component, die nur eine Image-ID entgegennimmt und entsprechend nur ein Bild anzeigt. Wir wollen, dass auf der Hauptseite, also unter /,… </p> </div> </div> </section> </div> <!----> <div class="tab__panel" tabindex="0" role="tabpanel" hidden> <section class="core-section-container my-3 offline"> <!----> <h2 class="core-section-container__title section-title"> Laden Sie Kurse herunter und lernen Sie auch unterwegs. </h2> <!----> <div class="core-section-container__content break-words"> <p class="offline__description"> Sehen Sie sich Kurse auf Ihrem Mobilgerät ohne Internetverbindung an. Laden Sie Kurse mit der LinkedIn Learning-App für iOS oder Android herunter. </p> <div class="offline__link-container"> <a class="offline__link" href="https://itunes.apple.com/de/app/apple-store/id1084807225?ls=1&pt=10746&mt=8&ct=learning_course_tab_viewoffline&trk=apple_app_store" data-tracking-control-name="apple_app_store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Im App Store herunterladen" class="offline__image" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/emczv26hz24woii2j4aleyry"> </a> <a class="offline__link" href="https://play.google.com/store/apps/details?id=com.linkedin.android.learning&referrer=utm_source=linkedinlearning&utm_medium=mobileWeb&utm_campaign=learning_guest&hl=de&ct=learning_course_tab_viewoffline&trk=google_play_store" data-tracking-control-name="google_play_store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Auf Google Play erhältlich" class="offline__image" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/535kqf5rsexfx0lucb3t6palb"> </a> </div> <div class="footer-upsell-link"> <span class="footer-upsell-link__description"> Sehen Sie sich diesen Kurs an, wann und wo immer Sie möchten. </span> <a href="http://de.linkedin.com/learning/subscription/products?courseSlug=react-grundkurs&destRedirectURL=https%3A%2F%2Fde%2Elinkedin%2Ecom%2Flearning%2Freact-grundkurs%2Fstandard-routing&trk=offline_viewing&upsellTrk=lil_upsell_offline_viewing_subscription" data-tracking-control-name="lil_upsell_offline_viewing_subscription" data-tracking-impression-name="lil_upsell_offline_viewing_subscription" data-litms-tracking-control-name="lil_upsell_offline_viewing_subscription" data-tracking-will-navigate class="offline__upsell-link" data-test-live-offline-footer-sub-upsell> Starten Sie noch heute mit einer kostenlosen Probeversion. </a> </div> </div> </section> </div> </div> </div> </section> <section class="right-rail papabear:w-right-rail-width papabear:ml-column-gutter mamabear:max-w-[790px] mamabear:px-mobile-container-padding babybear:max-w-[790px] babybear:px-mobile-container-padding"> <section class="table-of-contents mb-4"> <h2 class="table-of-contents__header"> Inhalt </h2> <ul class="table-of-contents__list"> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Einleitung <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Einleitung <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/die-umfangreiche-einfuhrung-in-das-javascript-webframework-react-mit-vielen-praxisbeispielen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die umfangreiche Einführung in das JavaScript-Webframework React mit vielen Praxisbeispielen </div> <div class="table-of-contents__item-duration"> 1 Min. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/die-github-dateien-zum-kurs-verwenden?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die GitHub-Dateien zum Kurs verwenden </div> <div class="table-of-contents__item-duration"> 1 Min. 16 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. React auf einen Blick <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. React auf einen Blick <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/warum-react?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Warum React? </div> <div class="table-of-contents__item-duration"> 2 Min. 56 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. Exkurs: Modern JavaScript <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. Exkurs: Modern JavaScript <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/spread-rest-destructuring?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Spread, Rest & Destructuring </div> <div class="table-of-contents__item-duration"> 6 Min. 9 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/public-private-class-properties?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Public & Private Class Properties </div> <div class="table-of-contents__item-duration"> 2 Min. 22 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/arrow-functions?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Arrow Functions </div> <div class="table-of-contents__item-duration"> 2 Min. 25 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. React einrichten <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. React einrichten <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/installation-mit-cra?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Installation mit CRA </div> <div class="table-of-contents__item-duration"> 1 Min. 18 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/das-setup-im-editor?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Das Setup im Editor </div> <div class="table-of-contents__item-duration"> 2 Min. 15 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/raw-setup-mit-react-eject?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Raw-Setup mit React Eject </div> <div class="table-of-contents__item-duration"> 1 Min. 58 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/das-zusammenspiel-von-render-jsx-und-strictmode?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Das Zusammenspiel von render, JSX und StrictMode </div> <div class="table-of-contents__item-duration"> 5 Min. 12 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/react-devtools?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> React DevTools </div> <div class="table-of-contents__item-duration"> 1 Min. 12 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Class Components <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Class Components <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/render?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> render() </div> <div class="table-of-contents__item-duration"> 2 Min. 12 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/react-props?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> React-Props </div> <div class="table-of-contents__item-duration"> 4 Min. 26 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/state-componentdidmount?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> state & componentDidMount </div> <div class="table-of-contents__item-duration"> 4 Min. 29 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/lifecycle-didmount-didupdate-willunmount?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Lifecycle (didMount, didUpdate, willUnmount) </div> <div class="table-of-contents__item-duration"> 6 Min. 41 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/children-ubergeben?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> children übergeben </div> <div class="table-of-contents__item-duration"> 2 Min. 37 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Function Components <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Function Components <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/warum-gibt-es-function-components?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Warum gibt es Function Components? </div> <div class="table-of-contents__item-duration"> 4 Min. 16 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/regeln-von-hooks?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Regeln von Hooks </div> <div class="table-of-contents__item-duration"> 2 Min. 2 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/keine-schwarze-magie-react-hooks?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Keine schwarze Magie: React Hooks </div> <div class="table-of-contents__item-duration"> 1 Min. 47 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/buttoncounter-mit-usestate?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> ButtonCounter mit useState </div> <div class="table-of-contents__item-duration"> 4 Min. 17 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/lifecycle-mit-useeffect-countdown?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Lifecycle mit useEffect: Countdown </div> <div class="table-of-contents__item-duration"> 8 Min. 3 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/usememo-bzw-usecallback?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> useMemo bzw. useCallback </div> <div class="table-of-contents__item-duration"> 5 Min. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/react-hooks-ausblick-und-tipps?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> React Hooks: Ausblick und Tipps </div> <div class="table-of-contents__item-duration"> 2 Min. 19 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/challenge-stoppuhr?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Stoppuhr </div> <div class="table-of-contents__item-duration"> 56 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/solution-stoppuhr?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Stoppuhr </div> <div class="table-of-contents__item-duration"> 11 Min. 15 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Class vs. Function Components <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Class vs. Function Components <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/gemeinsamkeiten-defaultprops-displayname-proptypes?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Gemeinsamkeiten: defaultProps, displayName, propTypes </div> <div class="table-of-contents__item-duration"> 7 Min. 19 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/class-components-auf-dem-abstellgleis?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Class Components auf dem Abstellgleis </div> <div class="table-of-contents__item-duration"> 49 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 7. States und Events <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 7. States und Events <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/user-interaktionen-abfangen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> User-Interaktionen abfangen </div> <div class="table-of-contents__item-duration"> 4 Min. 21 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/event-weitergabe-vs-addeventlistener?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Event-Weitergabe (vs. addEventListener) </div> <div class="table-of-contents__item-duration"> 3 Min. 24 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/globale-events?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Globale Events </div> <div class="table-of-contents__item-duration"> 4 Min. 44 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/challenge-position-des-mauszeigers?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Position des Mauszeigers </div> <div class="table-of-contents__item-duration"> 44 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/solution-position-des-mauszeigers?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Position des Mauszeigers </div> <div class="table-of-contents__item-duration"> 5 Min. 46 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 8. Kontexte <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 8. Kontexte <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/theming?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Theming </div> <div class="table-of-contents__item-duration"> 5 Min. 42 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/global-state?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Global State </div> <div class="table-of-contents__item-duration"> 3 Min. 33 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 9. Iteration, Listen, Fragments und Conditionals <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 9. Iteration, Listen, Fragments und Conditionals <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/das-key-attribut-verstehen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Das key-Attribut verstehen </div> <div class="table-of-contents__item-duration"> 3 Min. 48 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/fragments-als-virtuelle-wrapper?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Fragments als virtuelle Wrapper </div> <div class="table-of-contents__item-duration"> 4 Min. 34 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/conditional-rendering?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Conditional Rendering </div> <div class="table-of-contents__item-duration"> 4 Min. 54 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 10. Arbeiten mit (DOM)-Referenzen & Portals <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 10. Arbeiten mit (DOM)-Referenzen & Portals <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/createforwardref-useref?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> createForwardRef & useRef </div> <div class="table-of-contents__item-duration"> 5 Min. 37 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/createportal?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> createPortal </div> <div class="table-of-contents__item-duration"> 4 Min. 8 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 11. Formulare <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 11. Formulare <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/uncontrolled-forms-ref?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Uncontrolled Forms (ref) </div> <div class="table-of-contents__item-duration"> 5 Min. 16 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/controlled-forms?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Controlled Forms </div> <div class="table-of-contents__item-duration"> 6 Min. 21 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/challenge-erweiterung-des-formulars?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Erweiterung des Formulars </div> <div class="table-of-contents__item-duration"> 54 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/solution-erweiterung-des-formulars?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Erweiterung des Formulars </div> <div class="table-of-contents__item-duration"> 4 Min. 39 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button show-more-less__button--hide" aria-expanded="true" data-tracking-control-name="learning-course_toc-section_show_more"> 12. Routing mit React Router & Error Boundaries <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button " aria-expanded="true" data-tracking-control-name="learning-course_toc-section_show_more"> 12. Routing mit React Router & Error Boundaries <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list " data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item toc-item--active"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/standard-routing?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="true"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Standard-Routing </div> <div class="table-of-contents__item-duration"> 6 Min. 13 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/lazy-loading-mit-suspense?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Lazy-Loading mit Suspense </div> <div class="table-of-contents__item-duration"> 3 Min. 32 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/error-boundaries?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Error Boundaries </div> <div class="table-of-contents__item-duration"> 4 Min. 31 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/challenge-react-router-mit-search-parametern-nutzen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: React Router mit Search-Parametern nutzen </div> <div class="table-of-contents__item-duration"> 56 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/solution-react-router-mit-search-parametern-nutzen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: React Router mit Search-Parametern nutzen </div> <div class="table-of-contents__item-duration"> 3 Min. 48 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 13. Styling mit React <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 13. Styling mit React <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/spaces-erzwingen-global-css-inline-css?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Spaces erzwingen, Global CSS & Inline CSS </div> <div class="table-of-contents__item-duration"> 4 Min. 5 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/sass-css-modules?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> SASS & CSS Modules </div> <div class="table-of-contents__item-duration"> 4 Min. 22 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/weitere-moglichkeiten?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Weitere Möglichkeiten </div> <div class="table-of-contents__item-duration"> 2 Min. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 14. Testing in React <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 14. Testing in React <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/setup-und-rendertest?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Setup und Rendertest </div> <div class="table-of-contents__item-duration"> 3 Min. 28 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/existenz-testen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Existenz testen </div> <div class="table-of-contents__item-duration"> 4 Min. 30 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/inhalte-prufen-properties-validieren-und-fehler-abfangen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Inhalte prüfen, Properties validieren und Fehler abfangen </div> <div class="table-of-contents__item-duration"> 5 Min. 47 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 15. Aufbauwissen für Fortgeschrittene <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 15. Aufbauwissen für Fortgeschrittene <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/innerhtml-jsx-kommentare?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> innerHTML && JSX-Kommentare </div> <div class="table-of-contents__item-duration"> 2 Min. 27 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/usereducer-redux?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> useReducer & Redux </div> <div class="table-of-contents__item-duration"> 2 Min. 33 Sek. </div> </div> </a> </li> </ul> <!----> </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 16. Neue Features und Funktionen in React 18 <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 16. Neue Features und Funktionen in React 18 <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/react-18-concurrent-react?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> React 18: Concurrent React </div> <div class="table-of-contents__item-duration"> 2 Min. 30 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/automatic-batching?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Automatic Batching </div> <div class="table-of-contents__item-duration"> 4 Min. 13 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/useid?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> useId </div> <div class="table-of-contents__item-duration"> 2 Min. 41 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/usetransition?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> useTransition </div> <div class="table-of-contents__item-duration"> 4 Min. 55 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/usedeferredvalue?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> useDeferredValue </div> <div class="table-of-contents__item-duration"> 3 Min. 46 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/react-grundkurs/suspense-mit-usetransition?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Suspense mit useTransition </div> <div class="table-of-contents__item-duration"> 5 Min. </div> </div> </a> </li> </ul> <!----> </div> </li> </ul> </section> </section> </main> <div class="pre-footer "> <section class="core-section-container my-3 price-disclaimer"> <!----> <!----> <!----> <div class="core-section-container__content break-words"> <p class="price-disclaimer__copy"> <sup class="price-disclaimer__copy--sup">*</sup>Der Preis ist abhängig vom beim Einloggen oder bei der Registrierung angegebenen Profil- und Rechnungsland. </p> </div> </section> <section class="tw-linkster bg-cool-gray-20 browse-map" data-impression-id="learning-course_linkster" data-js-module-id="linkster"> <div class="max-w-screen-content-max-w w-full flex justify-between my-0 mx-auto mamabear:px-3 babybear:px-2 babybear:flex-col"> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Themen der Kategorie „Business“ ansehen </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/fuhrung-und-berufliche-weiterentwicklung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Berufliche Weiterentwicklung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/business-software-und-tools?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business-Software und Tools </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/diversity-equity-und-inclusion-dei?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Diversity, Equity, Inclusion und Belonging (DEIB) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/finanz-und-rechnungswesen?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Finanz- und Rechnungswesen </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/fuhrung-und-management-15955952?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Führung und Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/karriere-entwicklung-15962768?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Karriere-Entwicklung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/kleinunternehmen-und-unternehmertum?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Kleinunternehmen und Unternehmertum </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/kundenservice-15962236?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Kundenservice </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/marketing-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Marketing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/personalwesen-15962946?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Personalwesen </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/projektmanagement-15955944?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Projektmanagement </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/training-und-bildung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Training und Bildung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/unternehmensanalyse-und-strategie?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Unternehmensanalyse und -strategie </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/verkauf-und-vertrieb-15961401?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Verkauf und Vertrieb </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="Alle Kurse anzeigen: Business" href="https://de.linkedin.com/learning/topics/business-2?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> Alle anzeigen </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Themen der Kategorie „Kreativität“ ansehen </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/animation-und-illustration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Animation und Illustration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/architektur-ingenieur-und-bauwesen-aec?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Architektur-, Ingenieur- und Bauwesen (AEC) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/audio-und-musik?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Audio und Musik </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/bildbearbeitung-fotografie-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Bildbearbeitung und Fotografie </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/grafikdesign?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Grafikdesign </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/motion-design-und-visuelle-effekte?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Motion-Design und Visuelle Effekte </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/produkt-und-herstellung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Produkt und Herstellung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/user-experience-15995392?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> User Experience </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/video-audio-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Video </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/visualisierung-und-echtzeit-rendering?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Visualisierung und Echtzeit-Rendering </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/webdesign-und-ux?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Webdesign </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="Alle Kurse anzeigen: Kreativität" href="https://de.linkedin.com/learning/topics/kreativitat?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> Alle anzeigen </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Themen der Kategorie „Technik“ ansehen </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/cloud-computing-16105209?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cloud-Computing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/data-science-15956724?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Data Science </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/datenbankverwaltung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Datenbankverwaltung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/devops-16105665?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> DevOps </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/hardware?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Hardware </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/it-support-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> IT-Helpdesk </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/informations-und-it-sicherheit?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> IT-Sicherheit und Cybersecurity </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/kunstliche-intelligenz-ki?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Künstliche Intelligenz (KI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/mobile-entwicklung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Mobile Entwicklung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/it-operations-und-it-sicherheit?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Netzwerk- und Systemadministration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/softwareentwicklung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Softwareentwicklung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/webentwicklung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Webentwicklung </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="Alle Kurse anzeigen: Technik" href="https://de.linkedin.com/learning/topics/technik?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> Alle anzeigen </a> </div> </div> </section> </div> <footer class="li-footer bg-transparent w-full "> <ul class="li-footer__list flex flex-wrap flex-row items-start justify-start w-full h-auto min-h-[50px] my-[0px] mx-auto py-3 px-2 papabear:w-[1128px] papabear:p-0"> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <span class="sr-only">LinkedIn</span> <icon class="li-footer__copy-logo text-color-logo-brand-alt inline-block self-center h-[14px] w-[56px] mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/e12h2cd8ac580qen9qdd0qks8"></icon> <span class="li-footer__copy-text flex items-center">© 2024</span> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://about.linkedin.com?trk=d_learning_course_video_guest_footer-about" data-tracking-control-name="d_learning_course_video_guest_footer-about" data-tracking-will-navigate> Info </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/accessibility?trk=d_learning_course_video_guest_footer-accessibility" data-tracking-control-name="d_learning_course_video_guest_footer-accessibility" data-tracking-will-navigate> Barrierefreiheit </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/user-agreement?trk=d_learning_course_video_guest_footer-user-agreement" data-tracking-control-name="d_learning_course_video_guest_footer-user-agreement" data-tracking-will-navigate> Nutzervereinbarung </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/privacy-policy?trk=d_learning_course_video_guest_footer-privacy-policy" data-tracking-control-name="d_learning_course_video_guest_footer-privacy-policy" data-tracking-will-navigate> Datenschutzrichtlinie </a> </li> <!----> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/cookie-policy?trk=d_learning_course_video_guest_footer-cookie-policy" data-tracking-control-name="d_learning_course_video_guest_footer-cookie-policy" data-tracking-will-navigate> Cookie-Richtlinie </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/copyright-policy?trk=d_learning_course_video_guest_footer-copyright-policy" data-tracking-control-name="d_learning_course_video_guest_footer-copyright-policy" data-tracking-will-navigate> Copyright-Richtlinie </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://brand.linkedin.com/policies?trk=d_learning_course_video_guest_footer-brand-policy" data-tracking-control-name="d_learning_course_video_guest_footer-brand-policy" data-tracking-will-navigate> Markenrichtlinine </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/psettings/guest-controls?trk=d_learning_course_video_guest_footer-guest-controls" data-tracking-control-name="d_learning_course_video_guest_footer-guest-controls" data-tracking-will-navigate> Einstellungen für Nichtmitglieder </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/professional-community-policies?trk=d_learning_course_video_guest_footer-community-guide" data-tracking-control-name="d_learning_course_video_guest_footer-community-guide" data-tracking-will-navigate> Community-Richtlinien </a> </li> <!----> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <div class="collapsible-dropdown collapsible-dropdown--footer collapsible-dropdown--up flex items-center relative hyphens-auto language-selector z-2"> <!----> <ul class="collapsible-dropdown__list hidden container-raised absolute w-auto overflow-y-auto flex-col items-stretch z-1 bottom-[100%] top-auto" role="menu" tabindex="-1"> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="العربية (Arabisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ar_AE" data-locale="ar_AE" role="menuitem" lang="ar_AE"> العربية (Arabisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="বাংলা (Bengali)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-bn_IN" data-locale="bn_IN" role="menuitem" lang="bn_IN"> বাংলা (Bengali) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Čeština (Tschechisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-cs_CZ" data-locale="cs_CZ" role="menuitem" lang="cs_CZ"> Čeština (Tschechisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Dansk (Dänisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-da_DK" data-locale="da_DK" role="menuitem" lang="da_DK"> Dansk (Dänisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Deutsch ausgewählt" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link--selected" data-tracking-control-name="language-selector-de_DE" data-locale="de_DE" role="menuitem" lang="de_DE"> <strong>Deutsch</strong> </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Ελανεκα (Griechisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-el_GR" data-locale="el_GR" role="menuitem" lang="el_GR"> Ελανεκα (Griechisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="English (Englisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-en_US" data-locale="en_US" role="menuitem" lang="en_US"> English (Englisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Español (Spanisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-es_ES" data-locale="es_ES" role="menuitem" lang="es_ES"> Español (Spanisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="فارسی (Persisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fa_IR" data-locale="fa_IR" role="menuitem" lang="fa_IR"> فارسی (Persisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Suomi (Finnisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fi_FI" data-locale="fi_FI" role="menuitem" lang="fi_FI"> Suomi (Finnisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Français (Französisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fr_FR" data-locale="fr_FR" role="menuitem" lang="fr_FR"> Français (Französisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="हिंदी (Hindi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hi_IN" data-locale="hi_IN" role="menuitem" lang="hi_IN"> हिंदी (Hindi) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Magyar (Ungarisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hu_HU" data-locale="hu_HU" role="menuitem" lang="hu_HU"> Magyar (Ungarisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Bahasa Indonesia (Indonesisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-in_ID" data-locale="in_ID" role="menuitem" lang="in_ID"> Bahasa Indonesia (Indonesisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Italiano (Italienisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-it_IT" data-locale="it_IT" role="menuitem" lang="it_IT"> Italiano (Italienisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="עברית (Hebräisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-iw_IL" data-locale="iw_IL" role="menuitem" lang="iw_IL"> עברית (Hebräisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="日本語 (Japanisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ja_JP" data-locale="ja_JP" role="menuitem" lang="ja_JP"> 日本語 (Japanisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="한국어 (Koreanisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ko_KR" data-locale="ko_KR" role="menuitem" lang="ko_KR"> 한국어 (Koreanisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="मराठी (Marathi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-mr_IN" data-locale="mr_IN" role="menuitem" lang="mr_IN"> मराठी (Marathi) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Bahasa Malaysia (Malaysisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ms_MY" data-locale="ms_MY" role="menuitem" lang="ms_MY"> Bahasa Malaysia (Malaysisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Nederlands (Niederländisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-nl_NL" data-locale="nl_NL" role="menuitem" lang="nl_NL"> Nederlands (Niederländisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Norsk (Norwegisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-no_NO" data-locale="no_NO" role="menuitem" lang="no_NO"> Norsk (Norwegisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="ਪੰਜਾਬੀ (Punjabi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pa_IN" data-locale="pa_IN" role="menuitem" lang="pa_IN"> ਪੰਜਾਬੀ (Punjabi) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Polski (Polnisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pl_PL" data-locale="pl_PL" role="menuitem" lang="pl_PL"> Polski (Polnisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Português (Portugiesisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pt_BR" data-locale="pt_BR" role="menuitem" lang="pt_BR"> Português (Portugiesisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Română (Rumänisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ro_RO" data-locale="ro_RO" role="menuitem" lang="ro_RO"> Română (Rumänisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Русский (Russisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ru_RU" data-locale="ru_RU" role="menuitem" lang="ru_RU"> Русский (Russisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Svenska (Schwedisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-sv_SE" data-locale="sv_SE" role="menuitem" lang="sv_SE"> Svenska (Schwedisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="తెలుగు (Telugu)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-te_IN" data-locale="te_IN" role="menuitem" lang="te_IN"> తెలుగు (Telugu) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="ภาษาไทย (Thai)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-th_TH" data-locale="th_TH" role="menuitem" lang="th_TH"> ภาษาไทย (Thai) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Tagalog (Tagalog)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tl_PH" data-locale="tl_PH" role="menuitem" lang="tl_PH"> Tagalog (Tagalog) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Türkçe (Türkisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tr_TR" data-locale="tr_TR" role="menuitem" lang="tr_TR"> Türkçe (Türkisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Українська (Ukrainisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-uk_UA" data-locale="uk_UA" role="menuitem" lang="uk_UA"> Українська (Ukrainisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="Tiếng Việt (Vietnamesisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-vi_VN" data-locale="vi_VN" role="menuitem" lang="vi_VN"> Tiếng Việt (Vietnamesisch) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="简体中文 (Chinesisch vereinfacht)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_CN" data-locale="zh_CN" role="menuitem" lang="zh_CN"> 简体中文 (Chinesisch vereinfacht) </button> </li> <li class="language-selector__item" role="presentation"> <!-- Adding aria-label to both the li and the button because screen reader focus goes to button on desktop and li on mobile--> <button aria-label="正體中文 (Chinesisch traditionell)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_TW" data-locale="zh_TW" role="menuitem" lang="zh_TW"> 正體中文 (Chinesisch traditionell) </button> </li> <!----> </ul> <button class="language-selector__button select-none relative pr-2 font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover hover:cursor-pointer focus:text-color-link-focus focus:outline-dotted focus:outline-1" aria-expanded="false" data-tracking-control-name="footer-lang-dropdown_trigger"> <span class="language-selector__label-text mr-0.5 break-words"> Sprache </span> <icon class="language-selector__label-chevron w-2 h-2 absolute top-0 right-0" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> </div> </li> </ul> <!----> </footer> <script src="https://static.licdn.com/aero-v1/sc/h/eh08muqvrde4h3hc6koyij5ti" async></script> <!----> <script src="https://static.licdn.com/aero-v1/sc/h/ek2tdg64hm7rdsrulg3lyo2vc" async defer></script> <script data-delayed-url="https://static.licdn.com/aero-v1/sc/h/81wy0f4hfrhoilx9eqdwg202z" data-module-id="media-player"></script> <code id="trackingData" style="display: none"><!--{"hashedCourseId":"EoWtrzCTH3GJFRTn6TagIkM029Kqm3AhnlOvG+HqzE0=","urn":"urn:li:lyndaCourse:3161772","totalPrice":{"currencyCode":"HKD","amount":"349.99"}}--></code> <code id="alcOnlyData" style="display: none"><!--{"isAlcOnly":false,"canPurchaseCourse":true}--></code> </body> </html>