How to run an existing REACT project - reactjs

Beginner here, please help.
(1)If I have the files of a react project which was built on codesandbox or by another dev, how do I run the app and make changes in VSCode on my own machine.
(2)How do I run an existing personal create-react-app project on my machine, so as to continue buliding?

Open a terminal on vscode, then make sure you already node installed.
Type npm install after that npm run start or whatever command to run, you can see on package.json.

The first thing you need is to install updated version of nodejs, you can type to google “download nodejs” and make sure you download the stable version.
You need to open a terminal, also make sure you can locate your file path then type:
cd your file path: your-appName (this should be the name of your app)

Related

Why is the create-react-app command not working?

Wanted to create a new react app, and ran both npx create-react-app and init react-app command in my Mac terminal but it's not working.
Tried a couple of times, but sometimes the folder is created with a package.json file only. Then everything stopped downloading. What could be the issue?
Screenshot of the output in the terminal:
According to your screenshot, there is no problem when you initialize your react project.
I think your local network may not be good enough. To create a react app, you need to install many third-party nodes_modules then cause mistakes.
Therefore, you can try to change the npm source, such as taobao( https://registry.npm.taobao.org )
npm config set registry xxx
And then use the craete-react-app to initialize the app.

hardhat, truffle, brownie, react stopped working?!? error Command failed with exit code 1

I was working with brownie and everything was working smoothly, launched my first useDapp app and it was a lot of fun. I wanted to see what truffle was about and installed it via npm and there were a bunch of warnings and it didn't seem smooth when it came to functionality so I might have installed it via yarn, expecting the package installer to fix things. It worked for a while then it started to timeout upon migration with tested code that used to launch perfectly fine? I thought it might of been a bug or some form of overlapping installation. I moved on to hardhat and installed it via NPM and it wouldn't compile, so I installed it via Yarn and it compiled fine. I went on to creating a new file and accidentally hit Esc when it was initializing a new file and setting the root. Somewhere in between there I tried to install the shorthand and it didn't work. It only opened a Windows help window instead of call hardhat when I typed hh --help. After that I couldn't call hardhat via yarn hardhat nor npx hardhat outside of the file....the file that previously wouldn't compile was still able to compile via npx hardhat compile?
It sometimes says "module not found", other times it says something about local installation.
I kind of got frustrated and wanted to play with react a little more and when I went to start yarn I got an error message. I followed the prompt and it didn't work, I googled it and had no luck with their common resolutions. I tried to upgrade eslint and even install 7.11.0 and it keeps saying I have version 5.16.0?.
EDIT: not sure if it is relevant, I tried to update my yarn to 1.22.17 and it said it did, although it says im running 1.22.15.
windows 7
node = v12.13.0
npm =6.12.0
The react-scripts package provided by Create React App requires a dependency:
"eslint": "^7.11.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
C:\Users\Nancy\node_modules\eslint (version: 5.16.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if C:\Users\Nancy\node_modules\eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
Kind of embarrassing, the answer was in the error message.
6. Check if C:\Users\Nancy\node_modules\eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Hardhat set root in the wrong directory and I ended up with a node_module folder in a parent directory that was messing things up
Reinstalled truffle globally via yarn add global truffle and it ran smoothly. Evidently, truffle acts up with certain NPM versions.
Hardhat doesn't seem to support global installations yet. Its been working fine being locally installed into each separate hardhat project via yarn add -D hardhat
I haven't been able to get the shorthand to work without invoking yarn first, such as yarn hh <command>

Error while using 'new' command while creating a project in gatsby

is the error I get while I'm trying to get a new starter project in gatsby.
node version: v14.4.0
npm version: 6.14.5
gatsby version: 2.4.17
Also, the error is the same while working with recent gatsby version.
Please help or suggest something.
git is not recognized as an internal or external command
You need to install git.
it seems you are using windows so install git on windows
You may need to close the cmd and open it again in order to use git.
Since windows may not automatically add git to your PATH environment variables:
Open Git Bash which should have been installed along with Git if you downloaded the correct installer.
Type the command you want to run, it should start with git.
Press enter.

Moved my React Native project folder to a new machine, how do i get it to run?

I recently cloned my React Native project folder from GitHub to my new/unused Mac. I am now in the root directory and when i run "react-native run-ios" to get the project going and load up the phone simulator, i get -bash: react-native: command not found
Do i need to re-install EVERY single dependency in package.json again (because it seems they're all there in my folders)?
Whats's the minimum in need to get my project up and running again and what commands do i use with my current project. I don't want to have to 'react-native init' an entirely new project!
Thanks
If you haven't done any react-native work on the Mac, then yes, you need to install all the dependencies including the react-native cli. You don't have the cli for react-native installed and you are trying to use it. You need to install react-native cli and NPM and make sure all dependencies are there.

Git repository initialized, how to run npm in terminal, (turn it on or off?)

Okay, the title might be confusing but I think my problem is pretty easy to explain with just the terminal code. My questions are below the code wall. emphasized text
[fsevents] Success: "/Users/Name/my-app/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ react-dom#16.6.3
+ react-scripts#2.1.1
+ react#16.6.3
added 1768 packages from 678 contributors and audited 35639 packages in 81.268s
found 0 vulnerabilities
Initialized a git repository.
Success! Created my-app at /Users/macbookpro/my-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
npm start
So, how do I safely terminate this, and then turn it back on? Or does it need to stay running, and if it's terminated, need to be reinstalled with the "npx create-react app" command?
I guess I'm just wondering how to access "that directory."
I understand it's probably a super basic question, but it would help me get a grip on managing my react app.
Thank you!!
terminate and turn it back on
You can terminate the project with CTRL + C or CTRL + Z.And after the termination, you can feel free to restart it.
Assuming your project runs at port 3000,if you terminal your project, you won't be able to get your project in the browser.
If you want to get your project like in http://localhost:3000, you need to make the project stay running.
npx command
There is no need to "npx create-react app" again. "npx create-react-app my-app" command will install create-react-app command globally but momentarily, it was only needed when initial project.
access "that directory"
I think the message you post above has told you.
We suggest that you begin by typing:
cd my-app
npm start
If you choose npm start the watcher will be continuosly running for development process.. you can stop it pressing CTRL + C twice on terminal.
npm run build runs once and stops alone generating files for production (compiled, minified).
Actually after installation completed, you don't need to terminate it.
To enter the project directory, simply type cd my-app
Then to start the development server type npm start
it will take few seconds to bring you to the browser (my-app project opened).
You may like to see the address bar of the browser to know the running port of development server.
When you need to stop the server just press ctrl + c
If you forget the project directory's location in mac, you can find by mdfind kind:folder "my-app"
Optional: If you use Visual Studio Code then you can type code . being inside the project directory to open up the full project directory with VS Code.

Resources