Blog posts around React.js | TO THE NEW Blog

<!DOCTYPE html>    <html lang="en-US" itemscope itemtype="http://schema.org/Blog" prefix="og: http://ogp.me/ns#">  <head>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N939BGV');</script>  <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11" />  <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/style.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/stylesheet.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/ie.css"> <link rel="stylesheet" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/jquery.mCustomScrollbar.css"> <link href="https://www.tothenew.com/blog/wp-content/themes/ttn/images/favicon.ico" rel="icon" type="image/x-icon"/> <script src="https://assets.adobedtm.com/02384cfb0f99/28701c80a9a8/launch-353f9f5a1184-development.min.js" async></script>  <title>Blog posts around React.js | TO THE NEW Blog</title> <meta name="robots" content="max-image-preview:large" /> <link rel="canonical" href="https://www.tothenew.com/blog/category/react-js/" /> <link rel="next" href="https://www.tothenew.com/blog/category/react-js/page/2/" /> <meta name="generator" content="All in One SEO (AIOSEO) 4.3.7" /> <script type="application/ld+json" class="aioseo-schema"> {"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/www.tothenew.com\/blog\/category\/react-js\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/#listItem","position":1,"item":{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/","name":"Home","description":"Dive into TO THE NEW's blogs for insights on digital tech services, product engineering, Cloud solutions, and more. Our articles cover trending tech topics from design to development to MarTech.","url":"https:\/\/www.tothenew.com\/blog\/"},"nextItem":"https:\/\/www.tothenew.com\/blog\/category\/react-js\/#listItem"},{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/category\/react-js\/#listItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/category\/react-js\/","name":"React.js","url":"https:\/\/www.tothenew.com\/blog\/category\/react-js\/"},"previousItem":"https:\/\/www.tothenew.com\/blog\/#listItem"}]},{"@type":"CollectionPage","@id":"https:\/\/www.tothenew.com\/blog\/category\/react-js\/#collectionpage","url":"https:\/\/www.tothenew.com\/blog\/category\/react-js\/","name":"Blog posts around React.js | TO THE NEW Blog","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.tothenew.com\/blog\/category\/react-js\/#breadcrumblist"}},{"@type":"Organization","@id":"https:\/\/www.tothenew.com\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/www.tothenew.com\/blog\/"},{"@type":"WebSite","@id":"https:\/\/www.tothenew.com\/blog\/#website","url":"https:\/\/www.tothenew.com\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"}}]} </script>  <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="TO THE NEW Blog" /> <meta property="og:type" content="blog" /> <meta property="og:title" content="Blog posts around React.js | TO THE NEW Blog" /> <meta property="og:url" content="https://www.tothenew.com/blog/category/react-js/" /> <meta property="og:image" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <meta property="og:image:secure_url" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@tothenew" /> <meta name="twitter:title" content="Blog posts around React.js | TO THE NEW Blog" /> <meta name="twitter:image" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <link rel='dns-prefetch' href='//www.tothenew.com' /> <link rel='dns-prefetch' href='//ajax.googleapis.com' /> <link rel='dns-prefetch' href='//static.addtoany.com' /> <link rel='dns-prefetch' href='//tps.tothenew.com' /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Feed" href="https://www.tothenew.com/blog/feed/" /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Comments Feed" href="https://www.tothenew.com/blog/comments/feed/" /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » React.js Category Feed" href="https://www.tothenew.com/blog/category/react-js/feed/" />  <script src="//www.googletagmanager.com/gtag/js?id=G-X6WRKCT651" data-cfasync="false" data-wpfc-render="false" type="text/javascript" async></script> <script data-cfasync="false" data-wpfc-render="false" type="text/javascript"> var mi_version = '9.2.2'; var mi_track_user = true; var mi_no_track_reason = ''; var MonsterInsightsDefaultLocations = {"page_location":"https:\/\/www.tothenew.com\/blog\/category\/react-js\/"}; if ( typeof MonsterInsightsPrivacyGuardFilter === 'function' ) { var MonsterInsightsLocations = (typeof MonsterInsightsExcludeQuery === 'object') ? MonsterInsightsPrivacyGuardFilter( MonsterInsightsExcludeQuery ) : MonsterInsightsPrivacyGuardFilter( MonsterInsightsDefaultLocations ); } else { var MonsterInsightsLocations = (typeof MonsterInsightsExcludeQuery === 'object') ? MonsterInsightsExcludeQuery : MonsterInsightsDefaultLocations; } var disableStrs = [ 'ga-disable-G-X6WRKCT651', ]; /* Function to detect opted out users */ function __gtagTrackerIsOptedOut() { for (var index = 0; index < disableStrs.length; index++) { if (document.cookie.indexOf(disableStrs[index] + '=true') > -1) { return true; } } return false; } /* Disable tracking if the opt-out cookie exists. */ if (__gtagTrackerIsOptedOut()) { for (var index = 0; index < disableStrs.length; index++) { window[disableStrs[index]] = true; } } /* Opt-out function */ function __gtagTrackerOptout() { for (var index = 0; index < disableStrs.length; index++) { document.cookie = disableStrs[index] + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'; window[disableStrs[index]] = true; } } if ('undefined' === typeof gaOptout) { function gaOptout() { __gtagTrackerOptout(); } } window.dataLayer = window.dataLayer || []; window.MonsterInsightsDualTracker = { helpers: {}, trackers: {}, }; if (mi_track_user) { function __gtagDataLayer() { dataLayer.push(arguments); } function __gtagTracker(type, name, parameters) { if (!parameters) { parameters = {}; } if (parameters.send_to) { __gtagDataLayer.apply(null, arguments); return; } if (type === 'event') { parameters.send_to = monsterinsights_frontend.v4_id; var hookName = name; if (typeof parameters['event_category'] !== 'undefined') { hookName = parameters['event_category'] + ':' + name; } if (typeof MonsterInsightsDualTracker.trackers[hookName] !== 'undefined') { MonsterInsightsDualTracker.trackers[hookName](parameters); } else { __gtagDataLayer('event', name, parameters); } } else { __gtagDataLayer.apply(null, arguments); } } __gtagTracker('js', new Date()); __gtagTracker('set', { 'developer_id.dZGIzZG': true, }); if ( MonsterInsightsLocations.page_location ) { __gtagTracker('set', MonsterInsightsLocations); } __gtagTracker('config', 'G-X6WRKCT651', {"forceSSL":"true","link_attribution":"true"} ); window.gtag = __gtagTracker; (function () { /* https://developers.google.com/analytics/devguides/collection/analyticsjs/ */ /* ga and __gaTracker compatibility shim. */ var noopfn = function () { return null; }; var newtracker = function () { return new Tracker(); }; var Tracker = function () { return null; }; var p = Tracker.prototype; p.get = noopfn; p.set = noopfn; p.send = function () { var args = Array.prototype.slice.call(arguments); args.unshift('send'); __gaTracker.apply(null, args); }; var __gaTracker = function () { var len = arguments.length; if (len === 0) { return; } var f = arguments[len - 1]; if (typeof f !== 'object' || f === null || typeof f.hitCallback !== 'function') { if ('send' === arguments[0]) { var hitConverted, hitObject = false, action; if ('event' === arguments[1]) { if ('undefined' !== typeof arguments[3]) { hitObject = { 'eventAction': arguments[3], 'eventCategory': arguments[2], 'eventLabel': arguments[4], 'value': arguments[5] ? arguments[5] : 1, } } } if ('pageview' === arguments[1]) { if ('undefined' !== typeof arguments[2]) { hitObject = { 'eventAction': 'page_view', 'page_path': arguments[2], } } } if (typeof arguments[2] === 'object') { hitObject = arguments[2]; } if (typeof arguments[5] === 'object') { Object.assign(hitObject, arguments[5]); } if ('undefined' !== typeof arguments[1].hitType) { hitObject = arguments[1]; if ('pageview' === hitObject.hitType) { hitObject.eventAction = 'page_view'; } } if (hitObject) { action = 'timing' === arguments[1].hitType ? 'timing_complete' : hitObject.eventAction; hitConverted = mapArgs(hitObject); __gtagTracker('event', action, hitConverted); } } return; } function mapArgs(args) { var arg, hit = {}; var gaMap = { 'eventCategory': 'event_category', 'eventAction': 'event_action', 'eventLabel': 'event_label', 'eventValue': 'event_value', 'nonInteraction': 'non_interaction', 'timingCategory': 'event_category', 'timingVar': 'name', 'timingValue': 'value', 'timingLabel': 'event_label', 'page': 'page_path', 'location': 'page_location', 'title': 'page_title', 'referrer' : 'page_referrer', }; for (arg in args) { if (!(!args.hasOwnProperty(arg) || !gaMap.hasOwnProperty(arg))) { hit[gaMap[arg]] = args[arg]; } else { hit[arg] = args[arg]; } } return hit; } try { f.hitCallback(); } catch (ex) { } }; __gaTracker.create = newtracker; __gaTracker.getByName = newtracker; __gaTracker.getAll = function () { return []; }; __gaTracker.remove = noopfn; __gaTracker.loaded = true; window['__gaTracker'] = __gaTracker; })(); } else { console.log(""); (function () { function __gtagTracker() { return null; } window['__gtagTracker'] = __gtagTracker; window['gtag'] = __gtagTracker; })(); } </script>  <link rel='stylesheet' id='sweetalert2-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/sweetalert2/sweetalert2.min.css?ver=10.16.7' type='text/css' media='all' /> <link rel='stylesheet' id='user-registration-general-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/user-registration.css?ver=2.3.5' type='text/css' media='all' /> <link rel='stylesheet' id='user-registration-smallscreen-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/user-registration-smallscreen.css?ver=2.3.5' type='text/css' media='only screen and (max-width: 768px)' /> <link rel='stylesheet' id='user-registration-my-account-layout-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/my-account-layout.css?ver=2.3.5' type='text/css' media='all' /> <link rel='stylesheet' id='dashicons-css' href='https://www.tothenew.com/blog/wp-includes/css/dashicons.min.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='https://www.tothenew.com/blog/wp-includes/css/dist/block-library/style.min.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='mpp_gutenberg-css' href='https://www.tothenew.com/blog/wp-content/plugins/metronet-profile-picture/dist/blocks.style.build.css?ver=2.6.0' type='text/css' media='all' /> <link rel='stylesheet' id='classic-theme-styles-css' href='https://www.tothenew.com/blog/wp-includes/css/classic-themes.min.css?ver=6.2.2' type='text/css' media='all' /> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} .wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} :where(.wp-block-columns.is-layout-flex){gap: 2em;} .wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='ap-fileuploader-animation-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/loading-animation.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-fileuploader-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/fileuploader.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-jquery-ui-style-css' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-tagit-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/jquery.tagit.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-tagit-ui-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/tagit.ui-zendesk.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='fontawesome-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/fontawesome/css/all.css?ver=5.15.1' type='text/css' media='all' /> <link rel='stylesheet' id='ap-front-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/frontend-style.css?ver=4.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-lightbox-css-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/lightbox/css/lightbox.css?ver=4.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='login-with-google-css' href='https://www.tothenew.com/blog/wp-content/plugins/login-with-google/assets/build/css/login.css?ver=1732707443' type='text/css' media='all' /> <link rel='stylesheet' id='ttn_new-fonts-css' href='https://tps.tothenew.com/css?family=Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext' type='text/css' media='all' /> <link rel='stylesheet' id='ttn_new-style-css' href='https://www.tothenew.com/blog/wp-content/themes/ttn/style.css?ver=6.2.2' type='text/css' media='all' />  <link rel='stylesheet' id='addtoany-css' href='https://www.tothenew.com/blog/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.16' type='text/css' media='all' /> <link rel='stylesheet' id='wppb_stylesheet-css' href='https://www.tothenew.com/blog/wp-content/plugins/profile-builder/assets/css/style-front-end.css?ver=3.12.4' type='text/css' media='all' /> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend-gtag.min.js?ver=9.2.2' id='monsterinsights-frontend-script-js'></script> <script data-cfasync="false" data-wpfc-render="false" type="text/javascript" id='monsterinsights-frontend-script-js-extra'>/* <![CDATA[ */ var monsterinsights_frontend = {"js_events_tracking":"true","download_extensions":"doc,pdf,ppt,zip,xls,docx,pptx,xlsx","inbound_paths":"[{\"path\":\"\\\/go\\\/\",\"label\":\"affiliate\"},{\"path\":\"\\\/recommend\\\/\",\"label\":\"affiliate\"}]","home_url":"https:\/\/www.tothenew.com\/blog","hash_tracking":"false","v4_id":"G-X6WRKCT651"};/* ]]> */ </script> <script type='text/javascript' defer src='//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js?ver=6.2.2' id='ap-jquery-ui-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/tag-it.js?ver=4.0.2' id='ap-tagit-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/tag-it-custom.js?ver=4.0.2' id='ap-tagit-custom-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/fileuploader.js?ver=6.2.2' id='ap-fileuploader-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/lightbox/js/lightbox.js?ver=4.0.2' id='ap-lightbox-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.13.2' id='jquery-ui-datepicker-js'></script> <script type='text/javascript' id='jquery-ui-datepicker-js-after'> jQuery(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});}); </script> <script type='text/javascript' id='ap-frontend-js-js-extra'> /* <![CDATA[ */ var ap_fileuploader = {"upload_url":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php","nonce":"10b15a1ca2"}; var ap_form_required_message = ["This field is required","anonymous-post-pro"]; var ap_captcha_error_message = ["Sum is not correct.","anonymous-post-pro"]; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/frontend.js?ver=4.0.2' id='ap-frontend-js-js'></script> <script type='text/javascript' id='addtoany-core-js-before'> window.a2a_config=window.a2a_config||{};a2a_config.callbacks=[];a2a_config.overlays=[];a2a_config.templates={}; </script> <script type='text/javascript' defer async src='https://static.addtoany.com/menu/page.js' id='addtoany-core-js'></script> <script type='text/javascript' defer async src='https://www.tothenew.com/blog/wp-content/plugins/add-to-any/addtoany.min.js?ver=1.1' id='addtoany-jquery-js'></script> <script type='text/javascript' id='loadmore_script-js-extra'> /* <![CDATA[ */ var loadmore_params = {"ajaxurl":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/ajax.js?ver=6.2.2' id='loadmore_script-js'></script> <link rel="https://api.w.org/" href="https://www.tothenew.com/blog/wp-json/" /><link rel="alternate" type="application/json" href="https://www.tothenew.com/blog/wp-json/wp/v2/categories/3038" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.tothenew.com/blog/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.2.2" /> <style type="text/css" id="wp-custom-css"> .blogs h2 b, .blogs h3 b, .blogs h4, .blogs h5 b, .blogs h2 strong, .blogs h3 strong, .blogs h4 strong, .blogs h5 strong, body h2, body h3, body h4, body h5{ font-weight: 500 !important; } .blog-dashboard td, .blog-dashboard th{padding: 10px 0px;} body b, body strong{ font-weight: 600 !important; } /* css for tick mark list */ #blog-section{ border-bottom: 1px solid #e5e2e2; } .page-header.acs_search_header{ max-width: 1210px; margin: 0 auto; padding: 15px; width: 100%; } .acs_twenty{ background: #f6f4f4; } .search-no-results .acs_search_results_container { min-height: inherit; } .search-no-results .acs_search_header { text-align: center; padding-top: 60px; } #header .search-icon:after, #header .search-icon:before{ top: 26px; transition: inherit; } #header.clone .search-icon::before, #header.clone .search-icon::after { top: 10px; } .search .page-header { border: 0; padding: 0px 0px 30px 0px !important; } .search .entry-header h1 { font-size: 18px !important; margin: 0px 0px 20px 0px; line-height: 27px; } .search h2.entry-title { font-size: 16px !important; } .acs_search_results_items{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 0.5rem; grid-auto-rows: 1fr; max-width: 1210px; margin: 0 auto; width: 100%; } .acs_search_results_items .border{ padding-top: 25px; width:auto; } .acs_search_results_items .border .blue-box{ height:100%; } .acs_search_results_container .acs_search_results_status{ background: #f6f4f4; margin: 0; border-bottom: 1px solid #e5e2e2; padding: 20px 0px; } li.checksome:before { content: '✓'; font-size: 17px; font-weight: 700; } p.mandatory { color: red !important; text-align: right; } .ap-pro-front-form #mceu_28-body { white-space: break-spaces; } .hs_error_rollup>ul.no-list.hs-error-msgs.inputs-list { display: none !important; } .wp-admin .js .tmce-active .wp-editor-area { color: #333; } .btn-load-more { padding: 10px 40px; background: none; border-color: #d9177f; color: #d9177f; border-radius: unset; } .load_more.text-center { margin-bottom: 48px; } .btn-load-more:hover { background: #d9177f; color: #fff; } .addtoany_share_save_container.addtoany_content.addtoany_content_bottom { text-align: center; } .site-logo { background: url(/themes/custom/ttnd/images/TTN-logo.svg) no-repeat; } .social li a { background: url(/themes/custom/ttnd/images/social_icons.svg) no-repeat; } #new_post_form #mceu_28-body { white-space: break-spaces; } .ap-pro-front-form #mceu_11 { display: none; } form#loginform input#wp-submit:hover { background: #b40a65; } #header.clone #menu li.topmyaccount:last-child a:hover{ background: transparent; color: #d9167e !important; } #header.clone #menu > ul .menu-expanded.topmyaccount ul{ border-top: 0px; border-radius: 0px; } #header.clone #menu li.topmyaccount:last-child ul li:last-child { border-top: 1px solid #ccc; } #header.clone #menu li.topmyaccount:last-child ul li a:hover { border: 0px; } li.user-registration-MyAccount-navigation-link.user-registration-MyAccount-navigation-link--edit-password { display: none !important; } /* writing css for admin login*/ .ttn-login-tutorial { margin: 42px 0 30px; box-sizing: border-box; padding: 0px 30px; background-color: #fff; } #header.clone #menu li:last-child a{ border: inherit; padding-left: inherit; padding-right: inherit; color: inherit; padding: 10px 15px !important; } form#loginform { padding: 15px; border: 1px solid #dee0e9; box-shadow: none; background: 0 0; } form#loginform p{ margin:10px 0px; font-size:14px; color:#000; } form#loginform input#user_login,input#user_pass { border: 1px solid #ccc; outline: none !important; margin: 10px 0px; } form#loginform p.login-submit { text-align: center; } form#loginform input#wp-submit { width: 200px; background: #d9167e; color: #fff; font-size: 18px; margin: 5px 0px; height: 46px; line-height: 20px; } form#loginform p.login-remember label{ display: inline-block; padding-right: 10px; white-space: nowrap; } form#loginform input[type="checkbox"]{ border: 1px solid #ccc; outline: none !important; vertical-align: middle; width: 20%; margin-right: 7%; font-size: 14px; } /*css for admin login ends here*/ /*css for details update page starts here*/ #user-registration.horizontal{ border:1px solid #dee0e9; box-shadow:none; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { border-bottom:10px solid #d9167e !important; } .user-registration-MyAccount-content label { text-align: left; letter-spacing: 0px; color: #000000; margin: 14px 0px; } .select2-container .select2-selection--single { height:41px !important } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #000; line-height: 36px !important; font-size: 16px !important; font-weight:500 !important } #user-registration input { border: 1px solid #ccc; outline: none !important; padding: 0px 10px; font-size: 16px; font-weight: 500; } input#edit_profile { width: 33%; color: #fff; font-size: 16px; background: #d9167e; border: 0px; } input#edit_profile:hover{ background: #b40a65; border-color: #b40a65; } span.select2.select2-container.select2-container--default { width: auto !important; } @media screen and (max-width:991px){ .tag-cloud {height: auto;} #header.search-open .search-icon{ top: -12px; } } @media screen and (max-width:480px){ input#edit_profile{ width:50%; } } /*css for details upate page ends here*/ nav.user-registration-MyAccount-navigation { background: #000; } .logged-in .forlogout, .wp_google_login__divider{ display:none;} .forlogin { display:none;} .logged-in .forlogin { display:block;} #wppb-edit-user #description { height: 100px; } .wppb-form-field.wppb-default-password { display: none; } .topmyaccount ul { width: 123px !important; margin-top: -6px; } .search-results .breadcrumbs li:last-child { display: none; } .user-registration-register.register a { display: none; } .forlogout {text-align: center; margin: 20px;} .forlogout a{ width: 200px; background: #d9167e; color: #fff; font-size: 18px; height: 46px; padding: 8px 8px; display: inline-block;} .reject-notify { text-align: right; margin-right: 11px; margin-bottom: 10px; } .rejection-form-item textarea { width: 100%; min-height: 190px; } .userblog h2.entry-title a, .userblog h2.entry-title { color: #000; text-align:left; } .updated-user-blog { display: flex; } .userblog .updated-user-blog .button{ background: url(/blog/wp-ttn-blog/uploads/2021/05/edit.png); background-repeat: no-repeat; background-size: 18px; width: 72px; font-size: 16px; background-position: right 2px; height: 20px; box-shadow: none; } .userblog .entry-content { text-align: left; } .publishedblog .status-publish:hover, .unpublishedblog .status-publish, .userblog .status-draft:hover { transform: scale(1.04); transition: ease-in-out; transition-duration: .4s; } .publishedblog .status-publish:hover h2.entry-title a, .unpublishedblog .status-publish, .userblog .status-draft:hover h2.entry-title a{ color:#d9167e; } li.user-registration-MyAccount-navigation-link.user-registration-MyAccount-navigation-link--edit-blog { display: none !important; } #new_post_form .label-wrap { text-align: left; } .publishedblog .entry-content p { text-align: left; } #new_post_form input[type="checkbox"] { height: 16px; width: 16px; } .blog-cont-box { top: -32px !important; } #new_post_form input[type="submit"] { max-width: 200px; background: #d9167e; border: 0px !important; box-shadow: inherit !important; font-size: 16px; height: 46px; line-height: 46px; color: #fff; margin-bottom: 36px; } #new_post_form .ap-checkbox-wrap label.ap-checkbox-label { text-align: left; } .comment-form-cookies-consent label { margin-left: 28px; font-size: 13px; margin-top: -11px; } .comment-form-cookies-consent input { width: 20px; height: 20px; } .ap-checkbox-wrap label.ap-checkbox-label { font-size: 14px; font-weight: normal; width: 30%; display: inline-block; margin: 0; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background-color: transparent !important; border-bottom: 3px solid #d9177f; font-size: 15px; } h2.ap-pro-front-form-title { text-align: center; margin-bottom: 12px !important; } .thankyounav { display:none;} .logged-in .thankyounav { display:block;} .ur-frontend-form label.user-registration-error { padding: 0px; font-weight: 400; margin-top: -9px !important; } .prftxt>i { display: none; } .ur-frontend-form #ur-submit-message-node { margin: -32px 0 0; font-size: 16px; } .user-registration-MyAccount-content fieldset { border:none; padding: 0;} .cntlinehght { line-height: 28px; font-size: 20px; } .user-registration-error::before { content: none; } .ur-frontend-form input { border: 1px solid #ccc; } .user-registration-error { border-top-color: #fff; background: no-repeat; color: #f4000a; } .ur-field-item.field-description { width: 97% !important; } .ur-frontend-form .ur-form-row .ur-form-grid textarea { border: 1px solid #a2a7ae; } .user-registration-account .user-registration-profile-fields .form-row { display: block !important; } .user-registration-profile-fields p { display: flex; justify-content: center; margin-top: 10px; } .user-registration-profile-fields label { text-align: left; } .user-registration-page #secondary { display: none; } .thank_login { padding: 10px 40px; background: #d9177f; color: #fff !important; border-color: #d9177f; text-decoration: none !important; } .user-registration-submit-Button {background: #d9177f; color: #fff !important; border-color: #d9177f;} .user-registration-Button { background: none repeat scroll 0 0 #d9177f; border: medium none; color: #fff; cursor: pointer; font-weight: 600; padding: 10px 0 6px; text-transform: uppercase; width: 100%;} #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { color: #fff; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background-color: #d9177f; } #user-registration p.blogtext { margin: 23px 0px 0px; letter-spacing: 0px; color: #000000; text-align: center; font-size: 16px; } .user-registration-account .status-publish, .userblog .status-draft{ width: 74%; margin: 0 auto; -webkit-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); -moz-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); margin-top: 40px; padding: 28px; margin-bottom: 40px; } .ap-pro-front-form .ap-form-error { margin-top: 4px; } .ap-pro-front-form .author-name .ap-pro-textfield { cursor: not-allowed; } .page-template-default .status-publish{ width: 74%; margin: 0 auto; -webkit-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); -moz-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); margin-top: 40px; padding: 28px; margin-bottom: 40px; } .page-template-default header.entry-header h1 { font-size: 28px; } .page-template-default header.entry-header{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #ccc; } .page-template-default header.entry-header:after { position: absolute; height: 5px; width: 20%; background: #d9167e; content: ""; bottom: -3px; } h2.ap-pro-front-form-title { text-align: center; } .ap-pro-form-field-wrapper { margin-bottom: 0px; } .ap-pro-form-field-wrapper p { padding-top: 10px; } .ap-pro-form-field-wrapper .label-wrap label { padding-bottom: 0px; } .ap-pro-form-field .wp-editor-container textarea.wp-editor-area { min-height: 148px; } .ap-pro-form-field-wrapper.category select { padding: 10px; font-size: 15px; } .ap-pro-form-field-wrapper.payment-agreement { text-align: center; } .payment-agreement.ap-pro-form-field-wrapper input[type="submit"] { max-width: 200px; background: #d9167e; border: 0px !important; box-shadow: inherit !important; font-size: 16px; height: 46px; line-height:46px; } .payment-agreement.ap-pro-form-field-wrapper input[type="submit"]:hover { background: #b40a65 !important; } .user-registration-account header.entry-header h1 { font-size: 28px; } .user-registration-account header.entry-header{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #ccc; } .user-registration-account header.entry-header:after { position: absolute; height: 5px; width: 20%; background: #d9167e; content: ""; bottom: -3px; } .blog-user-registration .post-title input, .blog-user-registration .post-content input, .blog-user-registration .primary-competency input, .blog-user-registration .ap-checkbox-wrap input{background: #F8F8F8 0% 0% no-repeat padding-box; box-shadow: inset 0px 3px 6px #7B7B7B29; border: 1px solid #BFBFBF; opacity: 1;} span.edit-link { display: none !important; } #user-registration { margin: 42px 0 30px; } .user-registration-account .login .form-row{ justify-content: center; display: flex; flex-wrap: wrap; } .user-registration-account .form-row.form-row-wide{ display:block } .user-registration-account .form-row input[type=submit]{ width: 200px; background: #d9167e; color: #fff; font-size: 18px; margin-top: 10px; height: 46px; line-height: 20px; } .ur-frontend-form .ur-button-container .ur-submit-button, .user-registration-MyAccount-content .ap-form-submit-wrapper input { margin: 20px auto 34px; width: 200px; background: #d9167e; color: #fff; font-size: 18px; height: 46px; line-height: 20px; } .user-registration-MyAccount-content .ap-form-submit-wrapper{ text-align: center; } .user-registration-MyAccount-content .ap-form_field select{ font-size: 16px; } .user-registration-MyAccount-content .ap-form-field-wrapper label{ font-size: 14px; } .ur-frontend-form { margin-top: 38px; padding: 30px; } .ur-frontend-form .ur-field-item { width: 46.666%; display: inline-block; margin: 0 1.333% 0px !important; } .ap-form-wrapper{ text-align:left; } .user-registration-account span.edit-link { margin-top: -21px; display: block; } .publishedblog { padding-bottom: 40px; } .publishedblog h2 { margin-bottom: 12px !important; } span.user-registration-nick-name { display: none; } .publishedblog .status-publish, .unpublishedblog .status-publish, .userblog .status-draft{ width: 47%; display: inline-block; margin: 0 1%; margin-top: 26px; vertical-align: top; min-height: 330px; } #user-registration p { color: #333; font-size: 14px; } #user-registration .user-registration-MyAccount-content .edit-password legend, #user-registration .user-registration-MyAccount-content h2{ font-family: "Montserrat", sans-serif; color: #000000; opacity: 1; text-align: center;} .user-registration-message a { padding: 12px 10px; clear: both; font-size: 14px; display: block; margin-left: 14px; border: 1px solid #d9167e; max-width: 178px; margin: 0 auto; background: #d9167e; color: #fff; text-decoration: none; } .user-registration-message a:hover{ background:#b40a65; } .user-registration-message { border-top-color: #d9167e; background: rgba(143,174,27,.1); color: #000000; font-size: 16px; font-weight: 600; text-align: center; display: block; margin-bottom: 12px !important; } .register .buisness-error, .register .user-registration-error { font-size: 13px !important; position: absolute; } form.register .ur-field-item { position: relative; } input[type=checkbox]{-webkit-appearance: auto;} .ap-pro-form-field-wrapper input[type="checkbox"] { height: 16px; width: 16px; } .register .user-registration-message{display:none;} #header #menu > ul .menu-expanded ul li:last-child a{text-transform: none;} .category-list ul li a { text-transform: inherit; } @media screen and (max-width: 1023px){ #header .search-icon{ background-position: -10px 13px; background-size: 180%; background-color: transparent !important; } #header .search-icon span{display:none;} .site-logo{background-position: -98px 3px !important;} } @media screen and (max-width: 991px){ .ttn-login-tutorial{ padding: 0 !important; } .user-registration { padding: 0 !important; } .ur-frontend-form .ur-field-item, .page-template-default .status-publish { width: 100%; margin: 0 !important; } .ur-frontend-form { padding: 10px; } .publishedblog .status-publish, .unpublishedblog .status-publish, .userblog .status-draft{width: 100%;margin:10px 0px;} .ap-checkbox-wrap label.ap-checkbox-label{ width:50%; } .acs_search_results_items{ grid-template-columns: repeat(2,1fr); } } @media screen and (max-width: 800px){ div.ap-form-wrapper { padding: 10px 8px !important; } .breadcrumbs{ height: 32px; overflow:inherit; white-space:inherit; } .breadcrumbs li:before { padding: 0 8px; } .page-template-default .status-publish{ padding: 20px 10px; } .user-registration-MyAccount-content .wppb-user-forms ul{ padding: 0 15px; } .wppb-user-forms ul li { margin: 0; padding-bottom: 14px; display: flex; justify-content: center; flex-wrap: wrap; } .wppb-user-forms label { text-align: left; margin: 2px 0px; width: 100%; font-size: 13px; } .wppb-user-forms .wppb-form-field input, .wppb-user-forms textarea { width: 100% !important; } } @media screen and (max-width: 600px){ #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { padding: 10px 4px; font-size: 15px !important; letter-spacing: -1px; } #user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link{display: inline-block;} div.ap-checkbox-wrap label.ap-checkbox-label { width: 50%; font-size: 12px !important; } div.ap-pro-form-field-wrapper input[type="checkbox"] { margin: 0 5px 5px 0; } #user-registration .user-registration-MyAccount-content { padding: 15px 0px; } .acs_search_results_items{ grid-template-columns: auto; } .col-xs-1.col-md-1.clear-all-filter{ bottom: 20px; } } @media screen and (max-width: 480px){ .category-list .cat-dropdown ul{max-height: 130px;overflow: auto;} .category-list .cat-dropdown .sort-by-dropdown-blog{max-height:inherit;} .ap-checkbox-wrap label.ap-checkbox-label{ width:100%; } div.ap-pro-form-field-wrapper input[type="checkbox"] { height: 14px; width: 12px; } } @media screen and (max-width:1024px){ #header ul#menu-ttn-menu li a { padding: 11px 20px 15px 0px !important; } } </style> <meta name="description" itemprop="description" content="React.js blog posts. Read blog posts around React.js at TO THE NEW blog. In-depth blog posts about React.js by experts - page 1" /> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.min.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.selectbox-0.2.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/bootstrap.min.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.validate.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/application.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/masonry.pkgd.min.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.cookie.min.js"></script>  <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '296707276361693'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=296707276361693&ev=PageView&noscript=1" /></noscript>   <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">  </head> <body class="archive category category-react-js category-3038 user-registration-page custom-font-enabled">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N939BGV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M2TS6P" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-M2TS6P');</script>  <div id="container"> <header id="header"> <div class="container"> <div class="clearfix region-header"> <div class="logo"> <a rel="nofollow" href="/" class="site-logo"></a> </div> <div class="custom-search"> <form accept-charset="UTF-8" id="views-exposed-form-search-result-page-1" method="get" action="/search"> <div class="form--inline clearfix"> <label for="edit-combine"> </label> <input type="text" class="form-text" maxlength="128" size="30" value="" name="search_keyword" id="edit-combine" placeholder="Enter search term" /> <input type="submit" class="button js-form-submit form-submit" value="Apply" id="edit-submit-search-result" /> </div> </form> </div> <nav class="clearfix"> <div id="menu"> <ul id="menu-ttn-menu" class="clearfix menu"><li class="menu-expanded"><a href="/services">Services</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/digital-engineering">Digital Engineering</a></li> <li class="menu-item"><a href="/cloud-devops">Cloud & DevOps</a></li> <li class="menu-item"><a href="/media-and-entertainment-solutions">Media & Entertainment Solutions</a></li> <li class="menu-item"><a href="/data-analytics">Data & Analytics</a></li> <li class="menu-item"><a href="/cx">CX & Content</a></li> <li class="menu-item"><a href="/digital-marketing">Digital Marketing</a></li> </ul> </li> <li class="menu-expanded"><a href="/industries">Industries</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/industries/isv">Independent Software Vendors</a></li> <li class="menu-item"><a href="/industries/media-entertainment">Media & Entertainment</a></li> <li class="menu-item"><a href="/industries/consumer-internet">Consumer Internet</a></li> <li class="menu-item"><a href="/industries/ecommerce">E-Commerce</a></li> <li class="menu-item"><a href="/industries/bfsi">Financial Services</a></li> <li class="menu-item"><a href="/industries/healthcare-pharma">Healthcare & Pharma</a></li> <li class="menu-item"><a href="/industries/igaming">iGaming</a></li> </ul> </li> <li class="menu-expanded"><a href="/solutions">Solutions</a><span class="arrow"></span> <ul> <li class="menu-item has-description"><a href="/solutions/hawk">HAWK<span class="wrap">| Infra monitoring & Log Analytics</span></a></li> <li class="menu-item has-description"><a href="/solutions/Prism">Prism<span class="wrap">| AI-based Test Automation</span></a></li> <li class="menu-item has-description"><a href="/solutions/nimbus">Nimbus<span class="wrap">| Custom Data Ingestion Solution</span></a></li> <li class="menu-item has-description"><a href="/solutions/videoready">VideoReady<span class="wrap">| OTT & Video CMS framework</span></a></li> <li class="menu-item has-description"><a href="/solutions/bolt">BOLT<span class="wrap">| Faster AEM Development</span></a></li> </ul> </li> <li class=""><a href="/technologies">Technologies</a></li> <li class="menu-expanded"><a href="/insights">Insights</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/success-stories">Success Stories</a></li> <li class="menu-item"><a href="/insights?resource=67">Whitepapers</a></li> <li class="menu-item"><a href="/insights?resource=66">Webinars</a></li> <li class="menu-item"><a href="/insights?resource=652">Podcasts</a></li> <li class="menu-item"><a href="/blog/">Blogs</a></li> <li class="menu-item"><a href="/insights?resource=62">e-Books</a></li> <li class="menu-item"><a href="/insights?resource=162">Magazines</a></li> <li class="menu-item"><a href="/insights?resource=574">Spotlight</a></li> </ul> </li> <li class=""><a href="/careers">Careers</a></li> <li class="menu-expanded"><a href="/about-us">About</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/about-us">About Us</a></li> <li class="menu-item"><a href="/leadership">Leadership</a></li> <li class="menu-item"><a href="/partnership">Partners</a></li> <li class="menu-item"><a href="/press-releases">Press Releases</a></li> <li class="menu-item"><a href="/media-coverage">Media Coverage</a></li> <li class="menu-item"><a href="/awards">Awards & Analyst Relations</a></li> <li class="menu-item"><a href="/events">Events</a></li> <li class="menu-item"><a href="/our-social-impact">CSR</a></li> </ul> </li> <li class=""><a href="/contact-us" id=h-contact-us>Contact Us</a></li> </ul> </div> <div class="menu-btn"> <div class="burger-container"> <div id="burger"> <div class="bar topBar"></div> <div class="bar btmBar"></div> </div> </div> </div> <a class="search-icon" href="#">Search <span>|</span></a> </nav> </div> </div> </header> <div id="banner" class="clearfix"> <div class="overlay"> <img src="https://www.tothenew.com/blog/wp-content/themes/ttn/images/banner/blog_banner.png" alt="Blog"> </div> <div class="banner-text"> <h2>Blogs</h2> <p>Told you, we love sharing!</p> <div class="subscribe-mobo-btn header-subscribe"> <div class="subscrb"> <div class="subscribe"> <ul class="sign-up-frm"> <li class="width100"> <input class="submit subscribeButton" type="submit" value="Subscribe Blogs"> </li> </ul> </div> </div> </div> </div> <div class="col-xs-12 breadcrumbs padding0"> <ul>  <li><a rel="nofollow" href="/">Home</a></li><li><a rel="v:url" property="v:title" title="Go to TO THE NEW Blog." href="https://www.tothenew.com/blog/" class="home">Blog</a></li><li><span property="v:title">React.js</span></li> </ul> </div> </div> <div class="clearfix category-list white"> <div class="container"> <div class="row"> <div class="normal"> <div class="col-xs-9 col-sm-9 col-md-9 category-filter-outer-b"> <div class="col-xs-8 col-md-4 main-cat category-filter-blog"> <div class="heading category-head">Category</div> <div class="cat-dropdown category-filter-blog-dropdown"> <div class="cat-drop-inner mCustomScrollbar inset-dark"> <div class="heading">Categories</div> <ul> <li class="cat-item cat-item-5867"><a href="https://www.tothenew.com/blog/category/net/">.NET</a> </li> <li class="cat-item cat-item-5868"><a href="https://www.tothenew.com/blog/category/adobe/">Adobe</a> </li> <li class="cat-item cat-item-1993"><a href="https://www.tothenew.com/blog/category/agile-2/">Agile</a> </li> <li class="cat-item cat-item-4685"><a href="https://www.tothenew.com/blog/category/anaytics/">Anaytics</a> </li> <li class="cat-item cat-item-518"><a href="https://www.tothenew.com/blog/category/android/">Android</a> </li> <li class="cat-item cat-item-1439"><a href="https://www.tothenew.com/blog/category/angular/">AngularJS</a> </li> <li class="cat-item cat-item-2026"><a href="https://www.tothenew.com/blog/category/appsec/">Application Security</a> </li> <li class="cat-item cat-item-1818"><a href="https://www.tothenew.com/blog/category/automation-testing-testing-2/">Automation Testing</a> </li> <li class="cat-item cat-item-1174"><a href="https://www.tothenew.com/blog/category/aws-2/">AWS</a> </li> <li class="cat-item cat-item-4837"><a href="https://www.tothenew.com/blog/category/b2b-2/">B2B</a> </li> <li class="cat-item cat-item-4925"><a href="https://www.tothenew.com/blog/category/b2c/">B2C</a> </li> <li class="cat-item cat-item-5869"><a href="https://www.tothenew.com/blog/category/ba/">BA</a> </li> <li class="cat-item cat-item-5870"><a href="https://www.tothenew.com/blog/category/bi/">BI</a> </li> <li class="cat-item cat-item-1395"><a href="https://www.tothenew.com/blog/category/big-data/">Big Data</a> </li> <li class="cat-item cat-item-4778"><a href="https://www.tothenew.com/blog/category/blockchain/">Blockchain</a> </li> <li class="cat-item cat-item-4308"><a href="https://www.tothenew.com/blog/category/cloud-devops-technology/">Cloud</a> </li> <li class="cat-item cat-item-4682"><a href="https://www.tothenew.com/blog/category/cloud-managed-services/">Cloud Managed Services</a> </li> <li class="cat-item cat-item-3479"><a href="https://www.tothenew.com/blog/category/connected-tv/">Connected TV</a> </li> <li class="cat-item cat-item-1541"><a href="https://www.tothenew.com/blog/category/corporate/">Corporate</a> </li> <li class="cat-item cat-item-4835"><a href="https://www.tothenew.com/blog/category/covid-19/">Covid 19</a> </li> <li class="cat-item cat-item-4831"><a href="https://www.tothenew.com/blog/category/data-analytics/">Data & Analytics</a> </li> <li class="cat-item cat-item-6194"><a href="https://www.tothenew.com/blog/category/data-engineering/">Data Engineering</a> </li> <li class="cat-item cat-item-5871"><a href="https://www.tothenew.com/blog/category/data-science/">Data Science</a> </li> <li class="cat-item cat-item-5872"><a href="https://www.tothenew.com/blog/category/database-administration/">Database Administration</a> </li> <li class="cat-item cat-item-2348"><a href="https://www.tothenew.com/blog/category/devops-technology/">DevOps</a> </li> <li class="cat-item cat-item-2251"><a href="https://www.tothenew.com/blog/category/digital-analytics/">Digital Analytics</a> </li> <li class="cat-item cat-item-4839"><a href="https://www.tothenew.com/blog/category/digital-engineering/">Digital Engineering</a> </li> <li class="cat-item cat-item-1964"><a href="https://www.tothenew.com/blog/category/digital-marketing/">Digital Marketing</a> </li> <li class="cat-item cat-item-4112"><a href="https://www.tothenew.com/blog/category/digital-transformation-2/">Digital Transformation</a> </li> <li class="cat-item cat-item-5873"><a href="https://www.tothenew.com/blog/category/dm-analytics/">DM – Analytics</a> </li> <li class="cat-item cat-item-3602"><a href="https://www.tothenew.com/blog/category/drupal/">Drupal</a> </li> <li class="cat-item cat-item-3887"><a href="https://www.tothenew.com/blog/category/user-experience-design/">Experience Design</a> </li> <li class="cat-item cat-item-3429"><a href="https://www.tothenew.com/blog/category/front-end-development/">Front End Development</a> </li> <li class="cat-item cat-item-7"><a href="https://www.tothenew.com/blog/category/grails/">Grails</a> </li> <li class="cat-item cat-item-6853"><a href="https://www.tothenew.com/blog/category/healthtech/">HealthTech</a> </li> <li class="cat-item cat-item-4687"><a href="https://www.tothenew.com/blog/category/hybrid/">Hybrid</a> </li> <li class="cat-item cat-item-5981"><a href="https://www.tothenew.com/blog/category/igaming/">iGaming</a> </li> <li class="cat-item cat-item-1814"><a href="https://www.tothenew.com/blog/category/industry-buzz/">Industry Buzz</a> </li> <li class="cat-item cat-item-1400"><a href="https://www.tothenew.com/blog/category/ios/">iOS</a> </li> <li class="cat-item cat-item-446"><a href="https://www.tothenew.com/blog/category/java/">Java/JVM</a> </li> <li class="cat-item cat-item-5876"><a href="https://www.tothenew.com/blog/category/js/">JS</a> </li> <li class="cat-item cat-item-1817"><a href="https://www.tothenew.com/blog/category/manual-testing/">Manual Testing</a> </li> <li class="cat-item cat-item-1953"><a href="https://www.tothenew.com/blog/category/marketing/">Marketing</a> </li> <li class="cat-item cat-item-4926"><a href="https://www.tothenew.com/blog/category/marketing-automation/">Marketing Automation</a> </li> <li class="cat-item cat-item-4684"><a href="https://www.tothenew.com/blog/category/mean-2/">MEAN</a> </li> <li class="cat-item cat-item-4686"><a href="https://www.tothenew.com/blog/category/mobile-automation-testing-2/">Mobile Automation Testing</a> </li> <li class="cat-item cat-item-1772"><a href="https://www.tothenew.com/blog/category/mobility/">Mobility</a> </li> <li class="cat-item cat-item-5877"><a href="https://www.tothenew.com/blog/category/msp/">MSP</a> </li> <li class="cat-item cat-item-1185"><a href="https://www.tothenew.com/blog/category/node-js-2/">Node.js</a> </li> <li class="cat-item cat-item-3917"><a href="https://www.tothenew.com/blog/category/product-engineering-2/">Product Engineering</a> </li> <li class="cat-item cat-item-5878"><a href="https://www.tothenew.com/blog/category/project-management/">Project Management</a> </li> <li class="cat-item cat-item-5879"><a href="https://www.tothenew.com/blog/category/python/">Python</a> </li> <li class="cat-item cat-item-5880"><a href="https://www.tothenew.com/blog/category/qe/">QE</a> </li> <li class="cat-item cat-item-5881"><a href="https://www.tothenew.com/blog/category/react-native/">React Native</a> </li> <li class="cat-item cat-item-3038 current-cat"><a aria-current="page" href="https://www.tothenew.com/blog/category/react-js/">React.js</a> </li> <li class="cat-item cat-item-4670"><a href="https://www.tothenew.com/blog/category/sails-js/">Sails JS</a> </li> <li class="cat-item cat-item-6009"><a href="https://www.tothenew.com/blog/category/salesforce/">Salesforce</a> </li> <li class="cat-item cat-item-5270"><a href="https://www.tothenew.com/blog/category/digital-marketing/seo/">SEO</a> </li> <li class="cat-item cat-item-3477"><a href="https://www.tothenew.com/blog/category/smart-tv/">Smart TV</a> </li> <li class="cat-item cat-item-1994"><a href="https://www.tothenew.com/blog/category/software-development/">Software development</a> </li> <li class="cat-item cat-item-1"><a href="https://www.tothenew.com/blog/category/technology/">Technology</a> </li> <li class="cat-item cat-item-1816"><a href="https://www.tothenew.com/blog/category/testing-2/">Testing</a> </li> <li class="cat-item cat-item-3109"><a href="https://www.tothenew.com/blog/category/user-experience/">User Experience</a> </li> <li class="cat-item cat-item-4683"><a href="https://www.tothenew.com/blog/category/video-solutions/">Video Solutions</a> </li> <li class="cat-item cat-item-4488"><a href="https://www.tothenew.com/blog/category/web-content-management/">Web Content Management</a> </li> <li class="cat-item cat-item-5021"><a href="https://www.tothenew.com/blog/category/wordpress/">WordPress</a> </li> </ul> </div> </div> </div> <div class="col-xs-2 col-md-3 main-cat year-filter-blog"> <div class="heading"> Sort By </div> <div class="cat-dropdown year-filter-blog-dropdown"> <div class="cat-drop-inner mCustomScrollbar inset-dark"> <ul class='sort-by-dropdown-blog'> <li class="latest active">Latest</li> <li class="year"> <div class="year-heading"> Year</div> <div class="year-dropdown"> <ul class='year-filter-dropdown-blog'> <li class="cat-item"> <a href="">2024</a> </li> <li class="cat-item"> <a href="">2023</a> </li> <li class="cat-item"> <a href="">2022</a> </li> <li class="cat-item"> <a href="">2021</a> </li> <li class="cat-item"> <a href="">2020</a> </li> <li class="cat-item"> <a href="">2019</a> </li> <li class="cat-item"> <a href="">2018</a> </li> <li class="cat-item"> <a href="">2017</a> </li> <li class="cat-item"> <a href="">2016</a> </li> <li class="cat-item"> <a href="">2015</a> </li> <li class="cat-item"> <a href="">2014</a> </li> <li class="cat-item"> <a href="">2013</a> </li> <li class="cat-item"> <a href="">2012</a> </li> <li class="cat-item"> <a href="">2011</a> </li> <li class="cat-item"> <a href="">2010</a> </li> <li class="cat-item"> <a href="">2009</a> </li> <li class="cat-item"> <a href="">2008</a> </li> </ul></div> </li> </ul> </div> </div> </div> <div class="search-form"> <form id="searchform" action="https://www.tothenew.com/blog/"> <div> <input type="submit" id="searchsubmit" value="Search" class="btn" /> <input type="text" id="textstring" name="s" id="s" value="Search blog" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> </div> </form> </div> <div class="col-xs-1 col-md-1 clear-all-filter"> </div> </div> <div class="col-xs-3 col-sm-3 col-md-3 subscribe-mobo-btn menu-subscribe"> <div class="col-md-12 subscrb"> <div class="subscribe">  <ul class="sign-up-frm"> <li class="width100">  <input class="submit subscribeButton" type="submit" value="Subscribe Blogs"> </li> </ul>  </div> </div> </div> </div> </div> </div> </div> </div> <section id="blog-section testarchive"> <form class="filter-blog-form" method="GET" style="display:none;" action="https://www.tothenew.com/blog"> <input type="text" value="" name="y" id ="year" /> <input type="text" value="latest" name="l" id ="latest" /> <input type="submit" value="apply" id="submit-blog-filter"> </form> <div id="blog-section" style="padding-top: 19px;"> <div class="container"> <div class="row"> <div class="col-md-12 latest_posts_wrapper left-content"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/angular/" title="View all posts in AngularJS">AngularJS</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/mean-2/" title="View all posts in MEAN">MEAN</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/enhancing-javascript-coding-with-ai-using-visual-studio-code/" rel="bookmark"><span class="heading-outer"><span class="heading">Enhancing JavaScript Coding with AI: Using Visual Studio Code</span></span></a></header><p>In the rapidly evolving software development landscape, technologies like Artificial Intelligence (AI) are revolutionizing traditional workflows, making them more efficient and productive. For JavaScript programmers, integrating AI tools into their preferred development environment, such as Visual Studio Code (VS Code), can significantly enhance the coding experience. In this blog post, we’ll explore how JavaScript developers […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/mahendra-agrawal/" title="View all posts by Mahendra Kumar Agrawal" rel="nofollow">Mahendra Kumar Agrawal</a> <br> </u></div> <div class="col-sm-6 by-dates">April 28, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/react-js/" title="View all posts in React.js">React.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/unleashing-the-power-of-components-react-for-dynamic-web-apps/" rel="bookmark"><span class="heading-outer"><span class="heading">Unleashing the Power of Components: React for Dynamic Web Apps</span></span></a></header><p>Understanding React.js: React.js is an open-source JavaScript library maintained by Facebook and a community of developers. It is primarily used for building user interfaces (UIs) for single-page applications. React.js follows the component-based architecture, where UIs are composed of reusable and self-contained components. Core Features of React.js Component-Based Architecture: React.js encourages breaking down the user interface […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/harshit-singhal/" title="View all posts by Harshit Singhal" rel="nofollow">Harshit Singhal</a> <br> </u></div> <div class="col-sm-6 by-dates">April 19, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/react-js/" title="View all posts in React.js">React.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/route-planning-using-open-street-map/" rel="bookmark"><span class="heading-outer"><span class="heading">Route Planning Using Open Street Map</span></span></a></header><p>Introduction In this blog post, we will delve into the utilization of Leaflet.js, an open-source JavaScript library, in conjunction with React to craft interactive maps as a substitute for Google Maps. Understanding the application of Leaflet.js can enable us to showcase location data effectively and construct personalized map-centric applications effortlessly. For this tutorial and into […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/abdul-samad/" title="View all posts by Abdul Samad" rel="nofollow">Abdul Samad</a> <br> </u></div> <div class="col-sm-6 by-dates">April 19, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/angular/" title="View all posts in AngularJS">AngularJS</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/mean-2/" title="View all posts in MEAN">MEAN</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/node-js-2/" title="View all posts in Node.js">Node.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/is-currying-in-javascript-a-chain-of-functions/" rel="bookmark"><span class="heading-outer"><span class="heading">Is Currying in JavaScript, A Chain of Functions?</span></span></a></header><p>In this article, we are going to discuss “Is Currying in JavaScript a Chain of Functions?“. Here, we will see how currying works like a chain of functions and how it will be useful for developers. We will also see the conversion of an existing function into the current version. Let’s start our topic, i.e., […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/akash-yadav/" title="View all posts by Akash Yadav" rel="nofollow">Akash Yadav</a> <br> </u></div> <div class="col-sm-6 by-dates">April 18, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/angular/" title="View all posts in AngularJS">AngularJS</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/react-js/" title="View all posts in React.js">React.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/javascript-frameworks-choosing-the-right-one-for-your-projects/" rel="bookmark"><span class="heading-outer"><span class="heading">JavaScript Frameworks: Choosing the Right One for Your Projects</span></span></a></header><p>Choosing the right JavaScript framework or library for your web development projects can be crucial. React, Angular, and Vue.js are three of the most popular choices in this domain, each with its own strengths and use cases. Let’s delve into a comparison of React, Angular, and Vue.js to help you understand their differences and make […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/mahendra-agrawal/" title="View all posts by Mahendra Kumar Agrawal" rel="nofollow">Mahendra Kumar Agrawal</a> <br> </u></div> <div class="col-sm-6 by-dates">April 16, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/react-js/" title="View all posts in React.js">React.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/creating-a-custom-calendar-view-using-react-big-calendar/" rel="bookmark"><span class="heading-outer"><span class="heading">Creating a Custom Calendar View using React Big Calendar</span></span></a></header><p>In the dynamic field of web development, presenting schedules and events in an intuitive and user-friendly manner stands as a pivotal requirement. Enter React Big Calendar, a highly acclaimed scheduler component library renowned for its robust solutions. Offering a plethora of customization options, interactivity, and feature-rich functionalities, React Big Calendar empowers users to effortlessly create […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/akash-patel/" title="View all posts by Akash Patel" rel="nofollow">Akash Patel</a> <br> </u></div> <div class="col-sm-6 by-dates">April 6, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/android/" title="View all posts in Android">Android</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/ios/" title="View all posts in iOS">iOS</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/react-native-for-web/" rel="bookmark"><span class="heading-outer"><span class="heading">React native for Web</span></span></a></header><p>React Native has become a popular framework for building native mobile apps for iOS and Android. But what if you want to extend the reach of your React Native app to the web? Enter React Native for Web, a solution that allows you to leverage your existing React Native codebase to create web applications. This […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/anurag-parihar/" title="View all posts by Anurag Parihar" rel="nofollow">Anurag Parihar</a> <br> </u></div> <div class="col-sm-6 by-dates">March 28, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/mean-2/" title="View all posts in MEAN">MEAN</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/node-js-2/" title="View all posts in Node.js">Node.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/creating-polyfills-for-map-filter-and-reduce-array-methods/" rel="bookmark"><span class="heading-outer"><span class="heading">Creating Polyfills for map, filter, and reduce Array Methods</span></span></a></header><p>In this blog post, we embark on a journey to explore the inner workings of these fundamental array methods and learn how to craft polyfills for them. So, let’s roll up our sleeves and dive into the world of JavaScript polyfills, unlocking the true potential of our favorite programming language. Pollyfill for Array.map() Array.map() syntax: […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/deepesh-agrawal/" title="View all posts by Deepesh Agrawal" rel="nofollow">Deepesh Agrawal</a> <br> </u></div> <div class="col-sm-6 by-dates">March 27, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/react-js/" title="View all posts in React.js">React.js</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/testing-2/" title="View all posts in Testing">Testing</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/getting-started-with-jest-a-beginners-guide/" rel="bookmark"><span class="heading-outer"><span class="heading">Getting started with Jest : A beginner’s guide</span></span></a></header><p>In the always growing web development world, ensuring the reliability and stability of your application is significant. Testing our Web applications is crucial for quality control and catching bugs early in the development process. Jest is an exciting JavaScript testing framework that has become a popular choice for testing React applications due to its simplicity, […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/niharika-arora/" title="View all posts by Niharika Arora" rel="nofollow">Niharika Arora</a> <br> </u></div> <div class="col-sm-6 by-dates">March 26, 2024</div></div> </div></div></div> </div></div><script> var limit = 9, page = 1, type = 'cat', category = '3038', after = '', before = '', max_pages_latest = 6</script> <div class="load_more text-center"> <a href="#" class="btn btn-circle btn-inverse btn-load-more">Load More</a> </div> <script type="text/javascript"> var ajaxUrl = "https://www.tothenew.com/blog/wp-admin/admin-ajax.php"; var page = 1; var ppp = 9; $("#more_posts").on("click",function(){ $("#more_posts").attr("disabled",true); $.post(ajaxUrl, { action:"more_post_ajax", offset: (page * ppp) + 1, ppp: ppp }).success(function(posts){ page++; $(".ajax-posts").append(posts); // CHANGE THIS! $("#more_posts").attr("disabled",false); }); }); </script> </div> </div> </section> <div id="subscribe-blog">  </div> <footer> <div class="gry-bg"> <div class="container"> <div class="footer-menus"> <nav> <div class="f-heading">Who We Are</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/about-us">About</a></li> <li class="menu-item"><a rel="dofollow" href="/leadership">Leadership</a></li> <li class="menu-item"><a href="/partnership" rel="dofollow">Partners</a></li> <li class="menu-item"><a rel="dofollow" href="/press-releases">Press Releases</a></li> <li class="menu-item"><a rel="dofollow" href="/awards">Awards</a></li> <li class="menu-item"><a rel="dofollow" href="/media-coverage">Media Coverage</a></li> <li class="menu-item"><a rel="dofollow" href="/events">Events</a></li> <li class="menu-item"><a href="/our-social-impact" rel="dofollow">CSR</a> </li> <li class="menu-item"><a rel="dofollow" href="/privacy-policy">Privacy Policy</a></li> <li class="menu-item"><a rel="dofollow" href="/modern-slavery-statement">Modern Slavery Statement</a></li> </ul> </nav> <nav> <div class="f-heading">What We Do</div> <ul class="clearfix menu"> <li class="menu-item"><a href="/services" rel="dofollow">Services</a></li> <li class="menu-item"><a href="/technologies"rel="dofollow">Technologies</a></li> <li class="menu-item"><a href="/solutions" rel="dofollow">Solutions</a> </li> <li class="menu-item"><a href="/industries" rel="dofollow">Industries</a> </li> <li class="menu-item"><a rel="dofollow" href="/idanim">Idanim</a></li> </ul> </nav> <nav> <div class="f-heading">Insights</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/success-stories">Success Stories</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=67">Whitepapers</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=66">Webinars</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=652">Podcasts</a></li> <li class="menu-item"><a rel="dofollow" href="/blog/">Blogs</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=62">E-Books</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=162">Magazines</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=574">Spotlight</a></li> </ul> </nav> <nav> <div class="f-heading">Contact Us</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=request-form">Request for Services</a></li> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=join-form">Join us!</a></li> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=media-form">Media Queries</a></li> <li class="menu-item"><a rel="dofollow" href="/careers">Career</a></li> <li class="menu-item"><a rel="dofollow" href="/responsible-disclosure">Responsible Disclosure</a></li> </ul> </nav> </div> <div class="footer-right"> <div class="heading">Connect With Us</div> <div class="social"> <ul> <li class="ln"><a href="https://www.linkedin.com/company/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="twt"><a href="https://twitter.com/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="fb"><a href="https://www.facebook.com/TOTHENEWDigital/" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li>  <li class="Ytube"><a href="https://www.youtube.com/c/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="glassdoor-footer"><a href="https://www.glassdoor.co.in/Overview/Working-at-TO-THE-NEW-EI_IE1011609.11,21.htm" onclick="window.open(this.href);return false;" rel="dofollow">Glassdoor</a></li> </ul> </div> <div class="copyright"> <img alt="ttn logo" src="/cms-assets/s3fs-public/2021-08/ttnweb.svg"><p>©2024 TO THE NEW</p> </div> </div> </div> </div> </footer> <div id="bottom"> <div class="container"> <div class="row"> <div class="col-xs-12 servicesSection"> <div class="heading">Services</div> <span class="bottom-arrow-down"></span> <ul class="clearfix"> <li class="clearfix"> <span>Cloud & DevOps</span> <ul class="clearfix">   <li><a href="/devops-automation-consulting" title="DevOps as a Service">DevOps as a Service</a></li> <li><a href="/devops-aws" title="DevOps on AWS">DevOps on AWS</a></li> <li><a href="/devops-chef-puppet-docker" title="DevOps Tools">DevOps Tools</a></li>  </ul> </li> <li class="clearfix"> <span>Backend Engineering</span> <ul class="clearfix"> <li><a href="/python-development" title="Python Development">Python Development</a></li> <li><a href="/mean-node-js-development-consulting" title="Node.js Development">Node.js Development</a></li> <li><a href="/grails-application-development" title="Grails Development">Grails Development</a></li> <li><a href="/java-development-services" title="Java Development">Java Development</a></li> <li><a href="/mean-stack-web-development-consulting" title="MEAN Development">MEAN Development</a></li>  </ul> </li> <li class="clearfix"> <span>Digital Marketing</span> <ul> <li><a href="/digital-marketing/email-marketing" title="Email Marketing">Email Marketing</a></li> <li><a href="/digital-marketing/search-engine-optimization" title="Search Engine Optimization">Search Engine Optimization</a></li> <li><a href="/digital-marketing/marketing-automation" title="Marketing Automation">Marketing Automation</a></li> <li><a href="/digital-marketing/social-listening" title="Social Listening">Social Listening</a></li> <li><a href="/digital-marketing/digital-analytics" title="">Digital Analytics</a></li> <li><a href="/digital-marketing/analytics" title="Web Analytics">Web Analytics</a></li> <li><a href="/digital-marketing" title="Digital Marketing">Digital Marketing</a></li> <li><a href="/digital-marketing/influencer-marketing" title="Influencer Marketing">Influencer Marketing</a></li> <li><a href="/digital-marketing/content-marketing" title="Content Marketing">Content Marketing</a></li> <li><a href="/digital-marketing/social-media-marketing" title="Social Media Marketing">Social Media Marketing</a></li> <li><a href="/digital-marketing/creative-strategy" title="Creative Strategy">Creative Strategy</a></li> <li><a href="/digital-marketing/digital-campaigns-activations" title="Digital Campaigns and Activations">Digital Campaigns and Activations</a></li> <li><a href="/digital-marketing/media-buying-planning-company" title="Media planning and buying">Media planning and buying</a></li> <li><a href="/digital-marketing/search-marketing" title="Search Marketing">Search Marketing</a></li> <li><a href="/digital-marketing/digital-strategy" title="Digital Strategy">Digital Strategy</a></li> </ul> </li> <li class="clearfix"> <span>Web Content Management</span> <ul class="clearfix"> <li><a href="/wcm/web-content-management-services" title="Web Content Management">Web Content Management</a></li> <li><a href="/wcm/cq-aem-development-consulting" title="AEM Development">AEM Development</a></li> <li><a href="/wcm/drupal-development-consulting-services" title="Drupal Development">Drupal Development</a></li>  </ul> </li> <li class="clearfix"> <span>Digital Transformation</span> <ul> <li><a href="/digital-transformation" title="Digital Transformation">Digital Transformation</a></li> </ul> </li> <li class="clearfix"> <span>Experience Design</span> <ul class="clearfix"> <li><a href="/experience-design" title="Experience Design">Experience Design</a></li> </ul> </li> <li class="clearfix"> <span>Mobility</span> <ul class="clearfix"> <li><a href="/mobile-application-development-services" title="Mobility">Mobility</a></li> <li><a href="/mobile-ios-application-development-services" title="iOS App Development">iOS App Development</a></li> <li><a href="/mobile-android-application-development-services" title="Android Development">Android Development</a></li> <li><a href="/digital-engineering/smart-tv-apps" title="Smart TV App Development">Smart TV App Development</a></li> <li><a href="/testing/automated-mobile-application-testing" title="Mobile Automation Testing">Mobile Automation Testing</a></li> <li><a href="/mobile-hybrid-application-development" title="Hybrid Application Development">Hybrid Application Development</a></li>  </ul> </li> <li class="clearfix"> <span>Frontend Engineering</span> <ul class="clearfix"> <li><a href="/front-end-angularjs-development" title="AngularJS Development">AngularJS Development</a></li> <li><a href="/react-native-development-services" title="React Native Development">React Native Development</a></li> <li><a href="/react-js-development-consulting-company" title="React js Development">React js Development</a></li> </ul> </li>  <li class="clearfix"> <span>Video Solutions</span> <ul class="clearfix"> <li><a href="/digital-video-solutions" title="Video Solutions">Video Solutions</a></li>  <li><a href="/digital-multiscreen-video-solution" title="Multiscreen Solutions">Multiscreen Solutions</a></li> </ul> </li> <li class="clearfix"> <span>Software Development</span> <ul class="clearfix"> <li><a href="/offshore-software-development-company" title="Offshore Software Development">Offshore Software Development</a></li> <li><a href="/outsourced-software-product-development" title="Outsourced Software Product Development">Outsourced Software Product Development</a></li> <li><a href="/custom-software-development-company" title="Custom Software Development">Custom Software Development</a></li> <li><a href="/bespoke-software-development-company" title="Bespoke Software Development">Bespoke Software Development</a></li> </ul> </li> <li class="clearfix"> <span>Web Application Development</span> <ul class="clearfix"> <li><a href="/custom-web-application-development-company" title="Custom Web Application Development">Custom Web Application Development</a></li> <li><a href="/outsource-web-application-development" title="Outsource Web Application Development">Outsource Web Application Development</a></li> </ul> </li> <li class="clearfix"> <span>Development Center</span> <ul class="clearfix"> <li><a href="/offshore-development-center" title="Offshore Development Center">Offshore Development Center</a></li> </ul> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> jQuery('body a').each((index, element) => { if (element.href.match("^http://")) { element.href = element.href.replace('http://', 'https://'); } else if (element.href.match('^www.')) { element.href = 'https://' + element.href; } }) </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/metronet-profile-picture/js/mpp-frontend.js?ver=2.6.0' id='mpp_gutenberg_tabs-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/navigation.js?ver=20140711' id='ttn_new-navigation-js'></script> <script type='text/javascript' id='elastic-search-js-extra'> /* <![CDATA[ */ var ajax_object = {"ajax_url":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php","nonce":"24671607a4"}; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/elastic-search.js' id='elastic-search-js'></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/post-block.js"></script> <script type="text/javascript"> jQuery(document).ajaxComplete(function(){ //for box height var highestBox = 0; jQuery('.latest_posts_wrapper .border .blue-box').each(function(){ if(jQuery(this).height() > highestBox){ highestBox = jQuery(this).height(); } }); jQuery('.latest_posts_wrapper .border .blue-box').height(highestBox); }); jQuery(document).ready(function(){ //for box height var highestBox = 0; jQuery('.latest_posts_wrapper .border .blue-box').each(function(){ if(jQuery(this).height() > highestBox){ highestBox = jQuery(this).height(); } }); jQuery('.latest_posts_wrapper .border .blue-box').height(highestBox); setTimeout(function(){ jQuery("#ap_form_post_content_1-tmce").trigger('click'); }, 2000); }); jQuery(document).ready(function(){ setTimeout(function(){ jQuery("#postcontent-tmce").trigger('click'); }, 2000); }); jQuery(document).ready(function(){ jQuery(function (e) { // jQuery("#cat").selectbox(); // jQuery(".postform").selectbox(); jQuery('.normal .main-cat .heading').click(function () { jQuery(this).siblings().slideToggle(); jQuery(this).parent().toggleClass('active'); jQuery('.overlay-cat').toggleClass('hide'); }); jQuery('.overlay-cat').click(function () { jQuery('.normal .main-cat .heading').parent().removeClass('active'); jQuery('.cat-dropdown').slideUp(); jQuery('.overlay-cat').toggleClass('hide'); }); jQuery('.subscribeButton').click(function(){ //jQuery('body').append(subscribeModal); jQuery("#subModal").modal('show'); //jQuery('.pop').addClass('show'); }); }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { jQuery('.register').find(':submit').click(function(e) { if( ! isGmail( jQuery('#user_email').val() ) ) { e.preventDefault(); if (jQuery('.user-registration .field-user_email .form-row .buisness-error').length<1) { jQuery('.user-registration .field-user_email .form-row').append('<label class="user-registration-error buisness-error">You can only register with an @tothenew.com email address!</label>'); } return false; } else{ jQuery('.user-registration .field-user_email .form-row .buisness-error').remove(); } }); jQuery('#user_email').on("keypress keydown keyup",function(e) { if( ! isGmail( jQuery('#user_email').val() ) ) { if (jQuery('.user-registration .field-user_email .form-row .buisness-error').length<1) { jQuery('.user-registration .field-user_email .form-row').append('<label class="user-registration-error buisness-error">You can only register with an @tothenew.com email address!</label>'); } } else{ jQuery('.user-registration .field-user_email .form-row .buisness-error').remove(); } }); }); function isGmail( address ) { if (address.indexOf("@")>0 && address.indexOf(".")>0) { if (address.substr(address.indexOf(".")+1).length>0) { return address.indexOf("@tothenew.com", this.length - 10) !== -1; } } return true; } jQuery(window).scroll(function(){ var headerHeight = jQuery('#header').innerHeight(); var resource = jQuery('.resources').height(); var suggested = jQuery('.suggested').height(); var totalHeight = headerHeight + resource + suggested + 360; var sticky = jQuery('.white'); var sticky1 = jQuery('.followUs'); scroll = jQuery(window).scrollTop(); if (scroll >= 300){ sticky.addClass('fixed'); jQuery('#blog-section').css('padding-top', '91px'); }else { sticky.removeClass('fixed'); jQuery('#blog-section').css('padding-top', '19px'); } if (scroll >= totalHeight){ var widthS = jQuery('.suggested').width()+31; sticky1.addClass('fixed1'); sticky1.css('width', widthS); }else { sticky1.removeClass('fixed1'); sticky1.css('width', '100%'); } }); jQuery(document).ready(function(){ }); jQuery(document).ready(function(){ bindFooterScroller(); bindLoaderScroller(); jQuery(".year-data").click(function(){ jQuery(this).parents('li').find('.blog-month').slideToggle(); jQuery(this).find('.plus-icon').toggleClass('active'); jQuery(this).parent().siblings().find('.plus-icon').removeClass('active'); jQuery(this).parent().siblings().children().next().slideUp(); return false; }); jQuery('.burger-container').click(function(){ jQuery(this).parent().parent().find('#menu').toggleClass('menu-opened'); }); jQuery('.f-heading').on('click', function () { jQuery(this).parent().toggleClass('visible'); }); var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); if (jQuery(window).width() <= 1024){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '75%'); } if (jQuery(window).width() <= 640){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); } }); jQuery(window).resize(function(){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); if (jQuery(window).width() <= 1024){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '75%'); } if (jQuery(window).width() <= 640){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); } }); $header = jQuery("#header"), $clone = $header.before($header.clone().addClass("clone")); jQuery(window).scroll(function () { jQuery("#header").toggleClass("down", (jQuery(window).scrollTop() > 100)); }) jQuery.fn.scrollStopped = function (callback) { var jQuerythis = jQuery(this), self = this; jQuerythis.scroll(function () { if (jQuerythis.data('scrollTimeout')) { clearTimeout(jQuerythis.data('scrollTimeout')); } jQuerythis.data('scrollTimeout', setTimeout(callback, 250, self)); }); }; function bindFooterScroller() { jQuery(window).scroll(function () { var headerHeight = jQuery('#header').innerHeight(); var sticky1 = jQuery('.followUs'); var sticky = jQuery('.white'); var footerElement = jQuery('#subscribe-blog'); // if (isScrolledIntoView(footerElement)) { // sticky.hide(); // sticky1.hide(); // //jQuery('#blog-section').css('padding-top', '19px'); // } // else { var headerHeight = jQuery('#header').innerHeight(); var resource = jQuery('.resources').height(); var suggested = jQuery('.suggested').height(); var totalHeight = headerHeight + resource + suggested + 360; var sticky1 = jQuery('.followUs'); sticky.show(); sticky1.show(); var sticky = jQuery('.white'); var sticky1 = jQuery('.followUs'); scroll = jQuery(window).scrollTop(); if (scroll >= 300){ jQuery('#blog-section').css('padding-top', '91px'); jQuery('.controls').css('display','block'); }else { //jQuery('#blog-section').css('padding-top', '19px'); jQuery('.controls').css('display','none'); } if (scroll >= totalHeight){ var widthS = jQuery('.suggested').width()+31; sticky1.addClass('fixed1'); sticky1.css('width', widthS); }else { sticky1.removeClass('fixed1'); sticky1.css('width', '100%'); } // } }) } function isScrolledIntoView(jQueryelem) { var docViewTop = jQuery(window).scrollTop() + jQuery(window).height(); var elemTop = jQueryelem.offset().top; return (elemTop <= docViewTop); } function bindLoaderScroller() { jQuery(window).scroll(function () { var loaderElement = jQuery('#loader'); if (isScrolledIntoView1(loaderElement)) { setTimeout(function(){ jQuery(".left-content .border:eq(9), .left-content .border:eq(10), .left-content .border:eq(11), .left-content .border:eq(12), .left-content .border:eq(13), .left-content .border:eq(14), .left-content .border:eq(15), .left-content .border:eq(16),.left-content .border:eq(17), .more-post").fadeIn( "slow" ); jQuery('#loader').fadeOut("slow"); jQuery('.left-content').isotope({ itemSelector: '.border' }); }, 2000); } }) } function isScrolledIntoView1(jQueryelem1) { var docViewTop = jQuery(window).scrollTop() + jQuery(window).height(); var elemTop = jQueryelem1.offset().top; return (elemTop <= docViewTop); } jQuery(window).load(function(){ var Wwidth = jQuery(window).width(); if ((Wwidth <=767)) { var rsW = jQuery('.resources1 .banner-text').innerHeight(); jQuery('.resources1 .overlay img').css('height', rsW); }else{ jQuery('.resources1 .overlay img').css('height', 'auto'); } }); jQuery(window).resize(function(){ var Wwidth = jQuery(window).width(); if ((Wwidth <=767)) { var rsW = jQuery('.resources1 .banner-text').innerHeight(); jQuery('.resources1 .overlay img').css('height', rsW); }else{ jQuery('.resources1 .overlay img').css('height', 'auto'); } }); var bcrumb1; jQuery(document).ready(function(){ var all = []; var s = 0; jQuery('.breadcrumbs li').each(function () { all[s++] = jQuery(this).text().trim(); }); bcrumb1 = all.join('|'); }); </script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "address": { "@type": "PostalAddress", "addressLocality": "New Jersey, USA", "postalCode": "08902-3040", "streetAddress": "1588 US Highway 130 - North Brunswick" }, "name" : "TO THE NEW", "url" : "http://www.tothenew.com", "logo" : "https://www.tothenew.com/blog/wp-content/themes/ttn/images/logo-large.png", "sameAs" : [ "https://www.linkedin.com/company/tothenew", "https://twitter.com/TOTHENEW", "https://www.facebook.com/TOTHENEWDigital/", "https://plus.google.com/+TOTHENEW", "https://www.youtube.com/c/tothenew", "http://www.slideshare.net/tothenewtech", "http://www.slideshare.net/tothenew" ] } </script> <div class="overlay-cat hide"></div> <div class="modal fade" id="subModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="subscribe-popup"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>  <div class="subs-hbsp-form">  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "481864", formId: "7a02d2db-8a8f-44bb-94ac-85b3421eea2d" }); </script> </div> </div> </div> </div> <div id="instructionModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Tips for writing a blog</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <iframe src="https://www.tothenew.com/blog/wp-content/plugins/ttn-blog-enhancements//docs/how-to-write-a-blog.pdf" style="width: 100%; height:500px;" frameborder="0"></iframe> </div> </div> </div> </div> <div id="captionHelpModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Learn how to write a caption</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <iframe src="https://www.tothenew.com/blog/wp-content/plugins/ttn-blog-enhancements//docs/how-to-add-perfect-caption.pdf" style="width: 100%; height:500px;" frameborder="0"></iframe> </div> </div> </div> </div> <script> $(document).ready(function(){ }); </script> </body> </html>

CINXE.COM

Blog posts around React.js | TO THE NEW Blog