Tell us what’s happening:
So I am trying to run my code in chrome browser and it would not show anything. I have recently downloaded React to practice some of the examples. When I write the code below on Scrimba.com it works fine. But not on my desktop. Am I missing something when I downloaded the React. I am using Visual Studio Code for editing. Please help.
Your code so far
import React from "react"
import ReactDOM from "react-dom"
//JSX is javascript rendition of html
ReactDOM.render(<h1>Hello World!</h1>,document.getElementById("root"))
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
itemCount: 0
};
// change code below this line
// change code above this line
}
addItem() {
this.setState({
itemCount: this.state.itemCount + 1
});
}
render() {
return (
<div>
{ /* change code below this line */ }
<button>Click Me</button>
{ /* change code above this line */ }
<h1>Current Item Count: {this.state.itemCount}</h1>
</div>
);
}
};
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.
Yes,I am using create-react-app.I am simply trying to run the code in browser but its not showing any output there.When I use the same code on Scrimba.com it shows the output. I believe I am missing something on the installation?(not sure though).
Well I just downloaded the react package and followed the instruction on the tutorial to install it worked. I dont know what you mean by run npm start? Do i have to run this on command prompt? I did try that and it shows following error.
C:\Users\Megha>npm start
npm ERR! path C:\Users\Megha\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\Megha\package.json’
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Megha\AppData\Roaming\npm-cache_logs\2019-01-01T21_38_26_309Z-debug.log
You didn’t answer my question. The error you give indicates that npm can’t find package,json. That happens to me all the time - when, after using create react app, I forget to cd into the created directory before trying to install. So, please reread my previous question.
Hi,
Yes I did run npm start and it showed the out put. Thank you!
One more question though when I created another project and ran it it still showed the output from old project. Do I need to change something?
You still haven’t asked my question if you cded into the proper directory and did an npm install. When I get that exact error, it’s usually because I forgot to cd into the correct directory. Give us a list of the files ls in the directory where you think you should be running the npm start from, because it really sound like you’re in the wrong directory. There aren’t many other reasons it wouldn’t be able to find package.json, assuming your ran CRA.
Thanks for your reply. Yes it turned out I was in the wrong directory Silly me! but its working now. After that I have started two more project and they seem to work fine.
Thanks again for your quick response!
Creating react app on command prompt has been my problem. Following are the steps I follow in creating it.
cd desktop
2.mkdir reactprojects
cd reactprojects
npm install -g create-react-app
create-react-app ravenous
On entering the last command, this error flags:
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\bamidele\AppData\Roaming\npm-cache\_logs\2019-07-31T20_08_19_831Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts has failed.
Deleting generated file... package.json
Deleting ravenous/ from C:\Users\bamidele\Desktop\reactpro
Done.