Trouble Cloning and Running a React Project - reactjs

I am a beginner and want to run a React project on my local machine. I cloned the project and cd into it and then run npm install. Then, I installed the dependencies using yarn install. Finally, I run npm start, but what shows up in my browser is the React logo and a message saying Edit src/App.js and save to reload.
What am I doing wrong?

The only wrong thing is that you ran yarn install after npm install, that two commands do the same thing.
That react logo and message is the app running, open App.js in an editor a try changing the text to see how it updates on the browser.

Related

installed some dependencies, but now npm start doesn't work

I have a react app that I created with npx create-react-app. I have been workin on this app for a few weeks and decided to try to add a backend. I installed mongoose, express, and nodemon, and I can see them in my dependencies, but now when I use npm start, it opens up my browser and sends me to localhost:3000 but the app doesn't load. just an error saying this site cant be reached, local host refused to connect. Can anyone help me figure out how to get my app properly running again?
Try to delete node modules and install dependencies again similarly you can use npm ci will do the same.

getting error when run npm start command with gatsby

When I run command npm start it's giving me error
ERROR
gatsby develop
Start development server. Watches files, rebuilds, and hot reloads if
something changes
And when I run command gatsby build it's giving me this error:
gatsby can only be run for a gatsby site. Either the current
working directory does not contain a valid package.json or 'gatsby' is
not specified as a dependency
I tried to delete node_modules and install again but still giving me the same error. How can I fix this?
It seems that you are not running the commands in the proper folder.
npm start, gatsby develop or gatsby build must be triggered in the root of your Gatsby project, where the package.json is located.
Share more details about where and how are you trying to run npm start and even your project structure in order to know what's going on.

yarn link error No registered package found called

I'm developing an npm package for custom React Hooks. And using yarn for package management. The custom hooks are in the src directory, and to prevent posting the wrong code to npm, I've created a new demo folder locally at the same level as src.
To test my hooks code locally, I bundled my hooks and used yarn link to link it in my demo project smoothly as if I installed it from the registry. And next I run yarn start in my demo folder to run my test project. But it reminded me Invalid Hook Call Warning in the Chrome console.
After reading this article I knew that it is because I used duplicate React, So I tried to this command: yarn link ../node_modules/react but it just told me
error No registered package found called "../node_modules/react".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
But when I tried to use npm link ../node_modules/react there is no error reported. I can start my test project smoothly.
But here comes the problem: I am using yarn for package management and it has its own lock file yarn.lock. If I want to run my test project, I had to run npm link ../node_modules/react, this step will generate a npm lock file which is a Redundancy for me.
So how can I use yarn link ../node_modules/react instead of npm link ../node_modules/react to link a same version React?
Here is the whole repository
I will assume this question is still relevant because I stumbled upon it while looking for the answer myself. I managed to figure it out eventually.
The yarn link docs state the following:
This command is run in the package folder you’d like to consume.
In order to create a link for React, you have to cd ../node_modules/react and then yarn link while in that directory. You can then use yarn link react from the other side to consume the linked package.
For the record, it doesn't look like it matters which side you create the link from (the library or the consumer) as long as the other side makes use of it.

Getting stuck on "Downloading Javascript bundle 100.00%" in expo app

Whenever I click 'run in iOS simulator' after running expo start in terminal, I'm getting stuck at a screen with "Downloading Javascript bundle 100.00%" in the app.
I'm creating a React native application and I tried all solutions including:
deleting Expo app
restarting simulator
erasing settings on simulator
rechecking code for bugs
Debug remote JS / stop remote debugging
See example of loading screen:
https://i.stack.imgur.com/RzEdZ.png
Delete your package-lock.json file, node_modules directory and then,
run npm cache clean -f.
Then run a new npm install as a regular user.
Finally, run an npm start again
try clearing the cache with expo start -c

Can't create WebStorm React project

I'm trying to create a React project in WebStorm 2016.3.1
It's asking me for a create-react-app but I have no idea what that is and I can't find any reference on Google.
What is it and where can I find the value?
You need to install create-react-app npm module, before you use this feature.
npm install -g create-react-app
You can read more about this feature on the official release blog of WebStorm.
Excerpt from the documentation :
Make sure that you have create-react-app installed globally on your computer, for that run npm install -g create-react-app. Then to start your new project, double click on the start task in the npm tasks tool window to run it. That’s it!
I had ie installed create-react-app globally using yarn and webstorm failed to find it. Then I used npm, not to mention globally and its working like a charm.
TL;DRNo need to install anything. Just enter npx create-react-app in the create-react-app field & it should work like a pycharm, I mean charm :)
Side note: npx is pre-bundled with npm since npm version 5.2.0.
I created webStrom react app following this steps.
Download node.js
Open command line console and type "npm install -g create-react-app"
Create react app project from web-storm.
Make sure you provided the correct file path of create-react-app , by default it is
installed in ~\AppData\Roaming\npm\node_modules\create-react-app
use
npm start: to start development server
If you are using asdf or any other tool to manage multiple versions of nodejs, you will need to set up the path to create-react-app manually
I'm on mac, so for me the path was
/Users/<USER>/.asdf/installs/nodejs/12.16.2/.npm/lib/node_modules/create-react-app

Resources