THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Install VS Code for ReactJS in 2020

Install VS Code for ReactJS Windows



Install NodeJS and NPM:
Go to https://nodejs.org/en/
Download the latest version of NodeJS LTS with Administrator privileges.

Install Visual Studio Code:

Go to https://code.visualstudio.com/
Downloaded the latest version.
Run VS Code.

It should recommend installing Git. We should Skip this part for now.

To Create React App 

COPY
npm install -g create-react-app
If successful, you should be able to get version:

COPY
create-react-app --version
Create react project:

COPY
create-react-app <projectname>
Run project:

COPY
cd <projectname>
npm start
on

28 comments:

  1. ANIRUDDHA CSC SERVICE CENTREMay 4, 2020 at 7:02 AM

    API LINL SETTING WHITLABEL

    ReplyDelete
    Replies
    1. for.December 1, 2020 at 11:41 PM

      Great Article The IEEE Xplore digital library is your gateway to trusted research—journals, conferences, standards, ebooks, and educational courses—with more than 3 million articles to help you fuel imagination, build from previous research, and inspire new ideas. Node Js Projects for Final Year IEEE will pave a new way in knowledge-sharing and spreading ideas across the globe. Project Centers in Chennai for CSE Node.js Corporate Training JavaScript Training in Chennai

      Delete
  2. Nick1005May 6, 2020 at 3:00 AM

    what if i used "npx create-react-app my-app"

    ReplyDelete
  3. nakshatraMay 15, 2020 at 9:34 PM

    I am impressed by the information that you have on this blog. It shows how well you understand this subject.
    data analytics course
    data science course
    big data course in malaysia
    360DigiTMG
    big data analytics training in malaysia

    ReplyDelete
  4. tejaswiniMay 16, 2020 at 1:49 AM

    A debt of gratitude is in order for sharing the information, keep doing awesome... I truly delighted in investigating your site. great asset...
    data science course
    360DigiTMG

    ReplyDelete
  5. UnknownMay 21, 2020 at 4:11 AM

    npm install not working it showing npm packages are looking for funding ... iam getting this on cmd and project not created

    ReplyDelete
    Replies
    1. shashankDecember 22, 2020 at 4:10 AM

      Thats' not an error . It means that npm install is working fine

      Delete
  6. PHP TutorialMay 25, 2020 at 3:14 AM

    + cra-template@1.0.3
    + react@16.13.1
    + react-scripts@3.4.1
    + react-dom@16.13.1
    added 1616 packages from 751 contributors and audited 1620 packages in 336.271s

    59 packages are looking for funding
    run `npm fund` for details

    found 1 low severity vulnerability
    run `npm audit fix` to fix them, or `npm audit` for details


    stuck on this please help ...

    ReplyDelete
    Replies
    1. UnknownJune 18, 2020 at 1:19 AM

      same error buddy.. that is why i left this tutorial

      Delete
    2. UnknownJune 22, 2020 at 11:14 PM

      Same thing happening with me i want to learn react and I am not getting any solution from the web.

      Delete
    3. UnknownJune 28, 2020 at 11:16 PM

      same problem ...did u got any solution plz help

      Delete
  7. UnknownMay 26, 2020 at 5:25 AM

    Thanks

    ReplyDelete
  8. Suryansh SuryavanshiJune 3, 2020 at 8:07 AM

    Wow Thanks Bro

    ReplyDelete
  9. Suryansh SuryavanshiJune 3, 2020 at 8:08 AM

    This is Awesome

    ReplyDelete
  10. UnknownAugust 4, 2020 at 12:58 AM

    baar baar audit fixed pe aake ruk rha h

    ReplyDelete
  11. UnknownAugust 4, 2020 at 12:59 AM

    run `npm audit fix` to fix them, or `npm audit` for details

    iske aage ja hi nhi rha

    ReplyDelete
  12. UnknownOctober 9, 2020 at 11:31 PM

    @media(max-width: 768px){
    .card{



    }
    i need the css code for the Netflix app created by Thapa Technical.

    ReplyDelete
  13. UnknownOctober 28, 2020 at 1:23 AM

    Sir how to install in React js

    ReplyDelete
  14. pratikOctober 30, 2020 at 2:59 AM

    C:\reactapp\awesomeapp>npm start

    > awesomeapp@0.1.0 start C:\reactapp\awesomeapp
    > react-scripts start

    internal/fs/utils.js:269
    throw err;
    ^

    Error: ENOENT: no such file or directory, lstat 'C:\Users\APK SS\AppData\Local\Temp;C:'
    at Object.realpathSync (fs.js:1621:7)
    at Object. (C:\reactapp\awesomeapp\node_modules\temp-dir\index.js:9:13)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object. (C:\reactapp\awesomeapp\node_modules\tempy\index.js:5:17)
    at Module._compile (internal/modules/cjs/loader.js:1137:30) {
    errno: -4058,
    syscall: 'lstat',
    code: 'ENOENT',
    path: 'C:\\Users\\APK SS\\AppData\\Local\\Temp;C:'
    }
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! awesomeapp@0.1.0 start: `react-scripts start`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the awesomeapp@0.1.0 start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\APK SS\AppData\Roaming\npm-cache\_logs\2020-10-30T09_17_50_115Z-debug.log

    ReplyDelete
  15. pratikOctober 30, 2020 at 2:59 AM

    C:\reactapp\awesomeapp>npm start

    > awesomeapp@0.1.0 start C:\reactapp\awesomeapp
    > react-scripts start

    internal/fs/utils.js:269
    throw err;
    ^

    Error: ENOENT: no such file or directory, lstat 'C:\Users\APK SS\AppData\Local\Temp;C:'
    at Object.realpathSync (fs.js:1621:7)
    at Object. (C:\reactapp\awesomeapp\node_modules\temp-dir\index.js:9:13)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object. (C:\reactapp\awesomeapp\node_modules\tempy\index.js:5:17)
    at Module._compile (internal/modules/cjs/loader.js:1137:30) {
    errno: -4058,
    syscall: 'lstat',
    code: 'ENOENT',
    path: 'C:\\Users\\APK SS\\AppData\\Local\\Temp;C:'
    }
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! awesomeapp@0.1.0 start: `react-scripts start`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the awesomeapp@0.1.0 start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\APK SS\AppData\Roaming\npm-cache\_logs\2020-10-30T09_17_50_115Z-debug.log

    ReplyDelete
  16. UnknownJanuary 10, 2021 at 10:56 PM

    C:\HIMANSHU\reactProjectes>npx create-react-app my-app

    Creating a new React app in C:\HIMANSHU\reactProjectes\my-app.

    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template...


    > core-js@2.6.12 postinstall C:\HIMANSHU\reactProjectes\my-app\node_modules\babel-runtime\node_modules\core-js
    > node -e "try{require('./postinstall')}catch(e){}"


    > core-js@3.8.2 postinstall C:\HIMANSHU\reactProjectes\my-app\node_modules\core-js
    > node -e "try{require('./postinstall')}catch(e){}"


    > core-js-pure@3.8.2 postinstall C:\HIMANSHU\reactProjectes\my-app\node_modules\core-js-pure
    > node -e "try{require('./postinstall')}catch(e){}"


    > ejs@2.7.4 postinstall C:\HIMANSHU\reactProjectes\my-app\node_modules\ejs
    > node ./postinstall.js

    + cra-template@1.1.1
    + react-dom@17.0.1
    + react-scripts@4.0.1
    + react@17.0.1
    added 1904 packages from 722 contributors and audited 1907 packages in 335.595s

    126 packages are looking for funding
    run `npm fund` for details

    found 0 vulnerabilities

    ReplyDelete
  17. UnknownMarch 5, 2021 at 12:08 PM

    code kaha hai

    ReplyDelete
  18. Bespoke Boxes UKMarch 20, 2021 at 3:55 AM

    Custom printed CBD boxes have become a mandatory part of the industry. These boxes are made of reliable materials like Kraft paper, cardboard and corrugated cardboard, which is inexpensive and helps prevent environmental pollution.

    ReplyDelete
  19. DharmendraMarch 22, 2021 at 8:12 PM

    ReplyDelete
  20. HuongkvMarch 23, 2021 at 1:35 AM

    Aivivu chuyên vé máy bay, tham khảo

    mua vé máy bay từ hàn quốc về việt nam

    đặt vé máy bay hà nội sài gòn vietjet

    vé máy bay phú quốc hà nội

    giá vé máy bay hà nội nha trang

    vé máy bay đi Mỹ giá rẻ 2021

    ReplyDelete
  21. bespokepackagingboxesukMarch 26, 2021 at 11:03 AM

    Bespoke packaging boxes At Bespoke Packaging UK we strongly believe in the interests of bespoke packaging, which has multiple benefits. Over the last few decades, we have built up vast experience in producing bespoke packaging for a vast range of items.

    ReplyDelete
  22. ambuj agarwalApril 4, 2021 at 5:04 AM

    When we create react app, it shows following error
    Installing react, react-dom, and react-scripts with cra-template...

    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR!
    npm ERR! Found: @babel/core@7.12.3
    npm ERR! node_modules/@babel/core
    npm ERR! @babel/core@"7.12.3" from react-scripts@4.0.3
    npm ERR! node_modules/react-scripts
    npm ERR! react-scripts@"*" from the root project
    npm ERR! @babel/core@"^7.12.3" from @svgr/webpack@5.5.0
    npm ERR! node_modules/@svgr/webpack
    npm ERR! @svgr/webpack@"5.5.0" from react-scripts@4.0.3
    npm ERR! node_modules/react-scripts
    npm ERR! react-scripts@"*" from the root project
    npm ERR! 9 more (babel-jest, babel-loader, ...)
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer @babel/core@"^7.13.0" from @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.13.12
    npm ERR! node_modules/@babel/preset-env/node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining
    npm ERR! @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@"^7.13.12" from @babel/preset-env@7.13.12
    npm ERR! node_modules/@babel/preset-env
    npm ERR! @babel/preset-env@"^7.12.1" from @svgr/webpack@5.5.0
    npm ERR! node_modules/@svgr/webpack
    npm ERR! @svgr/webpack@"5.5.0" from react-scripts@4.0.3
    npm ERR! node_modules/react-scripts
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    npm ERR!
    npm ERR! See C:\Users\AMBUJ AGARWAL\AppData\Local\npm-cache\eresolve-report.txt for a full report.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\AMBUJ AGARWAL\AppData\Local\npm-cache\_logs\2021-04-04T12_01_51_065Z-debug.log

    Aborting installation.
    npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.

    Deleting generated file... package.json
    Deleting reactapp/ from C:\Users\AMBUJ AGARWAL
    Done.

    Kindly reply , how to solve

    ReplyDelete

Subscribe to: Post Comments (Atom)
© ThapaTechnical 2018. By SoraTemplates | DSTB By MyBloggerThemes | FreeBloggerTemplates