'React'が定義されていますが使用されていません

-2

サンプルアプリケーションを作成する手順は、the official reactjsです。私のノードのバージョンは6.9.0です。'React'が定義されていますが使用されていません

私は、次の手順を使用して、公式ウェブサイトによると、空のチックタックつま先のテーブルを表示するようになっているアプリに反応サンプルを作成しました：に変更

npm install -g create-react-app

create-react-app my-app

cd my-app

をmy-appディレクトリ

は、指示どおりにソースディレクトリ内のデフォルトファイルを削除しました。今私index.jsこの

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

のように見えるそれから私はyarn start

を走った。しかし、私はすべてを見るチックタックつま先のテーブル空白の画面ではありません。そして、コンソールでのカップルの警告が

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.

出典

2017-12-26 user3576036

まあそれはすべてのことは、あなたのindex.jsであるであるならば、エラーは自明です、あなたはどちらか使用することはありませんそれらの変数のまた、あなたのページはコンソール/コマンドウィンドウに表示されません。これはサーバーを起動するだけです。あなたのページを見るには、あなたのブラウザをあなたのローカルサーバーのURLに向ける。 –

@PatrickEvansわかった、私はreactjsには新しいことを理解している。しかし、なぜドキュメンテーションが ''プロジェクトフォルダでnpm startを実行し、ブラウザでhttp：// localhost：3000を開くと、空のtic-tac-toeフィールドが表示されるはずです。私はちょうどそれが言うことを何でもした。 – user3576036

あなたは、いくつかのコンポーネント/要素を作成しなければならないと言って/、多分それのスタイル、そして基本的なHTMLにコンポーネントをレンダリングするためにReactDOMを呼び出してから、あなたはそれを持っています。

ReactはJSXを処理するために使用され、あなたの簡単なケースでコンポーネント
ReactDOMに反応の作成は、DOMに作成された要素を描画するために使用されます。

こちらをご覧ください：https://reactjs.org/blog/2015/10/01/react-render-and-top-level-api.html

だから、ading何かあなたのコードに

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

のように、あなたの index.htmlに id="root" <body>内部タグを持つ要素がある場合は、あなたが何かを得るだろう

出典

2017-12-26 15:17:01 zmii

あなたに最後の部分をステップで逃した4 & 5：

src /フォルダにindex.cssというファイルをthis CSS codeという名前で追加します。

src /フォルダにindex.jsというファイルをthis JS codeと追加します。

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.css 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') 
);

出典

2018-01-29 23:58:18 CYMA

'React'が定義されていますが使用されていません

答えて

関連する問題