CINXE.COM
Tutorial Track for JavaScript Frameworks & Tools | SymfonyCasts
<!DOCTYPE html> <html lang="en" class=" smooth-scroll"> <head prefix="og: http://ogp.me/ns#"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="canonical" href="https://symfonycasts.com/tracks/js-tools"> <title>Tutorial Track for JavaScript Frameworks & Tools | SymfonyCasts</title> <link rel="stylesheet" href="https://symfonycasts.com/build/150.42a35cc8.css" data-turbo-track="reload"><link rel="stylesheet" href="https://symfonycasts.com/build/app.8f31da96.css" data-turbo-track="reload"> <script src="https://symfonycasts.com/build/runtime.f090d72d.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/9755.d820bc59.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/8764.79cb6dbe.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/560.7017a8cd.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4987.fd46174f.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/8981.3dec2d20.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4184.24dfa7a0.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/2624.eedc0a93.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/3734.2c5e1582.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/969.cbfbbb6b.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4079.d25f5551.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/app.a136a02c.js" defer data-turbo-track="reload"></script> <script async defer src="https://sa.symfonycasts.com/latest.js"></script> <link rel="alternate" type="application/rss+xml" title="Blog feed with technical articles around PHP and screencast and tutorial updates from SymfonyCasts.com" href="https://feeds.feedburner.com/knpuniversity" /> <meta name="description" content="PHP and Symfony Tutorial Screencasts - with free videos, scripts, and code downloads!"> <meta property="og:site_name" content="SymfonyCasts - PHP and Symfony Video Tutorial Screencasts"> <meta name="twitter:site" content="@SymfonyCasts"> <link rel="search" type="application/opensearchdescription+xml" href="https://symfonycasts.com/opensearch.xml" title="SymfonyCasts"><link rel="apple-touch-icon" href="https://symfonycasts.com/apple-touch-icon-iphone-60x60.png"> <link rel="apple-touch-icon" sizes="60x60" href="https://symfonycasts.com/apple-touch-icon-ipad-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://symfonycasts.com/apple-touch-icon-iphone-retina-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://symfonycasts.com/apple-touch-icon-ipad-retina-152x152.png"> <meta name="apple-mobile-web-app-title" content="SymfonyCasts"> <link rel="icon" type="image/png" sizes="32x32" href="https://symfonycasts.com/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://symfonycasts.com/favicon-16x16.png"> <link rel="manifest" href="https://symfonycasts.com/site.webmanifest"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> <meta name="turbo-cache-control" content="no-cache"> <meta property="og:image" content="https://symfonycasts.com/build/images/og-sfcasts.89bb7107.png"> </head> <body data-turbo="false" data-user-id="" data-analytics-video-stats-url="/api/analytics/video/duration" class="" data-controller="dark-mode-toggle slu-flash sfcasts-es-flash" data-dark-mode-toggle-url-value="/api/set-dark-mode" data-slu-flash-contact-url-value="/contact" data-dark-mode-toggle-target="body" > <a class="d-block p-3 justify-content-center" href="/stop-war" style="text-decoration: none; background-color: black;"> <div style="display: table; margin: 0 auto;"> <div style="display: table-cell; vertical-align: middle; text-align: right;"> <img style="vertical-align: middle" class="_d-inline" width="75" height="50" src="https://symfonycasts.com/build/images/Flag_of_Ukraine.7f0da5d8.png" alt="Flag of Ukraine"> </div> <div style="display: table-cell; vertical-align: middle; text-align: left;"> <div class="ml-3" style="color: white; font-size: 1.3rem;">SymfonyCasts stands united with the people of Ukraine</div> </div> </div> </a> <!-- Start Main Navigation --> <nav class="navbar nav-sfcasts navbar-expand-lg "> <a class="navbar-brand" href="/"> <span class="sfcasts-logo d-block" alt="SymfonyCasts Logo"></span> </a> <form id="js-search-form" class="form-inline nav-search-form ml-3" autocomplete="off" role="search" method="GET" action="/search"> <input id="js-search-input" data-global-search-target="input" data-action="keydown->global-search#moveWithKeys keypress->global-search#updateInput input->global-search#updateInput focusin->global-search#expandSearch blur->global-search#hideSearch" value="" name="q" type="text" class="form-control" placeholder="Search Tutorials" style="font-family:Montserrat, FontAwesome" spellcheck="false" aria-label="search" > <button type="submit"> <i class="fal fa-search"></i> </button> </form> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavToggler" aria-controls="mainNavToggler" aria-expanded="false" aria-label="Toggle navigation"> <svg class="toggler-nav" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg> </button> <div class="collapse navbar-collapse justify-content-end drop-down-spacing" id="mainNavToggler"> <ul class="navbar-nav font-weight-bold" > <li> <a href="#" class="nav-link mt-3 mr-4" data-action="click->dark-mode-toggle#toggle" ><i class="fa fa-adjust"></i></a> </li> <li id="test-nav-updates"> <a class="nav-link nav-bell mt-3 mr-4" href="/updates" > <i class="fa fa-bell"></i> <div class="alert-circle"></div> </a> </li> <li><a class="nav-link mt-3 mr-4" href="/courses">Tutorials</a></li> <li><a class="nav-link mt-3 mr-4" href="/pricing">Pricing</a></li> <li><a class="nav-link text-primary mt-3 mr-4 text-nowrap" href="/login">Log In</a></li> <li><a class="btn btn-xs btn-primary nav-btn text-nowrap mt-1" href="/signup">Sign Up</a></li> </ul> </div> </nav> <!-- End Main Navigation --> <div class="shield-hero"> <p class="mb-1">Track</p> <h1>Learn JS Frameworks & Tools</h1> <p>----</p> <p class="px-3">Stimulus, React, Vue & other fun tools!</p> </div> <div class="container-lg px-3"> <div class="row"> <div class="col-12"> <h3 class="font-purple">Courses in this Track</h3> </div> </div> <div class="row"> <div class="col-md col-xs-12"> <div id="build-systems" class="track-group-wrapper test-track-group-wrapper"> <h4 class="header-uppercase pt-5" style="letter-spacing: 1.03px;"> <a href="#build-systems" title="Permalink to this headline"> Build Systems </a> <hr> </h4> <div class="course-list-item py-4"> <div class="row"> <div class="col-5"> <a href="/screencast/asset-mapper"> <img class="course-list-item-img macro-course-list-item-img" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/asset-mapper/asset-mapper-943.png" alt="AssetMapper: Modern JS with Zero Build System"> <div class="course-label"> </div> </a> <div class="d-flex justify-content-between pt-3"> <p class="course-length mb-0"><i class="fa fa-clock font-blue-light"></i> 2:07:02</p> </div> </div> <div class="col"> <span class="font-gray"><small>23 videos</small></span> <a class="course-list-item-title" href="/screencast/asset-mapper"> <p>AssetMapper: Modern JS with Zero Build System</p> </a> <small><a class="font-blue" href="/login">Login</a> or <a class="font-blue" href="/signup">register</a> to track your progress!</small> </div> </div> </div> <div class="course-list-item py-4"> <div class="row"> <div class="col-5"> <a href="/screencast/webpack-encore"> <img class="course-list-item-img macro-course-list-item-img" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/webpack-encore/webpack-encore-934.png" alt="Webpack Encore: Frontend like a Pro!"> <div class="course-label"> <div class="course-label-caution p-1">Free</div> </div> </a> <div class="d-flex justify-content-between pt-3"> <p class="course-length mb-0"><i class="fa fa-clock font-blue-light"></i> 2:10:39</p> </div> </div> <div class="col"> <span class="font-gray"><small>21 videos</small></span> <a class="course-list-item-title" href="/screencast/webpack-encore"> <p>Webpack Encore: Frontend like a Pro!</p> </a> <small><a class="font-blue" href="/login">Login</a> or <a class="font-blue" href="/signup">register</a> to track your progress!</small> </div> </div> </div> </div> <div id="symfony-ux-stimulus-turbo" class="track-group-wrapper test-track-group-wrapper"> <h4 class="header-uppercase pt-5" style="letter-spacing: 1.03px;"> <a href="#symfony-ux-stimulus-turbo" title="Permalink to this headline"> Symfony UX, Stimulus & Turbo </a> <hr> </h4> <div class="course-list-item py-4"> <div class="row"> <div class="col-5"> <a href="/screencast/stimulus"> <img class="course-list-item-img macro-course-list-item-img" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/stimulus/stimulus-485.png" alt="Symfony UX: Stimulus"> <div class="course-label"> </div> </a> <div class="d-flex justify-content-between pt-3"> <p class="course-length mb-0"><i class="fa fa-clock font-blue-light"></i> 4:55:39</p> </div> </div> <div class="col"> <span class="font-gray"><small>46 videos</small></span> <a class="course-list-item-title" href="/screencast/stimulus"> <p>Symfony UX: Stimulus</p> </a> <small><a class="font-blue" href="/login">Login</a> or <a class="font-blue" href="/signup">register</a> to track your progress!</small> </div> </div> </div> <div class="course-list-item py-4"> <div class="row"> <div class="col-5"> <a href="/screencast/turbo"> <img class="course-list-item-img macro-course-list-item-img" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/turbo/turbo-312.png" alt="Symfony UX: Turbo"> <div class="course-label"> </div> </a> <div class="d-flex justify-content-between pt-3"> <p class="course-length mb-0"><i class="fa fa-clock font-blue-light"></i> 6:19:46</p> </div> </div> <div class="col"> <span class="font-gray"><small>57 videos</small></span> <a class="course-list-item-title" href="/screencast/turbo"> <p>Symfony UX: Turbo</p> </a> <small><a class="font-blue" href="/login">Login</a> or <a class="font-blue" href="/signup">register</a> to track your progress!</small> </div> </div> </div> </div> <div id="vue" class="track-group-wrapper test-track-group-wrapper"> <h4 class="header-uppercase pt-5" style="letter-spacing: 1.03px;"> <a href="#vue" title="Permalink to this headline"> Vue </a> <hr> </h4> <div class="course-list-item py-4"> <div class="row"> <div class="col-5"> <a href="/screencast/vue"> <img class="course-list-item-img macro-course-list-item-img" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/vue/vue-194.png" alt="The Delightful World of Vue"> <div class="course-label"> </div> </a> <div class="d-flex justify-content-between pt-3"> <p class="course-length mb-0"><i class="fa fa-clock font-blue-light"></i> 5:05:52</p> </div> </div> <div class="col"> <span class="font-gray"><small>48 videos</small></span> <a class="course-list-item-title" href="/screencast/vue"> <p>The Delightful World of Vue</p> </a> <small><a class="font-blue" href="/login">Login</a> or <a class="font-blue" href="/signup">register</a> to track your progress!</small> </div> </div> </div> <div class="course-list-item py-4"> <div class="row"> <div class="col-5"> <a href="/screencast/vue2"> <img class="course-list-item-img macro-course-list-item-img" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/vue2/vue2-902.png" alt="The Delightful World of Vue Part 2"> <div class="course-label"> </div> </a> <div class="d-flex justify-content-between pt-3"> <p class="course-length mb-0"><i class="fa fa-clock font-blue-light"></i> 4:19:56</p> </div> </div> <div class="col"> <span class="font-gray"><small>44 videos</small></span> <a class="course-list-item-title" href="/screencast/vue2"> <p>The Delightful World of Vue Part 2</p> </a> <small><a class="font-blue" href="/login">Login</a> or <a class="font-blue" href="/signup">register</a> to track your progress!</small> </div> </div> </div> </div> <div id="react" class="track-group-wrapper test-track-group-wrapper"> <h4 class="header-uppercase pt-5" style="letter-spacing: 1.03px;"> <a href="#react" title="Permalink to this headline"> React </a> <hr> </h4> <div class="course-list-item py-4"> <div class="row"> <div class="col-5"> <a href="/screencast/reactjs"> <img class="course-list-item-img macro-course-list-item-img" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/reactjs/reactjs-829.png" alt="React with Symfony"> <div class="course-label"> <div class="course-label-archived p-1">Archived</div> </div> </a> <div class="d-flex justify-content-between pt-3"> <p class="course-length mb-0"><i class="fa fa-clock font-blue-light"></i> 5:00:38</p> </div> </div> <div class="col"> <span class="font-gray"><small>43 videos</small></span> <a class="course-list-item-title" href="/screencast/reactjs"> <p>React with Symfony</p> </a> <small><a class="font-blue" href="/login">Login</a> or <a class="font-blue" href="/signup">register</a> to track your progress!</small> </div> </div> </div> </div> </div> <div class="col-lg col-xs-12"> <h3 style="padding-top: 38px;">JavaScript Frameworks & Tools Track Overview</h3> <hr> <p class="font-weight-bold">Prerequisites</p> <div class="text-overview"><p>Understanding of modern JavaScript practices (Webpack, modules, etc) from the <a href="/tracks/javascript">Javascript Fundamentals track</a>.</p> </div> <p class="font-weight-bold">After this track, what will my level be?</p> <div class="text-overview"><p>Hero-level JavaScript developer: capable of building hugely-interactive frontends using multiple tools!</p> </div> <p class="font-weight-bold">Track Summary</p> <div class="text-overview"><p>Already know your <a href="/tracks/javascript">JavaScript Fundamentals</a> and ready to build a rich frontend? Let's do it!</p> <p>This is track is about diving into specific tools - like Stimulus.js, React & Vue - to help you build whatever amazing UI you need.</p> </div> </div> </div> </div> <!-- Start Footer --> <div class="container-fluid container-xl"> <footer class="footer mt-6 p-4"> <div class="row d-flex justify-content-between"> <div class="col-12 col-sm-7 col-md-6 col-lg-4"> <div class="row"> <div class="col"> <ul class="footer-links list-unstyled"> <li><a href="/courses#all">Courses</a></li> <li><a href="/courses#tracks">Tracks</a></li> <li><a href="/pricing">Pricing</a></li> <li><a href="/faq">FAQ</a></li> <li><a href="/gift-card/">Gift Card</a></li> </ul> </div> <div class="col"> <ul class="footer-links list-unstyled"> <li><a href="/about">About</a></li> <li> <a href="/terms">Terms</a> <span>&</span> <a href="/privacy">Privacy</a> </li> <li><a href="/blog">Blog</a></li> <li> <a href="#" data-action="click->dark-mode-toggle#toggle" data-dark-mode-toggle-target="link" > Dark Mode </a> </li> <li><a href="/courses?status=upcoming&sort=popular#all">Roadmap</a></li> </ul> </div> </div> </div> <div class="col-auto pb-2"> <div class="social-icons"> <a class="social-links" href="https://twitter.com/SymfonyCasts"> <i class="fab fa-twitter"></i> </a> <a class="social-links" href="https://github.com/SymfonyCasts"> <i class="fab fa-github"></i> </a> <a class="social-links" href="https://www.facebook.com/SymfonyCasts/"> <i class="fab fa-facebook-f"></i> </a> </div> <a class="btn btn-secondary mt-2 text-nowrap" href="/contact">Contact Us</a> </div> </div> <div class="row"> <div class="col-12 col-sm"> <p class="pt-2">Powered by <span class="font-blue"> <i class="fa fa-shield-alt"></i> Knp</span>University</p> </div> <div class="col-auto"> <p class="pt-2">Hosted with <i class="fa fa-heart" style="color: #b00020;"></i> on <i class="fas fa-cloud"></i> <a href="https://symfony.com/cloud/" class="text-underline">SymfonyCloud</a></p> </div> </div> </footer> </div> <div data-html2canvas-ignore="true" class="uv-icon uv-bottom-right"> <a href="/contact" class="uv-icon-trigger" aria-label="Open Feedback Widget"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="39px" height="39px" viewBox="0 0 39 39" enable-background="new 0 0 39 39" xml:space="preserve"> <g> <path class="uv-bubble-background" fill="rgba(46, 49, 51, 0.6)" d="M31.425,34.514c-0.432-0.944-0.579-2.007-0.591-2.999c4.264-3.133,7.008-7.969,7.008-13.409 C37.842,8.658,29.594,1,19.421,1S1,8.658,1,18.105c0,9.446,7.932,16.79,18.105,16.79c1.845,0,3.94,0.057,5.62-0.412 c0.979,1.023,2.243,2.3,2.915,2.791c3.785,2.759,7.571,0,7.571,0S32.687,37.274,31.425,34.514z" style="fill: rgb(68, 141, 214);"> </path> </g> <g> <g> userVoice <path class="uv-bubble-foreground" fill="#FFFFFF" d="M24.951,9.07c-0.83-0.836-1.857-1.453-2.976-1.786C21.337,7.096,20.672,7,20,7 c-1.87,0-3.628,0.736-4.952,2.07C13.728,10.403,13,11.864,13,13.751l0.03,0.648c0.086,0.972,0.368,1.896,0.834,2.752 c0.776,1.399,2.367,2.849,2.637,4.993l0.163,0.972C16.809,23.703,17.105,24,17.549,24h5.054c0.445,0,0.742-0.297,0.884-0.884 l0.014-0.972c0.268-2.144,1.802-3.593,2.657-4.993c0.443-0.855,0.725-1.779,0.811-2.752L27,13.751 C26.999,11.864,26.271,10.405,24.951,9.07z M17.101,26.554h5.741v-1.66h-5.741V26.554z M18.392,28.668h3.216l0.414-0.83h-4.101 L18.392,28.668z" style="fill: white;"> </path> </g> </g> </svg> </a> </div> <!-- JS --> <script> // TODO: Remove when FeatureNotificationStorage and slu-flash become stimulus controllers window.notificationDismissUrl = '\/feature\u002Dnotification\/\u007Bname\u007D\/dismiss'; </script> </body> </html>