create-react-app not working

问题:

I am very new to react (started a day ago). I used the create-react-app command line to create an app. The following is the order I did

• create-react-app my-app
• npm start

Now app is running.

• npm install youtube-api-search
• npm start

Now i am getting this error

my-app@0.1.0 start /Users/shanmugharajk/Code/udemy/my-app react-scripts start

sh: react-scripts: command not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! my-app@0.1.0 start: react-scripts start npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the my-app@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

This happens every single time with any package I try to install.

One thins I noted is when i run

• npm install youtube-api-search or any pckage it always removes some package. The message I am getting while installing any package is

npm WARN registry Using stale data from https://registry.npmjs.org/ because the host is inaccessible -- are you offline? npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ENOTFOUND: request to https://registry.npmjs.org/redux failed, reason: getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443 npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation. npm WARN gentlyRm not removing /Users/shanmugharajk/Code/udemy/my-app/node_modules/html-minifier/node_modules/.bin/uglifyjs as it wasn't installed by /Users/shanmugharajk/Code/udemy/my-app/node_modules/html-minifier/node_modules/uglify-js npm WARN gentlyRm not removing /Users/shanmugharajk/Code/udemy/my-app/node_modules/espree/node_modules/.bin/acorn as it wasn't installed by /Users/shanmugharajk/Code/udemy/my-app/node_modules/espree/node_modules/acorn npm WARN gentlyRm not removing /Users/shanmugharajk/Code/udemy/my-app/node_modules/autoprefixer/node_modules/.bin/browserslist as it wasn't installed by /Users/shanmugharajk/Code/udemy/my-app/node_modules/autoprefixer/node_modules/browserslist npm notice created a lockfile as package-lock.json. You should commit this file. + redux@3.7.1 added 3 packages, removed 1142 packages and updated 3 packages in 27.043s

I couldn't figure out the reason. Please help me.

回答1:

You are using npm 5. At the moment it has many issues.

I recommend to downgrade to npm 4 and try again:

npm install -g npm@4

rm -rf node_modules
rm package-lock.json
npm install

If it doesn't help check your internet connection. This looks like an issue with your network:

getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443

回答2:

I got the answer, since I had yarn and npm both installed in my machine the create-react-app uses yarn and installs all the dependencies and creates yarn.lock file.

So now when I run npm install it looks for package.lock.json and it wont be there. So it uninstalls some package creates by yarn at the time of creation of the project.

So the solution I found is do any of the following

• create-react-app my-app
• npm install
• Then do install npm install -package-

Or

• create-react-app my-app
• yarn install -package-

Both of this approach is working now for me.

回答3:

Basic requirement to run React app is:

 nodejs  
 npm

If it is not installed then install this by(specifically for Ubuntu)

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

To create react js app:

npx create-react-app my-DemoApp

A fter that go inside folder by:

cd my-DemoApp

You can see basic folder structure created by this

my-DemoApp
├── README.md
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

After than add basic dependency required by react app by running:

npm install

That will create new folder named : node_modules in your parent folder

You can now run your app by :

npm start

And now you are done with most basic setup, you're app is now ready.

You also can add more library which is mandatory for the app by npm