{"id":213,"date":"2022-01-05T07:10:10","date_gmt":"2022-01-05T07:10:10","guid":{"rendered":"http:\/\/frontendguruji.com\/?post_type=web-story&#038;p=213"},"modified":"2022-01-09T10:20:35","modified_gmt":"2022-01-09T10:20:35","slug":"how-to-setup-a-react-js-project-from-scratch-without-create-react-app","status":"publish","type":"web-story","link":"https:\/\/frontendguruji.com\/blog\/web-stories\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/","title":{"rendered":"Setup a React JS project from scratch, without Create-React-App"},"content":{"rendered":"<p><html amp=\"\" lang=\"en\"><head><meta charSet=\"utf-8\"\/><meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\"\/><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0.js\"><\/script><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-story-1.0.js\" custom-element=\"amp-story\"><\/script><link href=\"https:\/\/fonts.googleapis.com\/css2?display=swap&amp;family=Anton&amp;family=Roboto\" rel=\"stylesheet\"\/><link href=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png\" rel=\"preload\" as=\"image\"\/>\n<style amp-boilerplate=\"\">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}<\/style>\n<p><noscript><\/p>\n<style amp-boilerplate=\"\">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}<\/style>\n<p><\/noscript><\/p>\n<style amp-custom=\"\">\n              amp-story-page {\n                background-color: #131516;\n              }<\/p>\n<p>              amp-story-grid-layer {\n                overflow: visible;\n              }<\/p>\n<p>              @media (max-aspect-ratio: 9 \/ 16)  {\n                @media (min-aspect-ratio: 320 \/ 678) {\n                  amp-story-grid-layer.grid-layer {\n                    margin-top: calc((100% \/ 0.5625 - 100% \/ 0.6666666666666666) \/ 2);\n                  }\n                }\n              }<\/p>\n<p>              @media not all and (min-resolution:.001dpcm) {\n                @media {\n                  p.text-wrapper > span {\n                    font-size: calc(100% - 0.5px);\n                  }\n                }\n              }<\/p>\n<p>              .page-fullbleed-area,\n              .page-background-overlay-area {\n                position: absolute;\n                overflow: hidden;\n                width: 100%;\n                left: 0;\n                height: calc(1.1851851851851851 * 100%);\n                top: calc((1 - 1.1851851851851851) * 100% \/ 2);\n              }<\/p>\n<p>              .element-overlay-area {\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                top: 0;\n                left: 0;\n              }<\/p>\n<p>              .page-safe-area {\n                overflow: visible;\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                width: 100%;\n                height: calc(0.84375 * 100%);\n                margin: auto 0;\n              }<\/p>\n<p>              .mask {\n                position: absolute;\n                overflow: hidden;\n              }<\/p>\n<p>              .fill {\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n                margin: 0;\n              }<\/p>\n<p>              @media (prefers-reduced-motion: no-preference) {\n                .animation-wrapper {\n                  opacity: var(--initial-opacity);\n                  transform: var(--initial-transform);\n                }\n              }<\/p>\n<p>              .align-bottom {\n                align-content: end;\n                padding: 0;\n              }<\/p>\n<p>              .captions-area {\n                padding: 0 32px 0;\n              }<\/p>\n<p>              amp-story-captions {\n                margin-bottom: 16px;\n                text-align: center;\n              }<\/p>\n<p>              amp-story-captions span {\n                display: inline-block;\n                margin: 0;\n                padding: 6px 12px;\n                vertical-align: middle;\n                border-radius: 15px;\n                background: rgba(11, 11, 11, 0.6);\n                color: rgba(255, 255, 255, 1);\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;;\n                font-size: calc(4 * var(--story-page-vw));\n                line-height: 1.4;\n                word-break: break-word;\n                word-wrap: break-word;\n                overflow-wrap: break-word;\n              }\n              <\/style>\n<p><meta name=\"web-stories-replace-head-start\"\/><title>Setup a React JS project from scratch, without Create-React-App<\/title><link rel=\"canonical\" href=\"http:\/\/frontendguruji.com\/web-stories\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/\"\/><meta name=\"web-stories-replace-head-end\"\/><\/head><body><amp-story standalone=\"\" publisher=\"&amp;lt; FrontendGuruji \/&amp;gt;\" publisher-logo-src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-text-only-1.jpg\" title=\"Setup a React JS project from scratch, without Create-React-App\" poster-portrait-src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-react-poster.jpg\"><amp-story-page id=\"879c0e5f-8293-49a9-a8b6-ee0549922034\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-c3862e11-2205-4804-a0b2-990e8556de3d\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-391b4a50-95a0-4e60-9eaf-98c0dad4de8e\",\"keyframes\":{\"transform\":[\"translate3d(0px, -175.88184%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ecb50b2f-5a8d-439a-a93b-6ce271a0ac22\",\"keyframes\":{\"opacity\":[1,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-0e144566-c0a4-46f5-a9bf-8ca69e6417f5\",\"keyframes\":{\"transform\":[\"scale(3)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-91b66fcf-c5e2-40b4-9ded-681f292f841e [data-leaf-element=\\\"true\\\"]\",\"keyframes\":{\"transform\":[\"translate(23.784681954476543%, 0%) scale(1.5)\",\"translate(0%, 0%) scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-b802c21b-c835-4460-a3c4-d08fa51571e0\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-30b0fdea-cf37-480b-95f4-814dbd062aad\",\"keyframes\":{\"transform\":[\"translate3d(0px, 246.50203%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-f71a8c8b-bd10-453b-80cc-2dfcb5952e39\",\"keyframes\":[{\"transform\":\"rotate(-540deg) scale(0.1)\",\"opacity\":0},{\"transform\":\"none\",\"opacity\":1}],\"delay\":0,\"duration\":1000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\",\"iterations\":1}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-6b8a2760-ec33-47a6-b8a7-3ca1458d0da8\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e6b9b627-87f3-42c3-9f2b-7029e3775635\",\"keyframes\":{\"transform\":[\"translate3d(0px, 463.19479%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#0c1013\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div id=\"anim-91b66fcf-c5e2-40b4-9ded-681f292f841e\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-cf63857c-aab6-4b3e-ab60-0ec0d70fbc62\">\n<div style=\"position:absolute;width:168.56915%;height:100%;left:-1.66667%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png\" alt=\"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png 659w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-284x300.png 284w\" sizes=\"(min-width: 1024px) 76vh, 168vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:21.68285%;width:80.09709%;height:40.7767%;opacity:1\">\n<div id=\"anim-c3862e11-2205-4804-a0b2-990e8556de3d\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-391b4a50-95a0-4e60-9eaf-98c0dad4de8e\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, -175.88184%, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-a3a89bb8-b960-4f06-994d-585888f9e766\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:1.359223em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">SETUP<\/span><br \/>\n<span style=\"color: #faf4ea; text-transform: uppercase\">REACT JS&nbsp;<\/span><br \/>\n<span style=\"color: #faf4ea; text-transform: uppercase\">PROJECT&nbsp;<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:36.77184%;top:-5.33981%;width:29.85437%;height:2.91262%;opacity:1\">\n<div id=\"anim-ecb50b2f-5a8d-439a-a93b-6ce271a0ac22\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:none\">\n<div id=\"anim-0e144566-c0a4-46f5-a9bf-8ca69e6417f5\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(3)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-96020cbe-2b51-4cf9-8fdd-5f78457072fd\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.226537em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:66.18123%;width:76.94175%;height:17.47573%;opacity:1\">\n<div id=\"anim-b802c21b-c835-4460-a3c4-d08fa51571e0\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-30b0fdea-cf37-480b-95f4-814dbd062aad\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 246.50203%, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 1.8518518518518516% 1.8518518518518516% 1.8518518518518516% 1.8518518518518516%\" id=\"el-68dfda35-19d0-46ce-868e-a10d351b885c\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:1.9266315063091484% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.647249em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #61dbfb\">WITHOUT&nbsp;<\/span><br \/>\n<span style=\"color: #61dbfb\">CREATE-REACT-APP<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:28.8835%;top:-1.2945%;width:45.63107%;height:21.35922%;opacity:1\">\n<div id=\"anim-f71a8c8b-bd10-453b-80cc-2dfcb5952e39\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:rotate(-540deg) scale(0.1)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-e8cc4c6c-08ce-48ad-a538-495720d546ef\">\n<div style=\"position:absolute;width:100%;height:100.69841%;left:0%;top:-0.34921%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png\" alt=\"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png 1280w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-1024x724.png 1024w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-768x543.png 768w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-300x212.png 300w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x106.png 150w\" sizes=\"(min-width: 1024px) 21vh, 46vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:85.27508%;width:76.69903%;height:5.17799%;opacity:1\">\n<div id=\"anim-6b8a2760-ec33-47a6-b8a7-3ca1458d0da8\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-e6b9b627-87f3-42c3-9f2b-7029e3775635\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 463.19479%, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6329113924050633% 0.6329113924050633% 0.6329113924050633% 0.6329113924050633% \/ 6.25% 6.25% 6.25% 6.25%\" id=\"el-b9dc2b1a-10f4-4825-9c43-ee92a0ee435f\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:-0.6230221518987342% 0;font-family:&quot;Roboto&quot;,&quot;Helvetica Neue&quot;,&quot;Helvetica&quot;,sans-serif;font-size:0.194175em;line-height:1.5;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff\">LEARN WHAT CREATE-REACT-APP<\/span><br \/>\n<span style=\"color: #fff\">USE UNDER THE HOOD<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-page-outlink layout=\"nodisplay\" cta-image=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1280px-React-icon.svg_.png\" theme=\"light\"><a href=\"http:\/\/frontendguruji.com\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/\" rel=\"\">Learn more<\/a><\/amp-story-page-outlink><\/amp-story-page><amp-story-page id=\"49155031-9de3-4b88-b68e-15656d874741\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-dc773c8a-5546-40be-8ca1-9126280b7773\",\"keyframes\":{\"transform\":[\"translate3d(111.21212%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-f7887fcd-074a-43cb-a263-93231134763b\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-c9bf45b6-8962-4517-bd28-9797b40f01b9\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ad9a4128-b424-44fc-ab51-b799ebfadd90\",\"keyframes\":{\"opacity\":[1,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ffd681ce-714b-49c2-a70b-4c7033749e13\",\"keyframes\":{\"transform\":[\"scale(3)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-6c9bb0e1-e1c9-48b8-88b3-5b4e6e6e3db9\",\"keyframes\":{\"transform\":[\"translate3d(111.21212%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-96146c86-5dc8-40c6-b095-1470832b804c\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-b371a6bb-5a17-4429-b034-23ff79a32ac1\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-46f00e3c-a701-4156-9194-d550781317db\",\"keyframes\":{\"transform\":[\"translate3d(-116.40379%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-dc2d379e-8bcc-45c8-97b9-c2d43baa5ff3\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-4e18e918-89d4-4f08-a0b3-3f98517aaeea\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-261eb0cd-be12-4027-9e0e-b4ecc243315d\",\"keyframes\":{\"transform\":[\"translate3d(-116.40379%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-7fb58ff5-5021-40a9-b577-2f77a24691e6\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-b5a997c8-b905-4376-a20f-ac6439250337\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-abf9db4c-6927-4d7c-a7fa-e2a1ea41d97a\",\"keyframes\":{\"transform\":[\"translate3d(-116.40379%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-3186c1cc-f2a2-471e-99fb-8e9e5311e8bd\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-3e798da6-5509-45eb-b134-2d4d45490b4a\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-25d337ce-c1ae-4a08-9c02-5f77b6f6dc67\",\"keyframes\":[{\"transform\":\"rotate(-540deg) scale(0.1)\",\"opacity\":0},{\"transform\":\"none\",\"opacity\":1}],\"delay\":0,\"duration\":1000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\",\"iterations\":1}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-636ef19b-ab26-4018-82cd-4b75b5c79bbd\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-148d57ef-f69f-4316-97f9-bddd115e854c\",\"keyframes\":{\"transform\":[\"translate3d(111.21212%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-0333ae86-a546-4123-9152-aeb43c29d34a\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e99c7e45-abf3-43e5-a082-d0927781f823\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#0c1013\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-6662b726-7a3b-40c4-94e3-4008f2d3406a\">\n<div style=\"position:absolute;width:168.56915%;height:100%;left:-0.95124%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png\" alt=\"How to setup a React JS project from scratch (without Create React App) (React Router v6)\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png 659w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-284x300.png 284w\" sizes=\"(min-width: 1024px) 76vh, 168vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:10.92233%;top:51.61812%;width:80.09709%;height:7.28155%;opacity:1\">\n<div id=\"anim-dc773c8a-5546-40be-8ca1-9126280b7773\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(111.21212%, 0px, 0)\">\n<div id=\"anim-f7887fcd-074a-43cb-a263-93231134763b\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-c9bf45b6-8962-4517-bd28-9797b40f01b9\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-fba6d0f2-61d3-453c-8b97-f7625d81dde9\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #61dbfb; text-transform: uppercase\">REACT V17<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:36.04369%;top:-5.33981%;width:29.85437%;height:2.91262%;opacity:1\">\n<div id=\"anim-ad9a4128-b424-44fc-ab51-b799ebfadd90\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:none\">\n<div id=\"anim-ffd681ce-714b-49c2-a70b-4c7033749e13\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(3)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-ebdc8438-52fe-44f0-b31a-58167f2af89f\"><a href=\"http:\/\/frontendguruji.com\" data-tooltip-icon=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg\" data-tooltip-text=\"Exploring What, Why &amp; How of Frontend - &lt; FrontendGuruji \/&gt;\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.226537em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span><\/span><\/p>\n<p><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.62136%;top:61.16505%;width:76.94175%;height:11.00324%;opacity:1\">\n<div id=\"anim-261eb0cd-be12-4027-9e0e-b4ecc243315d\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-116.40379%, 0px, 0)\">\n<div id=\"anim-7fb58ff5-5021-40a9-b577-2f77a24691e6\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-b5a997c8-b905-4376-a20f-ac6439250337\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 2.941176470588235% 2.941176470588235% 2.941176470588235% 2.941176470588235%\" id=\"el-1fc1a8b6-31bc-4c39-b933-a984adb652d1\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:2.1674604445977916% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff\">REACT ROUTER V6<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:10.92233%;top:72.3301%;width:80.09709%;height:7.28155%;opacity:1\">\n<div id=\"anim-6c9bb0e1-e1c9-48b8-88b3-5b4e6e6e3db9\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(111.21212%, 0px, 0)\">\n<div id=\"anim-96146c86-5dc8-40c6-b095-1470832b804c\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-b371a6bb-5a17-4429-b034-23ff79a32ac1\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-619622f6-f9d5-42aa-bc47-123b5c2d93a8\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #61dbfb; text-transform: uppercase\">webpack v5<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.62136%;top:81.22977%;width:76.94175%;height:11.00324%;opacity:1\">\n<div id=\"anim-abf9db4c-6927-4d7c-a7fa-e2a1ea41d97a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-116.40379%, 0px, 0)\">\n<div id=\"anim-3186c1cc-f2a2-471e-99fb-8e9e5311e8bd\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-3e798da6-5509-45eb-b134-2d4d45490b4a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 2.941176470588235% 2.941176470588235% 2.941176470588235% 2.941176470588235%\" id=\"el-7a925e55-de85-4a28-82a0-d42807151726\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:2.1674604445977916% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff\">scss<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.62136%;top:40.45307%;width:76.94175%;height:11.00324%;opacity:1\">\n<div id=\"anim-46f00e3c-a701-4156-9194-d550781317db\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-116.40379%, 0px, 0)\">\n<div id=\"anim-dc2d379e-8bcc-45c8-97b9-c2d43baa5ff3\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-4e18e918-89d4-4f08-a0b3-3f98517aaeea\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 2.941176470588235% 2.941176470588235% 2.941176470588235% 2.941176470588235%\" id=\"el-262f5121-2d77-4561-a417-8a73cb3b6851\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:2.1674604445977916% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff\">NODE V17<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:25%;top:-2.42718%;width:51.94175%;height:24.43366%;opacity:1\">\n<div id=\"anim-25d337ce-c1ae-4a08-9c02-5f77b6f6dc67\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:rotate(-540deg) scale(0.1)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-318df5da-551b-4b54-aed8-7b975575efd0\">\n<div style=\"position:absolute;width:100%;height:100.20177%;left:0%;top:-0.10089%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png\" alt=\"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png 1280w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-1024x724.png 1024w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-768x543.png 768w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-300x212.png 300w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x106.png 150w\" sizes=\"(min-width: 1024px) 23vh, 52vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:10.92233%;top:22.16828%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-636ef19b-ab26-4018-82cd-4b75b5c79bbd\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-867c5b0d-c634-4d0c-85c3-7b073dbbcea9\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">what will you use?<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:10.92233%;top:30.90615%;width:80.09709%;height:7.28155%;opacity:1\">\n<div id=\"anim-148d57ef-f69f-4316-97f9-bddd115e854c\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(111.21212%, 0px, 0)\">\n<div id=\"anim-0333ae86-a546-4123-9152-aeb43c29d34a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-e99c7e45-abf3-43e5-a082-d0927781f823\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-f5d11a01-3bb4-4b37-a3c4-23c0192ef26a\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #61dbfb; text-transform: uppercase\">NPM<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-page-outlink layout=\"nodisplay\" cta-image=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1280px-React-icon.svg_.png\"><a href=\"http:\/\/frontendguruji.com\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/\" rel=\"\">Learn more<\/a><\/amp-story-page-outlink><\/amp-story-page><amp-story-page id=\"2ea0b730-26e4-421d-952f-7cb62387f0f8\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-bb51907d-aea4-46cd-8a89-b3c2ee7306a9\",\"keyframes\":{\"transform\":[\"translate3d(112.57575%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-cba4bed7-ede9-4992-a1bd-44cc7bbcdebb\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-33ca09b4-f434-48bc-a14e-a1e270749764\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-eee8e0f5-ed6f-49fe-8c67-575da29fbb25\",\"keyframes\":{\"opacity\":[1,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-94c53c3f-bda2-4308-9b13-4e44795c4cdc\",\"keyframes\":{\"transform\":[\"scale(3)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-00b086d2-fafe-4829-9fd1-968f8d99ce57\",\"keyframes\":{\"transform\":[\"translate3d(-114.8265%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e04cd12f-f5b8-4090-afb7-be1103d175a7\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-b1f9190d-ee2b-4389-8805-ccf0a34b87cc\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-6c5294bb-8ccf-4010-9d36-c2cf2b3aa1f5\",\"keyframes\":{\"transform\":[\"translate3d(112.57575%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-6d0e23f6-663f-40d7-8276-ac384f6874dd\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-450c2cc5-c1da-450b-97cc-d310b218b152\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-efda6ab8-cbe9-4b83-bf26-0cc6d920985c\",\"keyframes\":{\"transform\":[\"translate3d(-114.8265%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-8f086fcf-d8db-4edb-ac20-4cf9bea8105c\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-df0a2e9e-a26a-45f5-b3a0-4ebfe66327c7\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-a1bfd005-1909-45c7-a2a9-d1be234f879e\",\"keyframes\":{\"transform\":[\"translate3d(-114.8265%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-0f3f5621-fea0-4e0f-9eb1-c1dc4efea218\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-bb0bde33-869b-40bd-862c-162b4daa6353\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e1a08ff7-141e-4be3-8b2d-ad9207fe8af6\",\"keyframes\":{\"transform\":[\"translate3d(112.57575%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-af1bb952-0454-4920-8be5-f9263c60f7fb\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-9f64707b-171a-4994-87f6-1c8d4f1a6ef1\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-0dee5c3e-b480-4f3c-8ccd-0ae501f51590\",\"keyframes\":{\"transform\":[\"translate3d(112.57575%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-5b3a5a1f-5826-4f1a-861f-856fcea7e3ed\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-f0d560bb-c18a-43c4-b23b-91f764ae36d8\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ebd54bae-65ca-4b30-9d72-9cb4ea867d17\",\"keyframes\":[{\"transform\":\"rotate(-540deg) scale(0.1)\",\"opacity\":0},{\"transform\":\"none\",\"opacity\":1}],\"delay\":0,\"duration\":1000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\",\"iterations\":1}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#0c1013\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-d385bdcb-3561-430c-b244-190bae27a398\">\n<div style=\"position:absolute;width:168.56915%;height:100%;left:-0.95124%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png\" alt=\"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png 659w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-284x300.png 284w\" sizes=\"(min-width: 1024px) 76vh, 168vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:9.8301%;top:50.16181%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-bb51907d-aea4-46cd-8a89-b3c2ee7306a9\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(112.57575%, 0px, 0)\">\n<div id=\"anim-cba4bed7-ede9-4992-a1bd-44cc7bbcdebb\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-33ca09b4-f434-48bc-a14e-a1e270749764\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-a44426ad-9556-4e9e-b0f5-8e0f32f2b1c7\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">Add Dependencies<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:34.95146%;top:-5.33981%;width:29.85437%;height:2.91262%;opacity:1\">\n<div id=\"anim-eee8e0f5-ed6f-49fe-8c67-575da29fbb25\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:none\">\n<div id=\"anim-94c53c3f-bda2-4308-9b13-4e44795c4cdc\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(3)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-ba66ad63-bcb9-4920-b666-979781928b34\"><a href=\"http:\/\/frontendguruji.com\" data-tooltip-icon=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg\" data-tooltip-text=\"Exploring What, Why &amp; How of Frontend - &lt; FrontendGuruji \/&gt;\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.226537em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span><\/span><\/p>\n<p><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.40777%;top:58.09061%;width:76.94175%;height:8.57605%;opacity:1\">\n<div id=\"anim-00b086d2-fafe-4829-9fd1-968f8d99ce57\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-114.8265%, 0px, 0)\">\n<div id=\"anim-e04cd12f-f5b8-4090-afb7-be1103d175a7\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-b1f9190d-ee2b-4389-8805-ccf0a34b87cc\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 3.7735849056603774% 3.7735849056603774% 3.7735849056603774% 3.7735849056603774%\" id=\"el-77dec8b0-174f-4eb4-af5f-7fe9c5ded752\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:1.6858025680205047% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #61dbfb; text-transform: uppercase\">CreatE React App<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:9.8301%;top:66.50485%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-6c5294bb-8ccf-4010-9d36-c2cf2b3aa1f5\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(112.57575%, 0px, 0)\">\n<div id=\"anim-6d0e23f6-663f-40d7-8276-ac384f6874dd\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-450c2cc5-c1da-450b-97cc-d310b218b152\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-d59d9175-1111-482d-a5ba-bd29ce96122f\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">ConfigurE Webpack<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.40777%;top:41.26214%;width:76.94175%;height:8.57605%;opacity:1\">\n<div id=\"anim-efda6ab8-cbe9-4b83-bf26-0cc6d920985c\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-114.8265%, 0px, 0)\">\n<div id=\"anim-8f086fcf-d8db-4edb-ac20-4cf9bea8105c\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-df0a2e9e-a26a-45f5-b3a0-4ebfe66327c7\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 3.7735849056603774% 3.7735849056603774% 3.7735849056603774% 3.7735849056603774%\" id=\"el-34b67101-91f1-4d0c-9064-e4b8386b526b\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:1.6858025680205047% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #61dbfb; text-transform: uppercase\">Initialize a folder<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.40777%;top:73.94822%;width:76.94175%;height:8.57605%;opacity:1\">\n<div id=\"anim-a1bfd005-1909-45c7-a2a9-d1be234f879e\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-114.8265%, 0px, 0)\">\n<div id=\"anim-0f3f5621-fea0-4e0f-9eb1-c1dc4efea218\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-bb0bde33-869b-40bd-862c-162b4daa6353\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 3.7735849056603774% 3.7735849056603774% 3.7735849056603774% 3.7735849056603774%\" id=\"el-620effd9-a5b7-4f5e-8370-49feb1efe83d\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:1.6858025680205047% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #61dbfb; text-transform: uppercase\">ADD commands<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:9.8301%;top:24.43366%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-e1a08ff7-141e-4be3-8b2d-ad9207fe8af6\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(112.57575%, 0px, 0)\">\n<div id=\"anim-af1bb952-0454-4920-8be5-f9263c60f7fb\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-9f64707b-171a-4994-87f6-1c8d4f1a6ef1\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-906482bb-dfd5-4e8a-a0b4-3c54477b1b49\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">What you will learn?<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:9.8301%;top:82.68608%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-0dee5c3e-b480-4f3c-8ccd-0ae501f51590\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(112.57575%, 0px, 0)\">\n<div id=\"anim-5b3a5a1f-5826-4f1a-861f-856fcea7e3ed\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-f0d560bb-c18a-43c4-b23b-91f764ae36d8\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-6f69a79f-ab61-4c98-b0ec-d0ada6c04552\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">build the project<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:25%;top:-2.26537%;width:51.94175%;height:24.43366%;opacity:1\">\n<div id=\"anim-ebd54bae-65ca-4b30-9d72-9cb4ea867d17\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:rotate(-540deg) scale(0.1)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-9402f6f2-623a-4616-956c-9a905be3cd4d\">\n<div style=\"position:absolute;width:100%;height:100.20177%;left:0%;top:-0.10089%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png\" alt=\"How to setup a React JS project from scratch (without Create React App) (React Router v6)\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png 1280w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-1024x724.png 1024w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-768x543.png 768w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-300x212.png 300w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x106.png 150w\" sizes=\"(min-width: 1024px) 23vh, 52vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-page-outlink layout=\"nodisplay\" cta-image=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1280px-React-icon.svg_.png\"><a href=\"http:\/\/frontendguruji.com\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/\" rel=\"\">Learn more<\/a><\/amp-story-page-outlink><\/amp-story-page><amp-story-page id=\"9783e137-4bd8-4857-beac-98470ec3e822\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-98c296f2-2d1b-449c-bcdd-38e64a8d52ae\",\"keyframes\":{\"opacity\":[1,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-501951b2-88d9-47ad-a557-9e59eebd8990\",\"keyframes\":{\"transform\":[\"scale(3)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-17c8bbfe-8ab7-4988-99ef-0e48dbd299b4\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-20e61225-85ab-422c-9953-94e91acb35aa\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-936dab6b-78b8-42fa-83a4-696b5c525e9b\",\"keyframes\":[{\"transform\":\"rotate(-540deg) scale(0.1)\",\"opacity\":0},{\"transform\":\"none\",\"opacity\":1}],\"delay\":0,\"duration\":1000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\",\"iterations\":1}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#0c1013\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-1b5eb9f0-39be-4885-9aa4-7dda0f090806\">\n<div style=\"position:absolute;width:168.56915%;height:100%;left:-0.95124%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png\" alt=\"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png 659w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-284x300.png 284w\" sizes=\"(min-width: 1024px) 76vh, 168vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:35.07282%;top:-5.33981%;width:29.85437%;height:2.91262%;opacity:1\">\n<div id=\"anim-98c296f2-2d1b-449c-bcdd-38e64a8d52ae\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:none\">\n<div id=\"anim-501951b2-88d9-47ad-a557-9e59eebd8990\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(3)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-87c305b7-6544-434e-9fff-b365e716acd3\"><a href=\"http:\/\/frontendguruji.com\" data-tooltip-icon=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg\" data-tooltip-text=\"Exploring What, Why &amp; How of Frontend - &lt; FrontendGuruji \/&gt;\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.226537em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span><\/span><\/p>\n<p><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:29.97573%;top:48.38188%;width:40.04854%;height:3.07443%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:1.2121212121212122% 1.2121212121212122% 1.2121212121212122% 1.2121212121212122% \/ 10.526315789473683% 10.526315789473683% 10.526315789473683% 10.526315789473683%\" id=\"el-f380b71e-1092-4459-8433-b3f7e16ada6a\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:-1.6107954545454537% 0;font-family:&quot;Roboto&quot;,&quot;Helvetica Neue&quot;,&quot;Helvetica&quot;,sans-serif;font-size:0.262136em;line-height:1.5;text-align:center;padding:0;color:#000000\"><span>Fill in some text<\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:14.07767%;top:23.78641%;width:72.08738%;height:65.53398%;opacity:1\">\n<div id=\"anim-17c8bbfe-8ab7-4988-99ef-0e48dbd299b4\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-20e61225-85ab-422c-9953-94e91acb35aa\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6734006734006733% 0.6734006734006733% 0.6734006734006733% 0.6734006734006733% \/ 0.49382716049382713% 0.49382716049382713% 0.49382716049382713% 0.49382716049382713%\" id=\"el-caa0c1d8-48ae-412b-b919-45ea84213bca\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0.027126736111111112% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.485437em;line-height:1.5;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">React JS project can be setup using only one command.<\/span><\/p>\n<p><span style=\"color: #fff; text-transform: uppercase\">But this tutorial will do it hard way, to help you see what&nbsp;<\/span><br \/>\n<span style=\"color: #fff; text-transform: uppercase\">create-react-app&nbsp;<\/span><br \/>\n<span style=\"color: #fff; text-transform: uppercase\">use under the hood.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:25%;top:-2.26537%;width:51.94175%;height:24.43366%;opacity:1\">\n<div id=\"anim-936dab6b-78b8-42fa-83a4-696b5c525e9b\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:rotate(-540deg) scale(0.1)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-621bfa36-e400-40df-9742-abe8b9e9b9f9\">\n<div style=\"position:absolute;width:100%;height:100.20177%;left:0%;top:-0.10089%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png\" alt=\"How to setup a React JS project from scratch (without Create React App) (React Router v6)\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png 1280w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-1024x724.png 1024w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-768x543.png 768w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-300x212.png 300w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x106.png 150w\" sizes=\"(min-width: 1024px) 23vh, 52vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-page-outlink layout=\"nodisplay\" cta-image=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1280px-React-icon.svg_.png\"><a href=\"http:\/\/frontendguruji.com\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/\" rel=\"\">Learn more<\/a><\/amp-story-page-outlink><\/amp-story-page><\/amp-story><\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to setup react project without create-react-app and also how to configure webpack, configure babel, configure Webpack loaders and plugins and add build commands.<\/p>\n","protected":false},"author":1,"featured_media":270,"template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","web_stories_products":[],"web_stories_publisher_logo":218,"web_stories_poster":[]},"web_story_category":[68,59,69,71,67],"web_story_tag":[64,62,61,60,65,70,66,63],"story_data":{"version":36,"pages":[{"elements":[{"x":0,"y":-56,"width":703,"height":742,"type":"image","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"cf63857c-aab6-4b3e-ab60-0ec0d70fbc62","basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9","scale":100,"focalX":30.65013277693475,"focalY":50,"resource":{"baseColor":"#0c1013","type":"image","mimeType":"image\/png","creationDate":"2021-12-28T14:21:57","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png","width":659,"height":695,"id":91,"alt":"","sizes":{"medium":{"file":"image-5-284x300.png","width":284,"height":300,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-284x300.png"},"thumbnail":{"file":"image-5-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-150x150.png"},"full":{"file":"image-5.png","width":659,"height":695,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false,"provider":"local"},"overlay":{"color":{"r":0,"g":0,"b":0,"a":0.5}},"alt":"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app"},{"x":48,"y":134,"width":330,"height":252,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","id":"a3a89bb8-b960-4f06-994d-585888f9e766","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">SETUP<\/span>\n<span style=\"color: #faf4ea; text-transform: uppercase\">REACT JS&nbsp;<\/span>\n<span style=\"color: #faf4ea; text-transform: uppercase\">PROJECT&nbsp;<\/span>","fontSize":84,"padding":{"horizontal":0,"vertical":0},"basedOn":"4e256c35-5e30-45f5-9095-d8ce0a230b21","link":null},{"x":151.5,"y":-33,"width":123,"height":18,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"basedOn":"b8f9eb9a-5007-4642-aca3-750cdb7c7463","id":"96020cbe-2b51-4cf9-8fdd-5f78457072fd","content":"<span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span>","fontSize":14,"padding":{"horizontal":0,"vertical":0}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":null,"vertical":null},"type":"text","content":"<span style=\"color: #61dbfb\">WITHOUT&nbsp;<\/span>\n<span style=\"color: #61dbfb\">CREATE-REACT-APP<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":48,"y":409,"width":317,"height":108,"scale":100,"focalX":50,"focalY":50,"id":"68dfda35-19d0-46ce-868e-a10d351b885c"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#64dcfc","type":"image","mimeType":"image\/png","creationDate":1641371455000,"src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png","width":1280,"height":905,"id":232,"alt":"How to setup a React JS project from scratch (without Create React App) (React Router v6)","sizes":{"medium":{"file":"1280px-React-icon.svg_-300x212.png","width":300,"height":212,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-300x212.png"},"large":{"file":"1280px-React-icon.svg_-1024x724.png","width":1024,"height":724,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-1024x724.png"},"thumbnail":{"file":"1280px-React-icon.svg_-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x150.png"},"medium_large":{"file":"1280px-React-icon.svg_-768x543.png","width":768,"height":543,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-768x543.png"},"web-stories-poster-portrait":{"file":"1280px-React-icon.svg_-640x853.png","width":640,"height":853,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-640x853.png"},"web-stories-publisher-logo":{"file":"1280px-React-icon.svg_-96x96.png","width":96,"height":96,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-96x96.png"},"web-stories-thumbnail":{"file":"1280px-React-icon.svg_-150x106.png","width":150,"height":106,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x106.png"},"full":{"file":"1280px-React-icon.svg_.png","width":1280,"height":905,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":119,"y":-8,"width":188,"height":132,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"e8cc4c6c-08ce-48ad-a538-495720d546ef","alt":"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto","weights":[100,300,400,500,700,900],"styles":["italic","regular"],"variants":[[0,100],[0,300],[0,400],[0,500],[0,700],[0,900],[1,100],[1,300],[1,400],[1,500],[1,700],[1,900]],"fallbacks":["Helvetica Neue","Helvetica","sans-serif"],"service":"fonts.google.com","metrics":{"upm":2048,"asc":1900,"des":-500,"tAsc":1536,"tDes":-512,"tLGap":102,"wAsc":1946,"wDes":512,"xH":1082,"capH":1456,"yMin":-555,"yMax":2163,"hAsc":1900,"hDes":-500,"lGap":0}},"fontSize":12,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.5,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":null,"vertical":null},"type":"text","content":"<span style=\"color: #fff\">LEARN WHAT CREATE-REACT-APP<\/span>\n<span style=\"color: #fff\">USE UNDER THE HOOD<\/span>","fontWeight":400,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":48,"y":527,"width":316,"height":32,"scale":100,"focalX":50,"focalY":50,"id":"b9dc2b1a-10f4-4825-9c43-ee92a0ee435f"}],"animations":[{"id":"ecd6998e-de8b-432e-b58e-54318798067e","type":"effect-fly-in","flyInDir":"topToBottom","duration":600,"delay":0,"targets":["a3a89bb8-b960-4f06-994d-585888f9e766"]},{"id":"7ca9f160-157a-462c-a143-2cd7bd33a1ff","type":"effect-zoom","targets":["96020cbe-2b51-4cf9-8fdd-5f78457072fd"],"scaleDirection":"scaleOut","duration":500,"delay":0},{"id":"579154a7-f334-45e8-aaaf-56d960e37400","type":"effect-background-zoom","targets":["cf63857c-aab6-4b3e-ab60-0ec0d70fbc62"],"zoomDirection":"scaleOut","duration":500,"delay":0},{"id":"c1d06078-985a-4a83-9146-db7c68aec5be","type":"effect-fly-in","flyInDir":"bottomToTop","duration":600,"delay":0,"targets":["68dfda35-19d0-46ce-868e-a10d351b885c"]},{"id":"edce4b0e-5173-4a9f-b1ed-7d1040598703","type":"effect-twirl-in","duration":1000,"delay":0,"targets":["e8cc4c6c-08ce-48ad-a538-495720d546ef"]},{"id":"894526bf-3b24-4b9d-9585-d7f00183c447","type":"effect-fly-in","flyInDir":"bottomToTop","duration":600,"delay":0,"targets":["b9dc2b1a-10f4-4825-9c43-ee92a0ee435f"]}],"type":"page","id":"879c0e5f-8293-49a9-a8b6-ee0549922034","backgroundOverlay":"none","backgroundColor":{"color":{"r":33,"g":31,"b":30}},"pageTemplateType":"cover","defaultBackgroundElement":{"x":90,"y":79,"width":128,"height":128,"type":"shape","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"595cb755-261f-485f-a058-66b8593c0512","isDefaultBackground":true,"basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9"},"pageAttachment":{"url":"http:\/\/frontendguruji.com\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/","icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1280px-React-icon.svg_.png","needsProxy":false,"theme":"light"}},{"elements":[{"x":0,"y":-56,"width":703,"height":742,"type":"image","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"6662b726-7a3b-40c4-94e3-4008f2d3406a","basedOn":"cf63857c-aab6-4b3e-ab60-0ec0d70fbc62","scale":100,"focalX":30.22572078907434,"focalY":50,"resource":{"baseColor":"#0c1013","type":"image","mimeType":"image\/png","creationDate":"2021-12-28T14:21:57","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png","width":659,"height":695,"id":91,"alt":"","sizes":{"medium":{"file":"image-5-284x300.png","width":284,"height":300,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-284x300.png"},"thumbnail":{"file":"image-5-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-150x150.png"},"full":{"file":"image-5.png","width":659,"height":695,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false,"provider":"local"},"overlay":{"color":{"r":0,"g":0,"b":0,"a":0.5}},"alt":"How to setup a React JS project from scratch (without Create React App) (React Router v6)"},{"x":45,"y":319,"width":330,"height":45,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","id":"fba6d0f2-61d3-453c-8b97-f7625d81dde9","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #61dbfb; text-transform: uppercase\">REACT V17<\/span>","fontSize":45,"padding":{"horizontal":0,"vertical":0},"basedOn":"a3a89bb8-b960-4f06-994d-585888f9e766","link":null},{"x":148.5,"y":-33,"width":123,"height":18,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"basedOn":"96020cbe-2b51-4cf9-8fdd-5f78457072fd","id":"ebdc8438-52fe-44f0-b31a-58167f2af89f","content":"<span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span>","fontSize":14,"padding":{"horizontal":0,"vertical":0},"link":{"needsProxy":false,"url":"http:\/\/frontendguruji.com","rel":["noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer"],"icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg","desc":"Exploring What, Why & How of Frontend - < FrontendGuruji \/>"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":45,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">REACT ROUTER V6<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":52,"y":378,"width":317,"height":68,"scale":100,"focalX":50,"focalY":50,"id":"1fc1a8b6-31bc-4c39-b933-a984adb652d1","basedOn":"68dfda35-19d0-46ce-868e-a10d351b885c","link":null},{"x":45,"y":447,"width":330,"height":45,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #61dbfb; text-transform: uppercase\">webpack v5<\/span>","fontSize":45,"padding":{"horizontal":0,"vertical":0},"basedOn":"fba6d0f2-61d3-453c-8b97-f7625d81dde9","id":"619622f6-f9d5-42aa-bc47-123b5c2d93a8","link":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":45,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">scss<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":52,"y":502,"width":317,"height":68,"scale":100,"focalX":50,"focalY":50,"basedOn":"1fc1a8b6-31bc-4c39-b933-a984adb652d1","id":"7a925e55-de85-4a28-82a0-d42807151726"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":45,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">NODE V17<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":52,"y":250,"width":317,"height":68,"scale":100,"focalX":50,"focalY":50,"basedOn":"1fc1a8b6-31bc-4c39-b933-a984adb652d1","id":"262f5121-2d77-4561-a417-8a73cb3b6851"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":null,"type":"image","mimeType":"image\/png","creationDate":"2022-01-05T08:30:55","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png","width":1280,"height":905,"id":232,"alt":"How to setup a React JS project from scratch (without Create React App) (React Router v6)","sizes":{"medium":{"file":"1280px-React-icon.svg_-300x212.png","width":300,"height":212,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-300x212.png"},"large":{"file":"1280px-React-icon.svg_-1024x724.png","width":1024,"height":724,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-1024x724.png"},"thumbnail":{"file":"1280px-React-icon.svg_-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x150.png"},"medium_large":{"file":"1280px-React-icon.svg_-768x543.png","width":768,"height":543,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-768x543.png"},"web-stories-poster-portrait":{"file":"1280px-React-icon.svg_-640x853.png","width":640,"height":853,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-640x853.png"},"web-stories-publisher-logo":{"file":"1280px-React-icon.svg_-96x96.png","width":96,"height":96,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-96x96.png"},"web-stories-thumbnail":{"file":"1280px-React-icon.svg_-150x106.png","width":150,"height":106,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x106.png"},"full":{"file":"1280px-React-icon.svg_.png","width":1280,"height":905,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":103,"y":-15,"width":214,"height":151,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"318df5da-551b-4b54-aed8-7b975575efd0","alt":"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app"},{"x":45,"y":137,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">what will you use?<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"906482bb-dfd5-4e8a-a0b4-3c54477b1b49","id":"867c5b0d-c634-4d0c-85c3-7b073dbbcea9","link":null},{"x":45,"y":191,"width":330,"height":45,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #61dbfb; text-transform: uppercase\">NPM<\/span>","fontSize":45,"padding":{"horizontal":0,"vertical":0},"basedOn":"fba6d0f2-61d3-453c-8b97-f7625d81dde9","id":"f5d11a01-3bb4-4b37-a3c4-23c0192ef26a","link":null}],"animations":[{"id":"b1bfa375-2853-4c2b-94d0-d2cbae03dc44","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0,"targets":["fba6d0f2-61d3-453c-8b97-f7625d81dde9"]},{"id":"8f27aae7-ea8a-42a2-b0b8-1697937fa09a","type":"effect-zoom","targets":["ebdc8438-52fe-44f0-b31a-58167f2af89f"],"scaleDirection":"scaleOut","duration":500,"delay":0},{"id":"5bfe1270-2303-4130-89ed-b5674b1a3360","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0,"targets":["619622f6-f9d5-42aa-bc47-123b5c2d93a8"]},{"id":"f1904c1e-8042-48f6-b66c-801f6bd7701b","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["262f5121-2d77-4561-a417-8a73cb3b6851"]},{"id":"964ffce0-c2e3-4aa0-831e-88da7b3d96f0","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["1fc1a8b6-31bc-4c39-b933-a984adb652d1"]},{"id":"e9992bcb-3250-4e53-9305-9c89f54d80ec","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["7a925e55-de85-4a28-82a0-d42807151726"]},{"id":"36d46245-dbad-4d08-a7d9-8650717d73b1","type":"effect-twirl-in","duration":1000,"delay":0,"targets":["318df5da-551b-4b54-aed8-7b975575efd0"]},{"id":"61c0def4-74ba-49a6-b0ca-21ae0293f262","type":"effect-fade-in","duration":600,"delay":0,"targets":["867c5b0d-c634-4d0c-85c3-7b073dbbcea9"]},{"targets":["f5d11a01-3bb4-4b37-a3c4-23c0192ef26a"],"id":"0d47f29a-039d-4ef0-8537-d61cc54d41ee","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0}],"type":"page","id":"49155031-9de3-4b88-b68e-15656d874741","backgroundOverlay":"none","backgroundColor":{"color":{"r":33,"g":31,"b":30}},"pageTemplateType":"cover","defaultBackgroundElement":{"x":90,"y":79,"width":128,"height":128,"type":"shape","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"595cb755-261f-485f-a058-66b8593c0512","isDefaultBackground":true,"basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9"},"pageAttachment":{"url":"http:\/\/frontendguruji.com\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/","icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1280px-React-icon.svg_.png","needsProxy":false}},{"elements":[{"x":0,"y":-56,"width":703,"height":742,"type":"image","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"d385bdcb-3561-430c-b244-190bae27a398","basedOn":"6662b726-7a3b-40c4-94e3-4008f2d3406a","scale":100,"focalX":30.22572078907434,"focalY":50,"resource":{"baseColor":"#0c1013","type":"image","mimeType":"image\/png","creationDate":"2021-12-28T14:21:57","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png","width":659,"height":695,"id":91,"alt":"","sizes":{"medium":{"file":"image-5-284x300.png","width":284,"height":300,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-284x300.png"},"thumbnail":{"file":"image-5-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-150x150.png"},"full":{"file":"image-5.png","width":659,"height":695,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false,"provider":"local"},"overlay":{"color":{"r":0,"g":0,"b":0,"a":0.5}},"alt":"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app"},{"x":40.5,"y":310,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","id":"a44426ad-9556-4e9e-b0f5-8e0f32f2b1c7","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">Add Dependencies<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"fba6d0f2-61d3-453c-8b97-f7625d81dde9"},{"x":144,"y":-33,"width":123,"height":18,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"basedOn":"ebdc8438-52fe-44f0-b31a-58167f2af89f","id":"ba66ad63-bcb9-4920-b666-979781928b34","content":"<span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span>","fontSize":14,"padding":{"horizontal":0,"vertical":0},"link":{"needsProxy":false,"url":"http:\/\/frontendguruji.com","rel":["noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer"],"icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg","desc":"Exploring What, Why & How of Frontend - < FrontendGuruji \/>"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":35,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":null,"vertical":null},"type":"text","content":"<span style=\"color: #61dbfb; text-transform: uppercase\">CreatE React App<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":47,"y":359,"width":317,"height":53,"scale":100,"focalX":50,"focalY":50,"id":"77dec8b0-174f-4eb4-af5f-7fe9c5ded752","basedOn":"1fc1a8b6-31bc-4c39-b933-a984adb652d1"},{"x":40.5,"y":411,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">ConfigurE Webpack<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"619622f6-f9d5-42aa-bc47-123b5c2d93a8","id":"d59d9175-1111-482d-a5ba-bd29ce96122f"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":35,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #61dbfb; text-transform: uppercase\">Initialize a folder<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":47,"y":255,"width":317,"height":53,"scale":100,"focalX":50,"focalY":50,"basedOn":"262f5121-2d77-4561-a417-8a73cb3b6851","id":"34b67101-91f1-4d0c-9064-e4b8386b526b"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":35,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #61dbfb; text-transform: uppercase\">ADD commands<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":47,"y":457,"width":317,"height":53,"scale":100,"focalX":50,"focalY":50,"basedOn":"77dec8b0-174f-4eb4-af5f-7fe9c5ded752","id":"620effd9-a5b7-4f5e-8370-49feb1efe83d"},{"x":40.5,"y":151,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">What you will learn?<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"d59d9175-1111-482d-a5ba-bd29ce96122f","id":"906482bb-dfd5-4e8a-a0b4-3c54477b1b49"},{"x":40.5,"y":511,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">build the project<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"d59d9175-1111-482d-a5ba-bd29ce96122f","id":"6f69a79f-ab61-4c98-b0ec-d0ada6c04552"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":null,"type":"image","mimeType":"image\/png","creationDate":"2022-01-05T08:30:55","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png","width":1280,"height":905,"id":232,"alt":"How to setup a React JS project from scratch (without Create React App) (React Router v6)","sizes":{"medium":{"file":"1280px-React-icon.svg_-300x212.png","width":300,"height":212,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-300x212.png"},"large":{"file":"1280px-React-icon.svg_-1024x724.png","width":1024,"height":724,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-1024x724.png"},"thumbnail":{"file":"1280px-React-icon.svg_-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x150.png"},"medium_large":{"file":"1280px-React-icon.svg_-768x543.png","width":768,"height":543,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-768x543.png"},"web-stories-poster-portrait":{"file":"1280px-React-icon.svg_-640x853.png","width":640,"height":853,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-640x853.png"},"web-stories-publisher-logo":{"file":"1280px-React-icon.svg_-96x96.png","width":96,"height":96,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-96x96.png"},"web-stories-thumbnail":{"file":"1280px-React-icon.svg_-150x106.png","width":150,"height":106,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x106.png"},"full":{"file":"1280px-React-icon.svg_.png","width":1280,"height":905,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":103,"y":-14,"width":214,"height":151,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"basedOn":"318df5da-551b-4b54-aed8-7b975575efd0","id":"9402f6f2-623a-4616-956c-9a905be3cd4d"}],"animations":[{"id":"2f46ec86-b6ae-4006-9948-f22c4aa7f5fc","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0,"targets":["a44426ad-9556-4e9e-b0f5-8e0f32f2b1c7"]},{"id":"b11bdc6b-a79e-4ed3-a0f9-ae79173eb2d1","type":"effect-zoom","targets":["ba66ad63-bcb9-4920-b666-979781928b34"],"scaleDirection":"scaleOut","duration":500,"delay":0},{"id":"ae5bdcff-5678-4a47-9dc1-496116f24b1a","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["77dec8b0-174f-4eb4-af5f-7fe9c5ded752"]},{"id":"175dbaaf-bc17-4f78-8977-df7f29930a44","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0,"targets":["d59d9175-1111-482d-a5ba-bd29ce96122f"]},{"id":"e8dc4e8e-431f-427e-8c18-63ab188ae2f5","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["34b67101-91f1-4d0c-9064-e4b8386b526b"]},{"targets":["620effd9-a5b7-4f5e-8370-49feb1efe83d"],"id":"9daca85a-caa4-4620-9ba1-a791cf59f40c","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0},{"targets":["906482bb-dfd5-4e8a-a0b4-3c54477b1b49"],"id":"a8f060ee-bcf1-4ad0-afc6-399a3dfd2a2c","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0},{"targets":["6f69a79f-ab61-4c98-b0ec-d0ada6c04552"],"id":"4c822c07-46e8-4b75-b083-d118620a0352","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0},{"targets":["9402f6f2-623a-4616-956c-9a905be3cd4d"],"id":"ec30a61f-80fa-4fb4-b639-8846605bca46","type":"effect-twirl-in","duration":1000,"delay":0}],"type":"page","id":"2ea0b730-26e4-421d-952f-7cb62387f0f8","backgroundOverlay":"none","backgroundColor":{"color":{"r":33,"g":31,"b":30}},"pageTemplateType":"cover","defaultBackgroundElement":{"x":90,"y":79,"width":128,"height":128,"type":"shape","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"595cb755-261f-485f-a058-66b8593c0512","isDefaultBackground":true,"basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9"},"pageAttachment":{"url":"http:\/\/frontendguruji.com\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/","icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1280px-React-icon.svg_.png","needsProxy":false}},{"elements":[{"x":0,"y":-56,"width":703,"height":742,"type":"image","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"1b5eb9f0-39be-4885-9aa4-7dda0f090806","basedOn":"d385bdcb-3561-430c-b244-190bae27a398","scale":100,"focalX":30.22572078907434,"focalY":50,"resource":{"baseColor":"#0c1013","type":"image","mimeType":"image\/png","creationDate":"2021-12-28T14:21:57","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png","width":659,"height":695,"id":91,"alt":"","sizes":{"medium":{"file":"image-5-284x300.png","width":284,"height":300,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-284x300.png"},"thumbnail":{"file":"image-5-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5-150x150.png"},"full":{"file":"image-5.png","width":659,"height":695,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/image-5.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false,"provider":"local"},"overlay":{"color":{"r":0,"g":0,"b":0,"a":0.5}},"alt":"React JS,setup react project,react tutorial,configure webpack,configure babel,setup react project without create-react-app"},{"x":144.5,"y":-33,"width":123,"height":18,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"basedOn":"ba66ad63-bcb9-4920-b666-979781928b34","id":"87c305b7-6544-434e-9fff-b365e716acd3","content":"<span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span>","fontSize":14,"padding":{"horizontal":0,"vertical":0},"link":{"needsProxy":false,"url":"http:\/\/frontendguruji.com","rel":["noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer"],"icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg","desc":"Exploring What, Why & How of Frontend - < FrontendGuruji \/>"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto","weights":[100,300,400,500,700,900],"styles":["italic","regular"],"variants":[[0,100],[0,300],[0,400],[0,500],[0,700],[0,900],[1,100],[1,300],[1,400],[1,500],[1,700],[1,900]],"fallbacks":["Helvetica Neue","Helvetica","sans-serif"],"service":"fonts.google.com","metrics":{"upm":2048,"asc":1900,"des":-500,"tAsc":1536,"tDes":-512,"tLGap":102,"wAsc":1946,"wDes":512,"xH":1082,"capH":1456,"yMin":-555,"yMax":2163,"hAsc":1900,"hDes":-500,"lGap":0}},"fontSize":16.2,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.5,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false},"type":"text","content":"Fill in some text","fontWeight":400,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":123.5,"y":299,"width":165,"height":19,"scale":100,"focalX":50,"focalY":50,"id":"f380b71e-1092-4459-8433-b3f7e16ada6a"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":30,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.5,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff; text-transform: uppercase\">React JS project can be setup using only one command.<\/span>\n\n<span style=\"color: #fff; text-transform: uppercase\">But this tutorial will do it hard way, to help you see what&nbsp;<\/span>\n<span style=\"color: #fff; text-transform: uppercase\">create-react-app&nbsp;<\/span>\n<span style=\"color: #fff; text-transform: uppercase\">use under the hood.<\/span>","fontWeight":400,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":58,"y":147,"width":297,"height":405,"scale":100,"focalX":50,"focalY":50,"id":"caa0c1d8-48ae-412b-b919-45ea84213bca","link":{"needsProxy":false,"url":"http:\/\/frontendguruji.com\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/","rel":["noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer"],"icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/react-setup-hz.jpg","desc":"How to setup a React JS project from scratch (without Create React App) (React Router v6) - < FrontendGuruji \/>"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":null,"type":"image","mimeType":"image\/png","creationDate":"2022-01-05T08:30:55","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png","width":1280,"height":905,"id":232,"alt":"How to setup a React JS project from scratch (without Create React App) (React Router v6)","sizes":{"medium":{"file":"1280px-React-icon.svg_-300x212.png","width":300,"height":212,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-300x212.png"},"large":{"file":"1280px-React-icon.svg_-1024x724.png","width":1024,"height":724,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-1024x724.png"},"thumbnail":{"file":"1280px-React-icon.svg_-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x150.png"},"medium_large":{"file":"1280px-React-icon.svg_-768x543.png","width":768,"height":543,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-768x543.png"},"web-stories-poster-portrait":{"file":"1280px-React-icon.svg_-640x853.png","width":640,"height":853,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-640x853.png"},"web-stories-publisher-logo":{"file":"1280px-React-icon.svg_-96x96.png","width":96,"height":96,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-96x96.png"},"web-stories-thumbnail":{"file":"1280px-React-icon.svg_-150x106.png","width":150,"height":106,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_-150x106.png"},"full":{"file":"1280px-React-icon.svg_.png","width":1280,"height":905,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1280px-React-icon.svg_.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":103,"y":-14,"width":214,"height":151,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"basedOn":"9402f6f2-623a-4616-956c-9a905be3cd4d","id":"621bfa36-e400-40df-9742-abe8b9e9b9f9"}],"animations":[{"id":"a75a6aa8-9a71-472d-9a7c-58df4009371f","type":"effect-zoom","targets":["87c305b7-6544-434e-9fff-b365e716acd3"],"scaleDirection":"scaleOut","duration":500,"delay":0},{"id":"6aaa6058-6c3e-4364-8290-49ae33b7d132","type":"effect-zoom","targets":["caa0c1d8-48ae-412b-b919-45ea84213bca"],"scaleDirection":"scaleIn","duration":500,"delay":0},{"targets":["621bfa36-e400-40df-9742-abe8b9e9b9f9"],"id":"355192ba-e120-4d36-971b-2c3b754b697b","type":"effect-twirl-in","duration":1000,"delay":0}],"type":"page","id":"9783e137-4bd8-4857-beac-98470ec3e822","backgroundOverlay":"none","backgroundColor":{"color":{"r":33,"g":31,"b":30}},"pageTemplateType":"cover","defaultBackgroundElement":{"x":90,"y":79,"width":128,"height":128,"type":"shape","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"595cb755-261f-485f-a058-66b8593c0512","isDefaultBackground":true,"basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9"},"pageAttachment":{"url":"http:\/\/frontendguruji.com\/how-to-setup-a-react-js-project-from-scratch-without-create-react-app\/","icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1280px-React-icon.svg_.png","needsProxy":false}}],"autoAdvance":true,"defaultPageDuration":7,"currentStoryStyles":{"colors":[]}},"style_presets":{"textStyles":[],"colors":[{"color":{"r":97,"g":219,"b":251}},{"color":{"r":63,"g":185,"b":132}},{"color":{"r":120,"g":182,"b":93}}]},"story_poster":{"id":270,"url":"https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/01\/cropped-react-poster.jpg","width":640,"height":853,"needsProxy":false},"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web-story\/213"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web-story"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/web-story"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/media\/270"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/media?parent=213"}],"wp:term":[{"taxonomy":"web_story_category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web_story_category?post=213&per_page=100"},{"taxonomy":"web_story_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web_story_tag?post=213&per_page=100"}],"wp:lock":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web-story\/213\/lock"}],"wp:publisherlogo":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/media\/218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}