How to Download & Install React.js in Visual Studio Code - How to Create React App Npm in VSCode

Опубликовано: 13 Ноябрь 2024
на канале: SoftTrick

Link:- https://nodejs.org/en

Code:- npm install -g npm@latest

In This Video We Will See How to Download & Install React.js in Visual Studio Code or How to Create React App Npm in VSCodeHere Are The Steps1. As You Can See, When Typing npm, It Shows an Error. This Occurs Because Node.js is Not Installed.2. Click Kill Terminal Button to Completely Close The Terminal3. or If Multiple Terminals are Open, You Will See the Kill Terminal Button Next to the List of Terminals. Kill All the Terminals One by One.4. Close Visual Studio Code5. Open Your Browser6. Search nodejs in Google7. Click First Link:- https://nodejs.org/en8. Click "Download Node.js" Button to Download Node.js9. Wait for Download to Finish10. Click on the Node.js Installer to Install It Once It Has Downloaded.11. Click Run Button if You See Such Window12. Click Next Button13. Check 'I Accept the Terms in the License Agreement' & Then Click the Next Button.14. Click Next Button15. Click Next Button16. Check 'Automatically Install the Necessary Tools' If You Want To, & Then Click the Next Button.17. Click Install Button18. Wait for Installation Process to Finish19. Click Finish Button20. Minimize or Close Your Browser.21. Restart Your Computer22. Open Visual Studio Code.23. Click Terminal Tab24. Click "New Terminal"25. Type "npm -v" in the Terminal & Hit Enter on Your Keyboard to Check the Node.js Version & Confirm That It is Installed.26. It is Showing Node.js Version27. Type npm & Hit Enter on Your Keyboard to See if Other Options are Showing28. Click the Kill Terminal Icon If the npm Command is Not Working or Showing Any Errors.29. Close Visual Studio Code30. Search "Node.js"31. Right-Click on Node.js App & Then Click "Open file location"32. Right-Click on Node.js & Then Click "Open file location"33. Click Blank Space on Address Bar34. Now Copy The Node.js Path35. or Right-Click on The Address Bar36. Click "Copy Address as Text". This Will Also Copy The Path37. Click Close38. Search "Edit the system environment variables"39. Click "Edit the system environment variables"40. Click "Environment Variables" Button41. Click Path From The List in System Variables.42. Click Edit Button43. As You Can See, the Node.js Path Already Exists for Me. That is Why the Npm Command is Working for Me.44. Click New Button if You Dont Have Node.js Path45. Paste the Previously Copied Path Here. Do This Only If You Don't Have a Path; Otherwise, Skip This Step.46. Click OK Button.47. I Already Have Path in the List So i Will Click Cancel Button48. Click OK Button. I Already Have Path So i Will Click Cancel Button49. Click OK Button. I Already Have Path So i Will Click Cancel Button50. Open Visual Studio Code51. Click Terminal Tab52. Click "New Terminal"53. Type npm -v & Hit Enter on Your Keyboard to Check if it is Working54. npm (Node.js) Will Work For You Now. Again, Click on the Kill Terminal Icon.55. Minimise Your Visual Studio Code56. Create New Folder Where You Want to Save Your React Project Files & Folders57. Go Back to Visual Studio Code58. Click File Tab59. Click "Open Folder"60. Now Go to the Path Where You Created Your New Folder. in My Case, It is on the Desktop.61. Select The Created Folder & Then Click "Select Folder" Button62. Check "Trust the authors of all files in the parent folder"63. Click "Yes, I trust the authors" Button64. As You Can See Our Created Folder is Now Open in Visual Studio Code65. Now Click Terminal Tab66. Click "New Terminal"67. You Will See the Path of the Created Folder When You Open a New Terminal.68. Type "npx create-react-app" + "Your-Project-Folder-Name" & Hit Enter on Your Keyboard. my-app is My Project Folder Name (Code in Description)69. You Need to Type "y" & Hit Enter on Your Keyboard If You See "Need to Install the Following Packages".70. Wait For Creating & Installating React71. You Will See the Folder Name You Typed After "npx create-react-app". I Typed "my-app", So It Created a Folder Named "my-app".72. Now You Need to Type cd Followed by the Folder Name That You Specified After the 'npx Create-react-app' Command & Hit Enter on Your Keyboard. You Will Also Be Shown That Command Here. You Can Copy It From There.73. Now Type "npm start" & Hit Enter on Your Keyboard74. React is Sucessfully Installed. Continue Watching The Video if You Are Facing "npm error code ENOENT" After Typing "npx create-react-app" Code75. Close Your Browser76. To Terminate The React App Press CTRL + C on Your Keyboard77. Type y & Hit Enter on Your Keyboard. Once You See Terminate batch job (Y/N)?78. Now I Will Show You How To Fix "npm error code ENOENT"79. Type the Suggested Code or "npm install -g npm@latest", & Hit Enter on Your Keyboard. This Will Update Npm & Fix 'ENOENT' Error."80. Type npm -v & Hit Enter on Your Keyboard to Check npm Version.81. You Can See npm Version is Updated82. Done! Now Type "npx create-react-app" + "React-project-folder" & Hit Enter on Your Keyboard. It Should Not Show Any Errors.