React Tutorial Environment Setup-CodePudding

I'm diving into React for the first time and following the intro material here: https://reactjs.org/tutorial/tutorial.html

I've followed the steps for setting up my own environment by deleting the files in /src and replacing them with the provided index.js and index.css files then running "npm start". The app works, but it's serving the default index.html found in /public instead of the tic-tac-toe app. Am I missing something or are the instructions missing something?

The browser console says the following error:

WebSocket connection to 'wss://host.domain.tld:3000/ws' failed: WebSocketclient @ WebSocketClient.js:3

Regardless of that, I am still getting the default index.html as a response, and I get the same thing if I curl localhost:3000 from the server. So, the fact that I don't have wss:3000 on my firewall and reverse proxy seems like a different issue. Or is it?

The following outputs from:

npm start

Compiled with warnings.

src/index.js Line 2:8: 'ReactDOM' is defined but never used no-unused-vars Line 46:7: 'Game' is defined but never used no-unused-vars

Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before.

assets by chunk 1.45 MiB (name: main) asset static/js/bundle.js 1.45 MiB [emitted] (name: main) 1 related asset asset main.9748632635aba4c77bc3.hot-update.js 360 bytes [emitted] [immutable] [hmr] (name: main) 1 related asset assets by path *.json 343 bytes asset asset-manifest.json 315 bytes [emitted] asset main.9748632635aba4c77bc3.hot-update.json 28 bytes [emitted] [immutable] [hmr] asset index.html 1.67 KiB [emitted] Entrypoint main 1.45 MiB (1.49 MiB) = static/js/bundle.js 1.45 MiB main.9748632635aba4c77bc3.hot-update.js 360 bytes 2 auxiliary assets cached modules 1.35 MiB [cached] 101 modules runtime modules 28.1 KiB 13 modules

WARNING in src/index.js Line 2:8: 'ReactDOM' is defined but never used no-unused-vars Line 46:7: 'Game' is defined but never used no-unused-vars

webpack 5.66.0 compiled with 1 warning in 176 ms

CodePudding user response：

Do not delete file in src //

you should just clear your app.js and clear some unneccery code in index.js with lot of care

then put this code on app.js

import React from ".react"
function App() {
  return (
    <div className="App">
           //write your jsx code and component name
    </div>
 );
}

export default App;

CodePudding user response：

If you don't render any component inside your index.js file you probably only see 'index.html' inside public folder. This is dependent how react generate our project. Defaulty, you should have in /src/index.js code like this:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render takes two argument. First told you where you replace your content inside index.html file. Second defines where you want replace your content.

document.getElementById('root') will be looking for div root id whith you should have inside your public/index.html file:

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      comment defaulty is here
    -->
  </body>