I am following the official reactjs instructions to create a sample app. My node version is 6.9.0.

I created sample react app which is supposed to display a empty tic tac toe table according to the official website using following instructions:

npm install -g create-react-app

create-react-app my-app

cd my-app

changed to my-app directory

removed the default files inside the source directory as directed. Now my index.js looks like this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; 

Then I ran yarn start

But all I see is blank screen no tic tac toe table. And couple warnings in the console saying

Compiled with warnings.

./src/index.js
  Line 1:  'React' is defined but never used     no-unused-vars
  Line 2:  'ReactDOM' 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.

I am following the official reactjs instructions to create a sample app. My node version is 6.9.0.

I created sample react app which is supposed to display a empty tic tac toe table according to the official website using following instructions:

npm install -g create-react-app

create-react-app my-app

cd my-app

changed to my-app directory

removed the default files inside the source directory as directed. Now my index.js looks like this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; 

Then I ran yarn start

But all I see is blank screen no tic tac toe table. And couple warnings in the console saying

Compiled with warnings.

./src/index.js
  Line 1:  'React' is defined but never used     no-unused-vars
  Line 2:  'ReactDOM' 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.

• javascript
• reactjs

• 1 Well if that is all that is in your index.js then the errors are self explanatory, you never use either of those variables. Also your page won't show up in the console / mand window that is to just start the server. To view your page you point your browser to your local servers url – Patrick Evans Commented Dec 26, 2017 at 15:16
• 1 @PatrickEvans Okay I understand that I am new to reactjs. But then why does the documentation say Now if you run npm start in the project folder and open http://localhost:3000 in the browser, you should see an empty tic-tac-toe field.. I just did whatever it says. – user3576036 Commented Dec 26, 2017 at 15:23

4 Answers 4

You missed last parts in steps 4 & 5:

4. Add a file named index.css in the src/ folder with this CSS code.
5. Add a file named index.js in the src/ folder with this JS code.

index.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

index.js

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

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

You should create some ponent/element/, maybe style it, then call ReactDOM to render your ponent to the underlying html and then you will have it.

• React is used to handle JSX and creation of React ponent
• ReactDOM in your simple case will be used to render created element to dom.

See here : https://reactjs/blog/2015/10/01/react-render-and-top-level-api.html

So ading something like

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

to your code, you will get something if in your index.html there is element with id="root" inside <body> tag

ESlint needs to be configured to work with React JSX. This excellent article has all the details.

This simply means your project has eslint configured to catch unused variables.

If you use JSX or anything React within that file the warning will go away just like suggested by zmii in his answer.

But i am writing this answer because someone showed me their code and they were facing the same problem.

Their code :

import React from 'react';

const person = () => {
    return "<h2>I am a person!</h2>"
};

export default person;

The problem in the above code was that while returning, he used double quotes. So instead of JSX, it was returning string and therefore they were getting error that React was never not used.

Conclusion: Syntax are important so keep in mind, specially if you are starting out.

Hope this helps someone.