CODEWITHSUNDEEP
reactjs
Adam Winter
Adam Winter

Reputation: 1934

React Tutorial Environment Setup

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?

Upvotes: 0

Views: 101

Answers (2)

Adam Winter
Adam Winter

Reputation: 1934

The problem was that pasting the index.js contents from the index.js provided by the tutorial, using vim, caused the ReactDOM.render() part to be commented out.

Uncommented all of the following:

// ========================================
//
// ReactDOM.render(
//   <Game />,
//    document.getElementById('root')
// );

So, from the top, for those of you who would like the step-by-step in cenos:7, using docker.

docker run -dit -p 80:3000 centos:7
docker ps
docker exec -it <container ID> /bin/bash
yum install -y gcc-c++ make
curl -sL https://rpm.nodesource.com/setup_16.x | bash
yum install -y nodejs
cd ~
npx create-react-app stupidapp
cd stupidapp/src
rm -f *
yum install -y vim
vim index.css   (paste the code provided by the tutorial)
vim index.js   (paste the code provided by the tutorial)

This is where the problem with the commented code happens. So, fix that.

cd ..
npm start

Upvotes: 0

Damian Bigos
Damian Bigos

Reputation: 33

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>

Upvotes: 1

Related Questions