SETUP REACT JS PROJECT

[{"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"}] [{"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"}] [{"selector":"#anim-ecb50b2f-5a8d-439a-a93b-6ce271a0ac22","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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}] [{"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"}] [{"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"}] < FrontENDguruji /> LEARN WHAT CREATE-REACT-APP USE UNDER THE HOOD Learn more

REACT V17

[{"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"}] [{"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"}] [{"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"}] [{"selector":"#anim-ad9a4128-b424-44fc-ab51-b799ebfadd90","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] < FrontENDguruji /> NPM Learn more

Add Dependencies

[{"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"}] [{"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"}] [{"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"}] [{"selector":"#anim-eee8e0f5-ed6f-49fe-8c67-575da29fbb25","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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}] < FrontENDguruji /> Learn more

React JS project can be setup using only one command. But this tutorial will do it hard way, to help you see what create-react-app use under the hood.

[{"selector":"#anim-98c296f2-2d1b-449c-bcdd-38e64a8d52ae","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"selector":"#anim-17c8bbfe-8ab7-4988-99ef-0e48dbd299b4","keyframes":{"opacity":[0,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"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}] < FrontENDguruji /> Fill in some text Learn more

SETUP REACT JS PROJECT

WITHOUT CREATE-REACT-APP

REACT V17

REACT ROUTER V6

webpack v5

scss

NODE V17

what will you use?

Add Dependencies

CreatE React App

ConfigurE Webpack

Initialize a folder

ADD commands

What you will learn?

build the project

React JS project can be setup using only one command. But this tutorial will do it hard way, to help you see what create-react-app use under the hood.