</ iframe ></noscript> <nav class="navbar navbar-expand-lg navbar-dark scrolling-navbar top-nav-collapse " style="background: #010413; z-index: 950"> <div class="container"> <input type="hidden" id="ImageCDN" data-value="https://cdn-images-gf-prod.azureedge.net" /> <input type="hidden" id="Username" data-value="" /> <input type="hidden" id="UserRoleInSelectedCompany" data-value="" /> <input type="hidden" id="ShowSetupCompanyLink4CompanyAdmin" data-value="" /> <input type="hidden" id="SelectedCompanyPackageId" data-value="-1" /> <input type="hidden" id="SelectedCompanyPackageName" data-value="" /> <input type="hidden" id="UpgradeLinkUrl" data-value="" /> <input type="hidden" id="UpgradeLinkTitle" data-value="" /> <input type="hidden" id="ChangeCompanyLink" data-value="" /> <input type="hidden" id="DebugMode" data-value="" /> <input type="hidden" id="ShowSwitchToPreviousUser" data-value="" /> <input type="hidden" id="PreviousUser" data-value="" /> <div class="d-flex innerlayout-searchbutton-width bd-highlight"> <div class="flex-grow-1 pr-2 w-100 bd-highlight"> <app-search></app-search> </div> <style> .Image-icon-xs { height: 40px; width: 40px; } .topdrpheadercolor { background: black; color: white; } .topdrpCard-top { border-top: 4px solid #00b9bd; } .viewcartdrp-menu { left: auto; } .drpMenuLeft { left: auto; right: 0; } .moreLinks .dropdown-toggle::after { display: none; } .moreLinks .dropdown-menu { min-width: 15rem; } .moreLinks small { font-size: 65%; } </style> <div class="navbar-toggler p-0 my-auto"> <a href="/account/login" class="btn btn-sm btn-outline-success p-1" title="Login"> <i class="fa fa-sign-in fa-2x"></i> </a> </div> <div class="navbar-toggler p-0 my-auto"> <a href="/account/register" class="btn btn-sm btn-outline-info p-1" title="Register"> <i class="fa fa-user-plus fa-2x"></i> </a> </div> </div> <div class="bd-highlight collapse navbar-collapse" id="basicExampleNav1"> <style> .Image-icon-xs { height: 40px; width: 40px; } .topdrpheadercolor { background: black; color: white; } .topdrpCard-top { border-top: 4px solid #00b9bd; } .viewcartdrp-menu { left: auto; right: 21%; min-width: 25%; } .cartitemscount { border-radius: 50%; color: #fff; display: inline-block; font-size: 12px; height: 18px; line-height: 16px; padding: 2px; position: relative; text-align: center; float: right; min-width: 20px; background: red; } </style> <ul class="navbar-nav "> <li class="nav-item mr-2"> <a class="nav-link btn btn-sm btn-login" href="/account/login"><b> Login </b></a> </li> <li class="nav-item"> <a class="nav-link btn btn-sm btn-getStarted width-max-content" href="/Account/Register"><b> Get Started </b></a> </li> </ul> </div> </div> </nav> <input type="hidden" id="CourseId" data-value="1727" /> <input type="hidden" id="PreviewType" data-value="" /> <input type="hidden" id="EncyrptedData" data-value="" /> <input type="hidden" id="CUID" data-value="5M5RcpRLHck=" /> <input type="hidden" id="CouponId" data-value="0" /> <div class="stick_fixed_navbar_preview pl-2 py-0" style="z-index:100"> <div class="container py-2 text-white"> <div class="col-md-12"> <div class=""><span class="badge badge-pill badge-course_preview font-weight-normal">Course</span></div> <h5>React.js Essentials - Everything you need to know about the world’s most popular front-end library</h5> </div> </div> </div> <div class="container-fluid p-3 position-relative bg-dark text-white course_preview_bg headercommon" style="z-index:200"> <!--sticky-top--> <div class="container"> <span class="badge badge-pill badge-course_preview p-1"><small class="text-white"> Course </small> </span> <div class="mt-1 mb-0 category_header"> <a class="small categorytree-name" href="/courses/web-design">Web Design</a> <span class="categorytree-name">></span> <a class="small categorytree-name" href="/courses/reactjs">ReactJS</a> </div> <h1>React.js Essentials - Everything you need to know about the world’s most popular front-end library</h1> <div class="row"> <div class="col-md-3"> <div class="card text-white trained_by_with_dates"> <div class="p-1"> <div class="row"> <div class="col-md-12 text-center"> <p class="mb-2 title">Trained by</p> <div> <b class="title_name" *ngIf="_global.Event.TrainingBatchTrainers[0].Profile !=null"> <a class="mr-1" href="/user/{{_global.Event.TrainingBatchTrainers[0].Profile.User.UserName}}"> <img src="https://cdn-images-gf-prod.azureedge.net/assets/user/200_200_dmtp2252DM.png" alt="Shaun Wassell" class="img-responsive img-responsive border rounded-circle" style="height:30px; width: 30px;" /> </a> <span>Shaun Wassell</span> </b> </div> </div> </div> </div> </div> </div> </div> </div> </div> <nav aria-label="breadcrumb" class="commonbreadcrumbnav"> <div class="container"> <ol class="breadcrumb commonbreadcrumb"> <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i> Home</a></li> <li class="breadcrumb-item active" aria-current="page">Course</li> </ol> </div> </nav> <div class="container" id="MainContainer"> <div class="row mb-5"> <div class="col-md-9"> <div class="card border-0 card-shadow-light"> <div class="card-body"> <app-course-introvideo></app-course-introvideo> <div class="row" id="showSticky"> <div class="col-sm-12"> <div class="clearfix space30"></div> <h2 class="mt-1 mb-2">Course Summary</h2> <div class="preview-description text-justify"><p>Knowing React allows developers to create beautiful, performant, easily maintainable websites incredibly quickly. This course will take the learner from beginner to proficient, covering all the important steps in creating a React application. There are many materials out there for learning React, many of them difficult to work through, most of them out of date (React has gone through some pretty major changes recently). There are also notably few sources on React “best practices”, which can lead to some very messy code. This course aims to provide an incremental, step by step process for learning modern React, while making sure the learner is aware of relevant pitfalls and anti-patterns. React is used by many companies these days, primarily because it allows a single React developer to do the work of several “old-style” web developers. There is also currently a shortage of React developers due to very high demand.</p></div> <div class="clearfix space30"></div> <div> <h2 class="mt-1 mb-2">Who can benefit?</h2> <div class="preview-description text-justify"> <ul> <li>The course is for you if...</li> <li>You’re already a front-end developer and want to use React to build performant sites.</li> <li>You’re a software developer with little to no experience in web development and want to jump right into the most advanced technology for doing so.</li> <li>You’ve seen the huge number of React-related job postings and want to advance your career</li> </ul></div> </div> <div> <h2 class="mt-1 mb-2">What you will learn?</h2> <span class="preview-description text-justify"><p>Get hands-on practice building a full-scale React application.</p> <p>See how to bundle and deploy this application so that it can be accessed from anywhere.</p> <p>Learn how to communicate effectively with other React.</p> <p>developers by knowing the fundamental concepts of React Maximize the performance of your website.</p> <p>Learn to recognize good and bad patterns in React code</p></span> </div> <div> <h2 class="mt-1 mb-2">How to get certified?</h2> <div class="preview-description text-justify"><p>Currently, there are no widely-accepted React certification courses, mostly due to the fact that React has changed pretty drastically in the past 2 years</p></div> </div> </div> </div> <app-root> </app-root> </div> </div> </div> <div class="col-md-3 p-1"> <app-course-price-info> </app-course-price-info> </div> </div> </div> <div > <app-course-join></app-course-join> </div> <link rel="stylesheet" href="/css/course-preview-app.css" /> <script src="/js/course-preview-app.js"></script> <!-- Footer --> <footer class="page-footer text-white p-2" style="background: #152F4F;"> <!-- Copyright --> <div class="footer-copyright text-center py-3"> © Copyright 2024 <a href="https://www.guruface.com/"> GuruFace Inc.</a> </div> <!-- Copyright --> </footer> <!-- Footer --> </body> </html>