Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

'React' is defined but never used

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.
like image 596
user3576036 Avatar asked Dec 26 '17 15:12

user3576036


People also ask

Why do we import react if we don't use it?

After Babel transformed your code which is written with JSX elements, into the React. createElement calls, you can see where React is used. If you forget to import React, it will be undefined and the createElement call will fail. So make sure to always import React in your functional components too!

Is it mandatory to use JSX in react?

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.

Is not defined react?

The React. js error "X is not defined react/jsx-no-undef" occurs when we forget to import a function, class or a variable in our code before using it. To solve the error, make sure to import the value before using it in your code, e.g. import {myFunc} from 'my-package' . Copied!


3 Answers

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

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

See here : https://reactjs.org/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

like image 124
zmii Avatar answered Oct 04 '22 16:10

zmii


You missed last parts in steps 4 & 5:

  1. Add a file named index.css in the src/ folder with this CSS code.
  2. 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')
);
like image 34
CYMA Avatar answered Oct 04 '22 14:10

CYMA


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.

like image 35
Appy Sharma Avatar answered Oct 04 '22 14:10

Appy Sharma