Development Environment for React

React Web Development Course
#66

Thanks I got it sorted out!

1 Like
#67

Good morning…

Everything was working well with the app development (coin-exchange) until took a break from the React to complete the GitHub video by Zsolt, within this course. When I returned to continue with the coin-exchange video following the GitHub video (which was a few days later), this is the error log I received when trying to “npm start” my app:

Blockquote

Compiling…
C:\Users\Dwbak\WEBDEV\coin-exchange\node_modules\react-scripts\scripts\start.js:19
throw err;
^

[Error: ENOENT: no such file or directory, stat ‘C:\Users\All Users’] {
errno: -4058,
code: ‘ENOENT’,
syscall: ‘stat’,
path: ‘C:\Users\All Users’
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Dwbak\AppData\Roaming\npm-cache_logs\2021-09-21T09_38_58_257Z-debug.log

I didn’t make any changes to the directory structure as far as I am aware, during the GitHub video exercises but “npm start” doesn’t seem to be able to run the app.

It seems to be looking for a directory “All Users”, which doesn’t exist and never has, to my knowledge. After Googling it, I found that it is equivalent to AppData.

I also noticed it seems to have added coin-exchange to git, which I did not do - to my knowledge. Not sure if that is related.

Is there an easy fix or do I have to start from scratch? Any assistance would be appreciated!

#68

Same here brother :rofl: :rofl:

#70

How do I fix this error? Cannot download the web page. Following solutions though google led me to complete disaster. Had to uninstall VS two times. Review classes several times and still could not figure it out. Any help will be highly appreciated.
Maia

Shot 0029
Shot 00291412×886 79.8 KB

Shot 0028
Shot 00281464×278 12 KB

1 Like
#71

Hey @Maia, hope you are well.

Could you please describe what command are you running than later show you that error?
I assume you are trying to install a package but for any reason the error is triggered right?

Carlos Z

1 Like
#72

Hello Carlos, thank you for your time. It seems like I should have a folder but I just can’t figure out or there is a error or missing code on MyFirstReactApp.html. When I type $ npm start on bash terminal, the webpage display the error. Here is exactly where I’m at:

App.js

import React from './react';
import logo from'./logo.svg';
import './App.css';
import Coin from './components/Coin/Coin';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} alt="React logo" className="App-logo" />
        <p className="App-tittle">
          COIN EXCHANGE
        </p>
      </header>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Ticker</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <Coin name="Bitcoin" ticker="BTC" price="9999.99" />
          <Coin name="Ethereum" ticker="ETH" price="2999.99" />
        </tbody>
      </table>
    </div>
  );
}

export default App;

MyFirstReactApp.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Hello World</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    

    <!-- Don't use this in production: -->

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Ticker</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody id="root"></tbody>
    </table>

    <script type="text/babel">
/*
const Coin = ({name, ticker, price}) => (

<tr>
  <td>{Name}</td>
  <td>{Ticker}</td>
  <td>{Price}</td>
</tr>
);
*/


class Coin extends Reacts.Component {
  render() {
  return (
    <tr>
      <td>{this.props.name}</td>
      <td>{this.props.ticker}</td>
      <td>{this.props.price}</td>
</tr>
  );
 }
}


      ReactDOM.render(
        <React.Fragment>
          <Coin name="Bitcoin" ticker="BTC" price={9999.99} />
          <Coin name="Ethereum" ticker="ETH" price={2999.99} />
        </React.Fragment>,    
        document.getElementById('root')
      );

     </script>

    <!--

      Note: this page is a great way to try React but it's not suitable for production.

      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

 

      Read this section for a production-ready setup with JSX:

      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

 

      In a larger project, you can use an integrated toolchain that includes JSX instead:

      https://reactjs.org/docs/create-a-new-react-app.html

 

      You can also use React without JSX, in which case you can remove Babel:

      https://reactjs.org/docs/react-without-jsx.html

    -->

  </body>

The Website error display

Shot 0030
Shot 00301876×298 21.9 KB

VS error display

Shot 0031
Shot 00311904×1003 88.5 KB

What should I be looking at here? Thank you

Shot 0032
Shot 00321904×320 35.1 KB