React Please help!

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.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/bind-this-to-a-class-method

So you are using create-react-app correct?, if so, what exactly is the problem?, what is it that you are trying to do?

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).

What do you see in the browser after you run npm start?

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

C:\Users\Megha>

Did you cd into the directory created by CRA and run npm install?

1 Like

I followed this tutorial and did everything exact same way shown on it.

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.

Are you familiar with the terminal AKA the command line?

Take a look at this tutorial to setup a local development environment using create-react-app https://reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial

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.

Hi Kevin!

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!

Yeah, I seem to make that exact mistake about half the time I create or clone an app. It’s the fist thing I check, after dope slapping myself.

Creating react app on command prompt has been my problem. Following are the steps I follow in creating it.

  1. cd desktop
    2.mkdir reactprojects
  2. cd reactprojects
  3. npm install -g create-react-app
  4. 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.

What happens if you run:

  1. npm uninstall -g create-react-app

  2. npx create-react-app ravenous

Same error message. Please help!

What is your installed node.js version?

Node.js v12.4.0. I hope you help solve this challenge as I cannot proceed doing the project. Thank you.

No mate, I don’t have any idea. Try to remove CRA and follow the official documentation.