React: Design Patterns Online Class | LinkedIn Learning, formerly Lynda.com

<!DOCTYPE html> <html lang="en"> <head> <meta name="pageKey" content="d_learning_course_guest">  <meta name="locale" content="en_US"> <meta id="config" data-app-version="2.0.2217" data-call-tree-id="AAYnjSZq/a8Jj0Ns5dIcSA==" data-multiproduct-name="learning-guest-frontend" data-service-name="learning-guest-frontend" data-browser-id="dde2fe06-84bf-4cb5-83a5-12289a2b0445" data-enable-page-view-heartbeat-tracking data-page-instance="urn:li:page:learning_course_guest;yVSgd5vWTBe/1ZDmPIkEuw==" data-disable-jsbeacon-pagekey-suffix="false" data-member-id="0"> <link rel="canonical" href="https://www.linkedin.com/learning/react-design-patterns">     <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>React: Design Patterns Online Class | LinkedIn Learning, formerly Lynda.com</title> <meta name="robots" content="noarchive, max-image-preview:large"> <meta name="description" content="Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer."> <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="React: Design Patterns Online Class | LinkedIn Learning, formerly Lynda.com"> <meta name="twitter:title" content="React: Design Patterns Online Class | LinkedIn Learning, formerly Lynda.com"> <meta property="og:description" content="Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer."> <meta name="twitter:description" content="Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer."> <meta property="og:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I"> <meta name="twitter:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I">  <meta property="og:url" content="https://www.linkedin.com/learning/react-design-patterns"> <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/ccepec31u8riooiwchbtig8m0"> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"Course","provider":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"publisher":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"hasCourseInstance":{"@type":"CourseInstance","courseMode":"online","courseWorkload":"PT3H19M44S","instructor":[{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"}]},"inLanguage":"en","name":"React: Design Patterns","offers":[{"@type":"Offer","category":"Subscription"},{"@type":"Offer","category":"Paid","price":"299.99","priceCurrency":"HKD"}],"description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","image":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","creator":[{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"}],"author":[{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"}],"dateCreated":"2021-09-27","datePublished":"2021-09-27","thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","timeRequired":"PT3H19M44S","totalHistoricalEnrollment":159286,"url":"https://www.linkedin.com/learning/react-design-patterns","about":[{"@type":"Thing","url":"https://www.linkedin.com/learning/topics/react-js","name":"React.js"},{"@type":"Thing","url":"https://www.linkedin.com/learning/search?keywords=Software+Design+Patterns","name":"Software Design Patterns"}],"hasPart":[[{"@type":"VideoObject","name":"Take your React skills to the next level - Introduction","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT40S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/take-your-react-skills-to-the-next-level"},{"@type":"VideoObject","name":"What you should know - Introduction","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT52S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/what-you-should-know"},{"@type":"VideoObject","name":"What are design patterns? - Introduction","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT2M28S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/what-are-design-patterns"}],[{"@type":"VideoObject","name":"What are layout components? - 1. Layout Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT1M55S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/what-are-layout-components"},{"@type":"VideoObject","name":"Split-screen components - 1. Layout Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT7M27S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/split-screen-components"},{"@type":"VideoObject","name":"Split-screen component improvements - 1. Layout Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT6M10S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/split-screen-component-improvements"},{"@type":"VideoObject","name":"Lists and list items - 1. Layout Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT10M44S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/lists-and-list-items"},{"@type":"VideoObject","name":"Creating different list types - 1. Layout Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT6M26S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/creating-different-list-types"},{"@type":"VideoObject","name":"Modal components - 1. Layout Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT7M46S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/modal-components"}],[{"@type":"VideoObject","name":"What are container components? - 2. Container Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT1M41S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/what-are-container-components"},{"@type":"VideoObject","name":"Server instructions - 2. Container Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT3M26S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/server-instructions"},{"@type":"VideoObject","name":"CurrentUserLoader component - 2. Container Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT7M43S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/currentuserloader-component"},{"@type":"VideoObject","name":"UserLoader component - 2. Container Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT5M34S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/userloader-component"},{"@type":"VideoObject","name":"ResourceLoader component - 2. Container Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT5M50S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/resourceloader-component"},{"@type":"VideoObject","name":"DataSource component - 2. Container Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT5M13S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/datasource-component"},{"@type":"VideoObject","name":"Loading data from localStorage - 2. Container Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT2M33S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/loading-data-from-localstorage"}],[{"@type":"VideoObject","name":"Controlled vs. uncontrolled components - 3. Controlled and Uncontrolled Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT2M39S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/controlled-vs-uncontrolled-components"},{"@type":"VideoObject","name":"Uncontrolled forms - 3. Controlled and Uncontrolled Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT6M","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/uncontrolled-forms"},{"@type":"VideoObject","name":"Controlled forms - 3. Controlled and Uncontrolled Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT8M23S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/controlled-forms"},{"@type":"VideoObject","name":"Controlled modals - 3. Controlled and Uncontrolled Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT7M46S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/controlled-modals"},{"@type":"VideoObject","name":"Uncontrolled onboarding flows - 3. Controlled and Uncontrolled Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT8M38S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/uncontrolled-onboarding-flows"},{"@type":"VideoObject","name":"Collecting onboarding data - 3. Controlled and Uncontrolled Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT4M57S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/collecting-onboarding-data"},{"@type":"VideoObject","name":"Controlled onboarding flows - 3. Controlled and Uncontrolled Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT6M25S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/controlled-onboarding-flows"}],[{"@type":"VideoObject","name":"What are higher-order components? - 4. Higher-Order Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT1M52S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/what-are-higher-order-components"},{"@type":"VideoObject","name":"Printing props with HOCs - 4. Higher-Order Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT5M29S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/printing-props-with-hocs"},{"@type":"VideoObject","name":"Loading data with HOCs - 4. Higher-Order Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT4M35S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/loading-data-with-hocs"},{"@type":"VideoObject","name":"Modifying data with HOCs - 4. Higher-Order Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT8M22S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/modifying-data-with-hocs"},{"@type":"VideoObject","name":"Creating forms with HOCs - 4. Higher-Order Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT7M27S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/creating-forms-with-hocs"},{"@type":"VideoObject","name":"Higher-order component improvements - 4. Higher-Order Components","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT9M15S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/higher-order-component-improvements"}],[{"@type":"VideoObject","name":"What are custom Hooks? - 5. Custom Hooks Patterns","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT1M51S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/what-are-custom-hooks"},{"@type":"VideoObject","name":"useCurrentUser Hook - 5. Custom Hooks Patterns","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT5M13S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/usecurrentuser-hook"},{"@type":"VideoObject","name":"useUser Hook - 5. Custom Hooks Patterns","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT3M16S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/useuser-hook"},{"@type":"VideoObject","name":"useResource Hook - 5. Custom Hooks Patterns","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT4M36S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/useresource-hook"},{"@type":"VideoObject","name":"useDataSource Hook - 5. Custom Hooks Patterns","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT6M29S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/usedatasource-hook"}],[{"@type":"VideoObject","name":"What is functional programming? - 6. Functional Programming and React","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT3M28S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/what-is-functional-programming"},{"@type":"VideoObject","name":"Recursive components - 6. Functional Programming and React","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT6M23S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/recursive-components"},{"@type":"VideoObject","name":"Component composition - 6. Functional Programming and React","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT5M7S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/component-composition"},{"@type":"VideoObject","name":"Partially applied components - 6. Functional Programming and React","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT3M37S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/partially-applied-components"}],[{"@type":"VideoObject","name":"Next steps - Conclusion","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT1M28S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/next-steps"}]],"syllabusSections":[{"@type":"Syllabus","name":"Take your React skills to the next level","timeRequired":"PT40S","description":"Most React applications have some very common challenges that pop up very frequently and being able to solve these challenges well requires a knowledge of basic React design patterns. In this course, learn a number of common design patterns that will help you write more maintainable, flexible, and performant React applications."},{"@type":"Syllabus","name":"What you should know","timeRequired":"PT52S","description":"In order to get the most out of this course, there are a few skills it would be helpful to have. In this video, explore some of these skills and why they're necessary."},{"@type":"Syllabus","name":"What are design patterns?","timeRequired":"PT2M28S","description":"Design patterns are effective solutions to common software development problems. In this video, learn about React design patterns and some of the possibilities that they provide."},{"@type":"Syllabus","name":"What are layout components?","timeRequired":"PT1M55S","description":"Layout components give you an easy way to display your components in different places on the screen. In this video, learn about layout components, as well as some of the benefits they provide."},{"@type":"Syllabus","name":"Split-screen components","timeRequired":"PT7M27S","description":"Split-screen components allow you to display two or more child components next to each other, without those child components needing any special styling. In this video, learn how to build a basic split-screen component."},{"@type":"Syllabus","name":"Split-screen component improvements","timeRequired":"PT6M10S","description":"Now that you've built a split-screen component, there are a few improvements that you can make. In this video, discover what these improvements are and why they're helpful."},{"@type":"Syllabus","name":"Lists and list items","timeRequired":"PT10M44S","description":"Lists and list items are an extremely popular method for displaying array data in React applications, but they're often done in a suboptimal way. In this video, learn how to create a list component that can display different list items automatically."},{"@type":"Syllabus","name":"Creating different list types","timeRequired":"PT6M26S","description":"Now that you've created a flexible list component, it's time to take it a step further. In this video, learn how to create several different kinds of lists, and how these lists can be combined with different list items."},{"@type":"Syllabus","name":"Modal components","timeRequired":"PT7M46S","description":"Modals allow you to display content on top of the screen's main content. In this video, learn how to create a reusable modal component in React that allows you to display any kind of content inside of it."},{"@type":"Syllabus","name":"What are container components?","timeRequired":"PT1M41S","description":"Container components allow you to share complex functionality between components by wrapping them in a parent component. In this video, learn the basics of container components, as well as some of the benefits they provide."},{"@type":"Syllabus","name":"Server instructions","timeRequired":"PT3M26S","description":"In order to demonstrate data loading with Container components, you need to have a back-end server. In this video, learn about the provided server file and how to run it."},{"@type":"Syllabus","name":"CurrentUserLoader component","timeRequired":"PT7M43S","description":"Container components that load data can help remove a significant amount of logic from your components. In this video, learn how to build a container component that loads the current user from the server."},{"@type":"Syllabus","name":"UserLoader component","timeRequired":"PT5M34S","description":"Container components that load data can help remove a significant amount of logic from your components. In this video, learn how to make your current user container component more flexible by passing in an id prop."},{"@type":"Syllabus","name":"ResourceLoader component","timeRequired":"PT5M50S","description":"Container components that load data can help remove a significant amount of logic from your components. In this video, learn how to expand on your UserLoader container component so that it works with other types of resources as well."},{"@type":"Syllabus","name":"DataSource component","timeRequired":"PT5M13S","description":"You've already seen how to create container components that load data from the server, but it's also possible to have them load data from any potential data source. In this video, learn how to create a DataSource container component that allows you to use data from anywhere."},{"@type":"Syllabus","name":"Loading data from localStorage","timeRequired":"PT2M33S","description":"Now that you've created a DataSource container component, it's time to add another data source. In this video, learn how to load data from localStorage in your container components."},{"@type":"Syllabus","name":"Controlled vs. uncontrolled components","timeRequired":"PT2M39S","description":"Controlled components are a way of allowing the parent component to decide how their child component behaves. In this video, learn the difference between controlled and uncontrolled components, as well as some of the benefits that controlled components provide."},{"@type":"Syllabus","name":"Uncontrolled forms","timeRequired":"PT6M","description":"Uncontrolled forms rely on the HTML DOM to handle all of the form's data and events. In this video, learn what uncontrolled forms look like and some of the difficulties that arise when using them."},{"@type":"Syllabus","name":"Controlled forms","timeRequired":"PT8M23S","description":"Controlled forms do not rely on the HTML DOM to handle all of the form's data and events, instead, they use React state to track their values. In this video, learn what controlled forms look like and some of the benefits of using them."},{"@type":"Syllabus","name":"Controlled modals","timeRequired":"PT7M46S","description":"Controlled modals, unlike uncontrolled modals, do not keep track of their own state or determine when they should be shown. In this video, learn how to convert an uncontrolled modal into a controlled one, and some of the benefits of doing this."},{"@type":"Syllabus","name":"Uncontrolled onboarding flows","timeRequired":"PT8M38S","description":"Uncontrolled onboarding flows keep track of their own state and handle their own data. In this video, explore what an uncontrolled onboarding flow component might look like and some of the difficulties that arise from doing things this way."},{"@type":"Syllabus","name":"Collecting onboarding data","timeRequired":"PT4M57S","description":"Uncontrolled onboarding flows keep track of their own state and handle their own data. In this video, learn how an onboarding flow might handle its data collection."},{"@type":"Syllabus","name":"Controlled onboarding flows","timeRequired":"PT6M25S","description":"Controlled onboarding flows do not keep track of their own state and handle their own data. In this video, explore what a controlled onboarding flow component might look like and some of the benefits that arise from doing things this way."},{"@type":"Syllabus","name":"What are higher-order components?","timeRequired":"PT1M52S","description":"Higher-order components are functions that return components. In this video, learn the basics of higher-order components, as well as some of the benefits they provide."},{"@type":"Syllabus","name":"Printing props with HOCs","timeRequired":"PT5M29S","description":"One of the most basic uses of higher-order components is to inspect the behavior of existing components in your application without adding anything to them. In this video, learn how to create a higher-order component that automatically displays the props of the component that you wrap."},{"@type":"Syllabus","name":"Loading data with HOCs","timeRequired":"PT4M35S","description":"Another basic use of higher-order components is to load data for your application without adding anything to your existing components. In this video, learn how to create a higher-order component that automatically displays the props of the component that you wrap."},{"@type":"Syllabus","name":"Modifying data with HOCs","timeRequired":"PT8M22S","description":"Another potential use of higher-order components is to allow your components to modify server data. In this video, learn how to create a higher-order component that allows the components inside it to automatically modify server data."},{"@type":"Syllabus","name":"Creating forms with HOCs","timeRequired":"PT7M27S","description":"Another potential use of higher-order components is to handle forms. In this video, learn how to create a higher-order component that makes working with forms easier."},{"@type":"Syllabus","name":"Higher-order component improvements","timeRequired":"PT9M15S","description":"Now that you've built an in-depth higher-order component, there are still a few improvements that you can make. In this video, learn what those improvements are and why they're helpful."},{"@type":"Syllabus","name":"What are custom Hooks?","timeRequired":"PT1M51S","description":"Custom Hooks like container components give you an easy way to encapsulate complex functionality and share it between your components. In this video, learn the basics of custom Hooks, as well as some of the benefits they provide."},{"@type":"Syllabus","name":"useCurrentUser Hook","timeRequired":"PT5M13S","description":"Custom Hooks that load data can help remove a significant amount of logic from your components. In this video, learn how to build a custom Hook that loads the current user from the server."},{"@type":"Syllabus","name":"useUser Hook","timeRequired":"PT3M16S","description":"Custom Hooks that load data can help remove a significant amount of logic from your components. In this video, learn how to make your current user custom Hook more flexible by passing in an id prop."},{"@type":"Syllabus","name":"useResource Hook","timeRequired":"PT4M36S","description":"Custom Hooks that load data can help remove a significant amount of logic from your components. In this video, learn how to expand on your custom Hook so that it works with other types of resources as well."},{"@type":"Syllabus","name":"useDataSource Hook","timeRequired":"PT6M29S","description":"You've already seen how to create custom Hooks that load data from the server, but it's also possible to have them load data from any potential data source. In this video, learn how to create a data source custom Hook that allows you to use data from anywhere."},{"@type":"Syllabus","name":"What is functional programming?","timeRequired":"PT3M28S","description":"Functional programming is a programming paradigm that can make your codebases more maintainable and robust. In this video, learn the basics of functional programming, as well as some of the benefits it provides."},{"@type":"Syllabus","name":"Recursive components","timeRequired":"PT6M23S","description":"Recursive components are components that refer to themselves inside their own JSX. In this video, learn the basics of recursive components, and how to use them to display highly nested data."},{"@type":"Syllabus","name":"Component composition","timeRequired":"PT5M7S","description":"Composition is when you create new components by combining existing components or passing specific props to them. In this video, learn how to use composition to create new components from existing ones."},{"@type":"Syllabus","name":"Partially applied components","timeRequired":"PT3M37S","description":"Partial application is when you only pass a subset of a function's arguments. In this video, learn how partial application applies to components and how it can be used to configure more general components into more specific ones."},{"@type":"Syllabus","name":"Next steps","timeRequired":"PT1M28S","description":"Now that you've learned many common design patterns in React, you may be wondering where to go next. In this video, explore some of the potential next steps to take after completing this course."}],"aggregateRating":{"@type":"AggregateRating","ratingCount":1920,"ratingValue":4.7,"bestRating":5,"worstRating":1},"review":[{"@type":"Review","author":{"@type":"Person","name":"Rayan Hnide","jobTitle":"Front-End Engineer | React.js, React Native, TypeScript,Node.js,Tailwind , GSAP ,Three.js , Shadcn , GitHub,firebase, Figma, and Next.js 14|Wordpress developer | Web Trainer 🚀","url":"https://ae.linkedin.com/in/rayan-hnide-02b4a8307"},"reviewRating":{"@type":"Rating","ratingValue":5},"reviewBody":"amazing","datePublished":"2024-10-20T13:49:13.164Z","publisher":{"@type":"Organization","name":"LinkedIn"},"bestRating":5,"worstRating":1},{"@type":"Review","author":{"@type":"Person","name":"Haigaz Soghomonian","jobTitle":"Software Developer | Node.js, JavaScript, React.js","url":"https://am.linkedin.com/in/haigaz-soghomonian"},"reviewRating":{"@type":"Rating","ratingValue":5},"reviewBody":"Excellent course! I highly recommend it to anyone looking to enhance their React.js skills and deepen their understanding. ","datePublished":"2024-10-14T17:26:55.178Z","publisher":{"@type":"Organization","name":"LinkedIn"},"bestRating":5,"worstRating":1},{"@type":"Review","author":{"@type":"Person","name":"Fabio Batista dos Santos","jobTitle":"Independent Media Production Professional","url":"https://br.linkedin.com/in/fabio-batista-dos-santos-14996b35"},"reviewRating":{"@type":"Rating","ratingValue":5},"reviewBody":"A powerful react overview. ","datePublished":"2024-09-26T23:20:35.699Z","publisher":{"@type":"Organization","name":"LinkedIn"},"bestRating":5,"worstRating":1}],"video":{"@type":"VideoObject","name":"Take your React skills to the next level - React: Design Patterns","author":{"@type":"Person","name":"Shaun Wassell","description":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","jobTitle":"Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning","url":"https://www.linkedin.com/in/shaun-wassell","image":"https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I","description":"Don’t waste time reinventing the wheel. Learn great ways to handle common situations from a React developer.","duration":"PT40S","datePublished":"2021-09-27","uploadDate":"2021-09-27","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/react-design-patterns/take-your-react-skills-to-the-next-level"},"educationalLevel":"Advanced","educationalCredentialAwarded":[{"@type":"EducationalOccupationalCredential","name":"LinkedIn Learning Certificate of Completion","url":"https://www.linkedin.com/help/learning/answer/a598944/learning-certificates-of-completion-faqs","credentialCategory":"Certificate","offers":[{"@type":"Offer","category":"Subscription"}]}]} </script>  </head> <body dir="ltr">   <a href="#main-content" class="skip-link btn-md btn-primary absolute z-11 -top-[100vh] focus:top-0"> Skip to main content </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="Primary"> <a href="https://www.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">  Search skills, subjects, or software  </div> <span class="sr-only">Expand search</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">This button displays the currently selected search type. When expanded it provides a list of search options that will switch the search inputs to match the current selection. </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"> People </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="Close" 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="First Name" 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="First Name" 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">Clear text</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="Last Name" 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="Last Name" 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">Clear text</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="Search" 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"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></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="Search job titles or companies" 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="Search job titles or companies" 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">Clear text</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"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></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="Location" 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="Location" role="combobox" value="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">Clear text</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="Search" 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="Search skills, subjects, or 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="Search skills, subjects, or 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">Clear text</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="Search" 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://www.linkedin.com/learning/subscription/products?courseSlug=react-design-patterns&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-design-patterns&trk=learning-course_nav-header-join&upsellTrk=lil_upsell_nav_subscription&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Freact-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card" 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> Start free trial </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-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card%26trk%3Dlearning-topics_trending-courses_related-content-card&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Freact-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card&trk=learning-course_nav-header-signin" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate> Sign in </a> <a aria-label="Sign in" 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-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card%26trk%3Dlearning-topics_trending-courses_related-content-card&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Freact-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card&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"> Solutions for: </p> <a href="https://learning.linkedin.com/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">Business</a> <a href="https://learning.linkedin.com/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">Higher Education</a> <a href="https://learning.linkedin.com/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">Government</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">Buy for my team</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]"> <ol class="breadcrumb__list"> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/browse?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>All topics</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/technology?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Technology</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/software-development?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Software Development</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/software-design?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Software Design</a> </li> </ol> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"All topics","item":"https://www.linkedin.com/learning/browse"},{"@type":"ListItem","position":2,"name":"Technology","item":"https://www.linkedin.com/learning/topics/technology"},{"@type":"ListItem","position":3,"name":"Software Development","item":"https://www.linkedin.com/learning/topics/software-development"},{"@type":"ListItem","position":4,"name":"Software Design","item":"https://www.linkedin.com/learning/topics/software-design"}]} </script> <section class="top-card-layout container-lined overflow-hidden babybear:rounded-[0px]"> <section class="top-card__image-container"> <img class="top-card__image" alt="React: Design Patterns" data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQEx3FC5_xihfA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1632416410836?e=2147483647&v=beta&t=-M0J374aU7hd1Sb1gfS_XVcAFsfWbxFac68TEmW9o9I"> <a class="top-card__overlay-button" data-tracking-control-name="course_preview" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/take-your-react-skills-to-the-next-level?autoplay=true&trk=course_preview"> <span class="top-card__preview-cta "> <icon class="top-card__preview-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l"> </icon> <span class="top-card__preview-cta-text">Preview</span> </span>  </a> </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"> React: Design Patterns </h1> <h2 class="top-card-layout__headline break-words font-sans text-md leading-open text-color-text"> <div class="top-card__headline-row"> <span class="top-card__headline-row-item top-card__headline-row-item--large">With Shaun Wassell</span> <span class="top-card__headline-row-item">Liked by 12,739 users</span> </div> <div class="top-card__headline-row"> <span class="top-card__headline-row-item">Duration: 3h 19m</span> <span class="top-card__headline-row-item">Skill level: Advanced</span> <span class="top-card__headline-row-item">Released: 9/27/2021</span> </div> </h2>   <div class="top-card-layout__cta-container flex flex-wrap mt-0.5 papabear:mt-0 ml-[-12px]"> <a href="http://www.linkedin.com/learning/subscription/products?courseSlug=react-design-patterns&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-design-patterns&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> Start my 1-month free trial </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> Buy for my team </a> </div> </div>  </div>   </div> </section> <div class="details mx-details-container-padding"> <section class="core-section-container my-3 course-details">  <h2 class="core-section-container__title section-title"> Course details </h2>  <div class="core-section-container__content break-words"> <section class="show-more-less-html course-details__description" data-max-lines="4"> <div class="show-more-less-html__markup show-more-less-html__markup--clamp-after-4 relative overflow-hidden"> If you’ve learned the basics of React and have worked on many React applications, chances are you’ve run into some recurring problems and situations, like creating reusable layouts or working with forms. If you’ve been on the hunt for solutions to common problems, look no further than this course with Shaun Wassell, where he covers many of the most useful design patterns—effective and repeatable solutions to common application development challenges. This course consists of several sections, each of which will cover a group of React design patterns, ranging from preferred syntax for specific tasks to how to arrange components in the most effective way. Among the topics Shaun covers are composition, higher-order components, state hoisting, controlled vs. uncontrolled components, and many other patterns that help a React app develop into a well-organized codebase. </div> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--more ml-0.5" data-tracking-control-name="learning-course_show-more-html-btn" aria-label="i18n_show_more" aria-expanded="false">  Show more <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--less ml-0.5" data-tracking-control-name="learning-course_show-less-html-btn" aria-label="i18n_show_less" aria-expanded="true">  Show less <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button>  </section> </div> </section> <section class="core-section-container my-3 course-skills">  <h2 class="core-section-container__title section-title"> Skills you’ll gain </h2>  <div class="core-section-container__content break-words"> <ul class="course-skills__skill-list"> <li class="course-skills__skill-list-item"> <a href="https://www.linkedin.com/learning/topics/react-js?trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> React.js </a> </li> <li class="course-skills__skill-list-item"> <a href="https://www.linkedin.com/learning/search?keywords=Software+Design+Patterns&trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> Software Design Patterns </a> </li> </ul> </div> </section> <section class="core-section-container my-3">  <h2 class="core-section-container__title section-title"> Earn a sharable certificate </h2>  <div class="core-section-container__content break-words"> <p class="course-certificate__body-paragraph">Share what you’ve learned, and be a standout professional in your desired industry with a certificate showcasing your knowledge gained from the course.</p> <div class="course-certificate__image-container"> <img class="course-certificate__certificate-image" alt="Sample certificate" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/52nu8qc7cfcn7vrftr7ttceqt"> <div> <h3 class="course-certificate__detail-list-heading"> <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 learning-logo__text--show-on-mobile" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> <span>Certificate of Completion</span> </h3> <ul> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Showcase on your LinkedIn profile under “Licenses and Certificate” section</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Download or print out as PDF to share with others</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Share as image online to demonstrate your skill</p> </li> </ul> </div> </div> </div> </section> <section class="core-section-container my-3 course-instructors">  <h2 class="core-section-container__title section-title"> Meet the instructor </h2>  <div class="core-section-container__content break-words"> <ul class="course-instructors__list"> <li class="course-instructors__list-item"> <a href="https://www.linkedin.com/in/shaun-wassell?trk=learning-course_instructor" target="_self" data-tracking-control-name="learning-course_instructor" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link">  <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/C4D03AQHKCUJr7e_ggg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1607010445227?e=2147483647&v=beta&t=Jhbv4vPCirDussned5-24l5x69iSOhpApiia9EwXwoU" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Click here to view Shaun Wassell’s instructor page"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full"> <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Shaun Wassell </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden"> Full-Stack Development Instructor (React, Node.js, etc.) at LinkedIn Learning </h4>   </div>  </a> </li> </ul> </div> </section> <section class="core-section-container my-3 reviews-feed">  <h2 class="core-section-container__title section-title"> Learner reviews </h2>  <div class="core-section-container__content break-words"> <div class="reviews-feed__ratings-summary"> <section class="ratings-summary"> <div class="ratings-summary__overall-rating"> <h3 class="ratings-summary__header"><span class="ratings-summary__rating-average">4.7</span> <span class="ratings-summary__rating-max">out of 5</span></h3> <figure class="ratings-summary__figure"> <span class="star-rating" role="img" aria-label="Rating: 4.7 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/7dacecy4xq1otzk8pae2g0hxd"></icon> </span> </span> <figcaption class="ratings-summary__ratings-total">1,920 ratings</figcaption> </figure> </div> <div class="ratings-summary__breakdown"> <div class="ratings-summary__disclaimer"> <div class="tooltip"> <button class="tooltip__trigger ratings-summary__disclaimer-trigger" data-tracking-control-name="toggle_disclaimer" type="button"> <icon class="ratings-summary__disclaimer-icon" data-svg-class-name="ratings-summary__disclaimer-icon-svg" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/g8uts9v3k83n9e3iyvcxit0k"> </icon> <span class="ratings-summary__disclaimer-text">How are ratings calculated?</span> </button> <span role="tooltip" class="tooltip__popup" aria-hidden="true"> The overall rating is calculated using the average of submitted ratings. Ratings and reviews can only be submitted when non-anonymous learners complete at least 40% of the course. This helps us avoid fake reviews and spam. </span> </div> </div> <ul> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 5 star </figcaption> <progress class="ratings-summary__progress-bar" max="1920" value="1518" aria-valuemin="0" aria-valuenow="1518" aria-valuemax="1920"> Current value: 1,518 </progress> <span class="ratings-summary__rating-count-percent"> 79% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 4 star </figcaption> <progress class="ratings-summary__progress-bar" max="1920" value="305" aria-valuemin="0" aria-valuenow="305" aria-valuemax="1920"> Current value: 305 </progress> <span class="ratings-summary__rating-count-percent"> 16% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 3 star </figcaption> <progress class="ratings-summary__progress-bar" max="1920" value="71" aria-valuemin="0" aria-valuenow="71" aria-valuemax="1920"> Current value: 71 </progress> <span class="ratings-summary__rating-count-percent"> 4% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 2 star </figcaption> <progress class="ratings-summary__progress-bar" max="1920" value="17" aria-valuemin="0" aria-valuenow="17" aria-valuemax="1920"> Current value: 17 </progress> <span class="ratings-summary__rating-count-percent"> <1% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 1 star </figcaption> <progress class="ratings-summary__progress-bar" max="1920" value="9" aria-valuemin="0" aria-valuenow="9" aria-valuemax="1920"> Current value: 9 </progress> <span class="ratings-summary__rating-count-percent"> <1% </span> </figure> </li> </ul> </div> </section> </div> <ul class="reviews-feed__reviews-list"> <li class="reviews-feed__reviews-list-item"> <div class="review-card"> <div class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link review-card__entity"> <a class="base-card__full-link absolute top-0 right-0 bottom-0 left-0 p-0 z-[2]" href="https://ae.linkedin.com/in/rayan-hnide-02b4a8307?trk=learning-course" data-tracking-control-name="learning-course" data-tracking-will-navigate> <span class="sr-only"> Rayan Hnide  </span> </a> <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/D4E03AQFBdIVkGrpJXw/profile-displayphoto-shrink_100_100/profile-displayphoto-shrink_100_100/0/1714903279946?e=2147483647&v=beta&t=ZgPFN4O2i5kvSvX0f3foIFxaP7H0hY5eTLPKIkyuSVI" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Rayan Hnide"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full"> <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Rayan Hnide  </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden"> Front-End Engineer | React.js, React Native, TypeScript,Node.js,Tailwind , GSAP ,Three.js , Shadcn , GitHub,firebase, Figma, and Next.js… </h4>  <div class="body-text text-color-text-low-emphasis base-main-card__metadata"> <div class="review-card__content"> <div class="review-card__centered-row"> <div class="review-card__star-container"> <span class="star-rating" role="img" aria-label="Rating: 5 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> </div> <span class="review-card__rating"> 5/5 </span> <span class="review-card__date"> October 20, 2024 </span> </div> <div class="review-card__text"> amazing </div> <div class="review-card__centered-row review-card__actions"> <a class="review-card__centered-row review-card__action-button" aria-label="Rayan Hnide’s comment is helpful" data-tracking-control-name="learning-course_review-card-helpful-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card%26trk%3Dlearning-topics_trending-courses_related-content-card&trk=learning-course_review-card-helpful-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5ptx189gjbxrh9wf3ncsehms9" data-svg-class-name="review-card__like-icon"></icon> Helpful </a> <span class="review-card__dot-delimiter">·</span> <a class="review-card__centered-row review-card__action-button" aria-label="Report Rayan Hnide’s comment" data-tracking-control-name="learning-course_review-card-report-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card%26trk%3Dlearning-topics_trending-courses_related-content-card&trk=learning-course_review-card-report-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/d04ze1wt0ev8ck8e4ovqk762o" data-svg-class-name="review-card__flag-icon"></icon> Report </a> </div> </div> </div> </div>  </div> </div> </li> <li class="reviews-feed__reviews-list-item"> <div class="review-card"> <div class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link review-card__entity"> <a class="base-card__full-link absolute top-0 right-0 bottom-0 left-0 p-0 z-[2]" href="https://am.linkedin.com/in/haigaz-soghomonian?trk=learning-course" data-tracking-control-name="learning-course" data-tracking-will-navigate> <span class="sr-only"> Haigaz Soghomonian  </span> </a> <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/C4E03AQFRrypH3tfGhw/profile-displayphoto-shrink_100_100/profile-displayphoto-shrink_100_100/0/1626382018088?e=2147483647&v=beta&t=Qqb3lPLj24pq4ULHHu8jgUfK2RviY32yZI8pzQRLkd8" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Haigaz Soghomonian"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full"> <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Haigaz Soghomonian  </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden"> Software Developer | Node.js, JavaScript, React.js </h4>  <div class="body-text text-color-text-low-emphasis base-main-card__metadata"> <div class="review-card__content"> <div class="review-card__centered-row"> <div class="review-card__star-container"> <span class="star-rating" role="img" aria-label="Rating: 5 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> </div> <span class="review-card__rating"> 5/5 </span> <span class="review-card__date"> October 14, 2024 </span> </div> <div class="review-card__text"> Excellent course! I highly recommend it to anyone looking to enhance their React.js skills and deepen their understanding. </div> <div class="review-card__centered-row review-card__actions"> <a class="review-card__centered-row review-card__action-button" aria-label="Haigaz Soghomonian’s comment is helpful" data-tracking-control-name="learning-course_review-card-helpful-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card%26trk%3Dlearning-topics_trending-courses_related-content-card&trk=learning-course_review-card-helpful-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5ptx189gjbxrh9wf3ncsehms9" data-svg-class-name="review-card__like-icon"></icon> Helpful </a> <span class="review-card__dot-delimiter">·</span> <a class="review-card__centered-row review-card__action-button" aria-label="Report Haigaz Soghomonian’s comment" data-tracking-control-name="learning-course_review-card-report-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card%26trk%3Dlearning-topics_trending-courses_related-content-card&trk=learning-course_review-card-report-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/d04ze1wt0ev8ck8e4ovqk762o" data-svg-class-name="review-card__flag-icon"></icon> Report </a> </div> </div> </div> </div>  </div> </div> </li> <li class="reviews-feed__reviews-list-item"> <div class="review-card"> <div class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link review-card__entity"> <a class="base-card__full-link absolute top-0 right-0 bottom-0 left-0 p-0 z-[2]" href="https://br.linkedin.com/in/fabio-batista-dos-santos-14996b35?trk=learning-course" data-tracking-control-name="learning-course" data-tracking-will-navigate> <span class="sr-only"> Fabio Batista dos Santos  </span> </a> <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/C5603AQEdmmL8hvObXQ/profile-displayphoto-shrink_100_100/profile-displayphoto-shrink_100_100/0/1516610740116?e=2147483647&v=beta&t=PEZ_fQOw5VcjEj8Xt9ofjL2O3cog7-F7hNHZ9LsqyF4" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Fabio Batista dos Santos"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full"> <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Fabio Batista dos Santos  </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden"> Independent Media Production Professional </h4>  <div class="body-text text-color-text-low-emphasis base-main-card__metadata"> <div class="review-card__content"> <div class="review-card__centered-row"> <div class="review-card__star-container"> <span class="star-rating" role="img" aria-label="Rating: 5 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> </div> <span class="review-card__rating"> 5/5 </span> <span class="review-card__date"> September 26, 2024 </span> </div> <div class="review-card__text"> A powerful react overview. </div> <div class="review-card__centered-row review-card__actions"> <a class="review-card__centered-row review-card__action-button" aria-label="Fabio Batista dos Santos’ comment is helpful" data-tracking-control-name="learning-course_review-card-helpful-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card%26trk%3Dlearning-topics_trending-courses_related-content-card&trk=learning-course_review-card-helpful-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5ptx189gjbxrh9wf3ncsehms9" data-svg-class-name="review-card__like-icon"></icon> Helpful </a> <span class="review-card__dot-delimiter">·</span> <a class="review-card__centered-row review-card__action-button" aria-label="Report Fabio Batista dos Santos’ comment" data-tracking-control-name="learning-course_review-card-report-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Freact-design-patterns%3Ftrk%3Dlearning-topics_trending-courses_related-content-card%26trk%3Dlearning-topics_trending-courses_related-content-card&trk=learning-course_review-card-report-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/d04ze1wt0ev8ck8e4ovqk762o" data-svg-class-name="review-card__flag-icon"></icon> Report </a> </div> </div> </div> </div>  </div> </div> </li> </ul> </div> </section> </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 table-of-contents--with-max-height"> <h2 class="table-of-contents__header"> Contents </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"> Introduction <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"> Introduction <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://www.linkedin.com/learning/react-design-patterns/take-your-react-skills-to-the-next-level?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"> Take your React skills to the next level </div> <div class="table-of-contents__item-duration"> 40s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/what-you-should-know?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"> What you should know </div> <div class="table-of-contents__item-duration"> 52s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/what-are-design-patterns?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"> What are design patterns? </div> <div class="table-of-contents__item-duration"> 2m 28s </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. Layout 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"> 1. Layout 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://www.linkedin.com/learning/react-design-patterns/what-are-layout-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"> What are layout components? </div> <div class="table-of-contents__item-duration"> 1m 55s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/split-screen-components?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Split-screen components </div> <div class="table-of-contents__item-duration"> 7m 27s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/split-screen-component-improvements?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Split-screen component improvements </div> <div class="table-of-contents__item-duration"> 6m 10s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/lists-and-list-items?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Lists and list items </div> <div class="table-of-contents__item-duration"> 10m 44s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/creating-different-list-types?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Creating different list types </div> <div class="table-of-contents__item-duration"> 6m 26s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/modal-components?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Modal components </div> <div class="table-of-contents__item-duration"> 7m 46s </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. Container 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"> 2. Container 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://www.linkedin.com/learning/react-design-patterns/what-are-container-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"> What are container components? </div> <div class="table-of-contents__item-duration"> 1m 41s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/server-instructions?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Server instructions </div> <div class="table-of-contents__item-duration"> 3m 26s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/currentuserloader-component?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> CurrentUserLoader component </div> <div class="table-of-contents__item-duration"> 7m 43s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/userloader-component?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> UserLoader component </div> <div class="table-of-contents__item-duration"> 5m 34s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/resourceloader-component?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> ResourceLoader component </div> <div class="table-of-contents__item-duration"> 5m 50s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/datasource-component?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> DataSource component </div> <div class="table-of-contents__item-duration"> 5m 13s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/loading-data-from-localstorage?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Loading data from localStorage </div> <div class="table-of-contents__item-duration"> 2m 33s </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. Controlled and Uncontrolled 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"> 3. Controlled and Uncontrolled 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://www.linkedin.com/learning/react-design-patterns/controlled-vs-uncontrolled-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"> Controlled vs. uncontrolled components </div> <div class="table-of-contents__item-duration"> 2m 39s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/uncontrolled-forms?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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 </div> <div class="table-of-contents__item-duration"> 6m </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/controlled-forms?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> 8m 23s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/controlled-modals?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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 modals </div> <div class="table-of-contents__item-duration"> 7m 46s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/uncontrolled-onboarding-flows?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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 onboarding flows </div> <div class="table-of-contents__item-duration"> 8m 38s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/collecting-onboarding-data?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Collecting onboarding data </div> <div class="table-of-contents__item-duration"> 4m 57s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/controlled-onboarding-flows?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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 onboarding flows </div> <div class="table-of-contents__item-duration"> 6m 25s </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. Higher-Order 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. Higher-Order 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://www.linkedin.com/learning/react-design-patterns/what-are-higher-order-components?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> What are higher-order components? </div> <div class="table-of-contents__item-duration"> 1m 52s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/printing-props-with-hocs?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Printing props with HOCs </div> <div class="table-of-contents__item-duration"> 5m 29s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/loading-data-with-hocs?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Loading data with HOCs </div> <div class="table-of-contents__item-duration"> 4m 35s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/modifying-data-with-hocs?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Modifying data with HOCs </div> <div class="table-of-contents__item-duration"> 8m 22s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/creating-forms-with-hocs?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Creating forms with HOCs </div> <div class="table-of-contents__item-duration"> 7m 27s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/higher-order-component-improvements?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Higher-order component improvements </div> <div class="table-of-contents__item-duration"> 9m 15s </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. Custom Hooks Patterns <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. Custom Hooks Patterns <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://www.linkedin.com/learning/react-design-patterns/what-are-custom-hooks?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> What are custom Hooks? </div> <div class="table-of-contents__item-duration"> 1m 51s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/usecurrentuser-hook?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> useCurrentUser Hook </div> <div class="table-of-contents__item-duration"> 5m 13s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/useuser-hook?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> useUser Hook </div> <div class="table-of-contents__item-duration"> 3m 16s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/useresource-hook?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> useResource Hook </div> <div class="table-of-contents__item-duration"> 4m 36s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/usedatasource-hook?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> useDataSource Hook </div> <div class="table-of-contents__item-duration"> 6m 29s </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. Functional Programming and 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"> 6. Functional Programming and 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://www.linkedin.com/learning/react-design-patterns/what-is-functional-programming?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> What is functional programming? </div> <div class="table-of-contents__item-duration"> 3m 28s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/recursive-components?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Recursive components </div> <div class="table-of-contents__item-duration"> 6m 23s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/component-composition?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Component composition </div> <div class="table-of-contents__item-duration"> 5m 7s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/react-design-patterns/partially-applied-components?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Partially applied components </div> <div class="table-of-contents__item-duration"> 3m 37s </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"> Conclusion <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"> Conclusion <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://www.linkedin.com/learning/react-design-patterns/next-steps?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</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"> Next steps </div> <div class="table-of-contents__item-duration"> 1m 28s </div> </div> </a> </li> </ul>  </div> </li> </ul> </section> <section class="aside-section-container mb-4 subscription-value-props-aside-section"> <h2 class="aside-section-container__title section-title"> What’s included </h2>  <div class="aside-section-container__content break-words"> <ul>  <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Test your knowledge</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">6 quizzes</span> </li> <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Learn on the go</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">Access on tablet and phone</span> </li>  </ul> </div> </section> <section class="aside-section-container mb-4 similar-courses-aside-section"> <h2 class="aside-section-container__title section-title"> Similar courses </h2>  <div class="aside-section-container__content break-words"> <ul> <li>  <a href="https://www.linkedin.com/learning/react-server-side-rendering-8539269?trk=learning-course_similar-courses" target="_self" data-tracking-control-name="learning-course_similar-courses" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-aside-card flex my-1.5 hover:show-play-button focus:show-play-button base-aside-card--link aside-learning-course-card">  <div class="base-aside-card__media flex-shrink-0 mr-0.5 overflow-hidden relative h-[54px] w-[95px] "> <img class="base-aside-card__media-element w-[100px] h-full object-cover" alt data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQGLmMPM0FdTeA/learning-public-crop_144_256/learning-public-crop_144_256/0/1617047890732?e=2147483647&v=beta&t=CsEXGa8H_UGaNWNu9yMgOSJ0h_74wegyONR_GRgOuNg"> <div class="aside-learning-course-card__duration duration">1h 13m</div> <icon class="base-aside-card__play-button w-auto play-button overlay-center" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9n9raq7fmdu241tpsxwodsmcd" data-svg-class-name="base-aside-card__play-button-svg"></icon> </div> <div class="base-aside-card__info self-center pl-0.5 flex flex-col flex-1"> <h3 class="base-aside-card__title font-sans text-md font-bold text-color-text relative"> React: Server-Side Rendering  </h3>      </div>  </a> </li> <li>  <a href="https://www.linkedin.com/learning/building-modern-projects-with-react?trk=learning-course_similar-courses" target="_self" data-tracking-control-name="learning-course_similar-courses" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-aside-card flex my-1.5 hover:show-play-button focus:show-play-button base-aside-card--link aside-learning-course-card">  <div class="base-aside-card__media flex-shrink-0 mr-0.5 overflow-hidden relative h-[54px] w-[95px] "> <img class="base-aside-card__media-element w-[100px] h-full object-cover" alt data-delayed-url="https://media.licdn.com/dms/image/v2/C560DAQGtDtt-UeKtEg/learning-public-crop_144_256/learning-public-crop_144_256/0/1584556957742?e=2147483647&v=beta&t=cVEaBarWhqz_r-LBu8vfeSC8O_GvKOPB164-Wf-TBbU"> <div class="aside-learning-course-card__duration duration">3h 41m</div> <icon class="base-aside-card__play-button w-auto play-button overlay-center" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9n9raq7fmdu241tpsxwodsmcd" data-svg-class-name="base-aside-card__play-button-svg"></icon> </div> <div class="base-aside-card__info self-center pl-0.5 flex flex-col flex-1"> <h3 class="base-aside-card__title font-sans text-md font-bold text-color-text relative"> Building Modern Projects with React  </h3>      </div>  </a> </li> <li>  <a href="https://www.linkedin.com/learning/react-testing-and-debugging?trk=learning-course_similar-courses" target="_self" data-tracking-control-name="learning-course_similar-courses" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-aside-card flex my-1.5 hover:show-play-button focus:show-play-button base-aside-card--link aside-learning-course-card">  <div class="base-aside-card__media flex-shrink-0 mr-0.5 overflow-hidden relative h-[54px] w-[95px] "> <img class="base-aside-card__media-element w-[100px] h-full object-cover" alt data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQHGC6IF5fZUPQ/learning-public-crop_144_256/learning-public-crop_144_256/0/1601825921505?e=2147483647&v=beta&t=TjGQKRv3gunHXSUIoXRScFpBBLrbcJE9QIFekzCMo2E"> <div class="aside-learning-course-card__duration duration">1h 19m</div> <icon class="base-aside-card__play-button w-auto play-button overlay-center" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9n9raq7fmdu241tpsxwodsmcd" data-svg-class-name="base-aside-card__play-button-svg"></icon> </div> <div class="base-aside-card__info self-center pl-0.5 flex flex-col flex-1"> <h3 class="base-aside-card__title font-sans text-md font-bold text-color-text relative"> React: Testing and Debugging  </h3>      </div>  </a> </li> </ul> </div> </section> <section class="aside-section-container mb-4"> <h2 class="aside-section-container__title section-title"> Download courses </h2>  <div class="aside-section-container__content break-words"> <p>Use your iOS or Android LinkedIn Learning app, and watch courses on your mobile device without an internet connection.</p> <div class="app-links-aside-section__link-container"> <a class="app-links-aside-section__link" href="https://itunes.apple.com/app/apple-store/id1084807225?ls=1&pt=10746&mt=8&ct=learning_course_app_links&trk=learning-course_apple-app-store" data-tracking-control-name="learning-course_apple-app-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Download on the App Store" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/emczv26hz24woii2j4aleyry" height="42px" width="142px"> </a> <a class="app-links-aside-section__link" href="https://play.google.com/store/apps/details?id=com.linkedin.android.learning&referrer=utm_source%3Dlinkedinlearning%26utm_medium%3DmobileWeb%26utm_campaign%3Dlearning_guest&ct=learning_course_app_links&trk=learning-course_google-play-store" data-tracking-control-name="learning-course_google-play-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Get it on Google Play" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/535kqf5rsexfx0lucb3t6palb" height="42px" width="142px"> </a> </div> </div> </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>Price may change based on profile and billing country information entered during Sign In or Registration </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"> Explore Business Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-analysis-and-strategy?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 Analysis and Strategy </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-software-and-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 and Tools </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/career-development-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Career Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/customer-service-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> Customer Service </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/diversity-equity-and-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, and Inclusion (DEI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/finance-and-accounting?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Finance and Accounting </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/human-resources-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> Human Resources </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/leadership-and-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Leadership and Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/marketing-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> Marketing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/professional-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Professional Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/project-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Project Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/sales-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> Sales </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/small-business-and-entrepreneurship?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Small Business and Entrepreneurship </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/training-and-education?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 and Education </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all business courses" href="https://www.linkedin.com/learning/topics/business?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </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"> Explore Creative Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/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> AEC </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/animation-and-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 and Illustration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/audio-and-music?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 and Music </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/graphic-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Graphic Design </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/motion-graphics-and-vfx?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 Graphics and VFX </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/photography-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> Photography </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/product-and-manufacturing?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Product and Manufacturing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/user-experience?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://www.linkedin.com/learning/topics/2015-54?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://www.linkedin.com/learning/topics/visualization-and-real-time?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Visualization and Real-Time </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Design </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all creative courses" href="https://www.linkedin.com/learning/topics/creative?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </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"> Explore Technology Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/artificial-intelligence?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Artificial Intelligence (AI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/cloud-computing-5?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://www.linkedin.com/learning/topics/security-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> Cybersecurity </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/data-science?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://www.linkedin.com/learning/topics/database-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Database Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/devops?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://www.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://www.linkedin.com/learning/topics/it-help-desk-5?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 Help Desk </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/mobile-development?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 Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/network-and-system-administration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Network and System Administration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/software-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Software Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Development </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all technology courses" href="https://www.linkedin.com/learning/topics/technology?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </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_guest_footer-about" data-tracking-control-name="d_learning_course_guest_footer-about" data-tracking-will-navigate> About </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_guest_footer-accessibility" data-tracking-control-name="d_learning_course_guest_footer-accessibility" data-tracking-will-navigate> Accessibility </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_guest_footer-user-agreement" data-tracking-control-name="d_learning_course_guest_footer-user-agreement" data-tracking-will-navigate> User Agreement </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_guest_footer-privacy-policy" data-tracking-control-name="d_learning_course_guest_footer-privacy-policy" data-tracking-will-navigate> Privacy Policy </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_guest_footer-cookie-policy" data-tracking-control-name="d_learning_course_guest_footer-cookie-policy" data-tracking-will-navigate> Cookie Policy </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_guest_footer-copyright-policy" data-tracking-control-name="d_learning_course_guest_footer-copyright-policy" data-tracking-will-navigate> Copyright Policy </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_guest_footer-brand-policy" data-tracking-control-name="d_learning_course_guest_footer-brand-policy" data-tracking-will-navigate> Brand Policy </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_guest_footer-guest-controls" data-tracking-control-name="d_learning_course_guest_footer-guest-controls" data-tracking-will-navigate> Guest Controls </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_guest_footer-community-guide" data-tracking-control-name="d_learning_course_guest_footer-community-guide" data-tracking-will-navigate> Community Guidelines </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">  <button aria-label="العربية (Arabic)" 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"> العربية (Arabic) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="বাংলা (Bangla)" 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"> বাংলা (Bangla) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Čeština (Czech)" 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 (Czech) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Dansk (Danish)" 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 (Danish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Deutsch (German)" 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-de_DE" data-locale="de_DE" role="menuitem" lang="de_DE"> Deutsch (German) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Ελληνικά (Greek)" 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"> Ελληνικά (Greek) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="English (English) selected" 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-en_US" data-locale="en_US" role="menuitem" lang="en_US"> <strong>English (English)</strong> </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Español (Spanish)" 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 (Spanish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="فارسی (Persian)" 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"> فارسی (Persian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Suomi (Finnish)" 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 (Finnish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Français (French)" 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 (French) </button> </li> <li class="language-selector__item" role="presentation">  <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">  <button aria-label="Magyar (Hungarian)" 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 (Hungarian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Indonesia (Indonesian)" 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 (Indonesian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Italiano (Italian)" 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 (Italian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="עברית (Hebrew)" 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"> עברית (Hebrew) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="日本語 (Japanese)" 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"> 日本語 (Japanese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="한국어 (Korean)" 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"> 한국어 (Korean) </button> </li> <li class="language-selector__item" role="presentation">  <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">  <button aria-label="Bahasa Malaysia (Malay)" 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 (Malay) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Nederlands (Dutch)" 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 (Dutch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Norsk (Norwegian)" 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 (Norwegian) </button> </li> <li class="language-selector__item" role="presentation">  <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">  <button aria-label="Polski (Polish)" 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 (Polish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Português (Portuguese)" 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 (Portuguese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Română (Romanian)" 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ă (Romanian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Русский (Russian)" 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"> Русский (Russian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Svenska (Swedish)" 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 (Swedish) </button> </li> <li class="language-selector__item" role="presentation">  <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">  <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">  <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">  <button aria-label="Türkçe (Turkish)" 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 (Turkish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Українська (Ukrainian)" 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"> Українська (Ukrainian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tiếng Việt (Vietnamese)" 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 (Vietnamese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="简体中文 (Chinese (Simplified))" 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"> 简体中文 (Chinese (Simplified)) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="正體中文 (Chinese (Traditional))" 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"> 正體中文 (Chinese (Traditional)) </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"> Language </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/awgwgu3fg49q0tcvd24ku87qq" 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"></code> <code id="alcOnlyData" style="display: none"></code> </body> </html>

CINXE.COM

React: Design Patterns Online Class | LinkedIn Learning, formerly Lynda.com