質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • JavaScript

    16320questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Windows

    1437questions

    Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

  • React.js

    826questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Reactでクラスを使いたいです。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 209

masaru_free

score 11

Reactにて、クラスコンポーネントを使用し、タブ切り替えを作りたいのですが、そもそも、クラスを使いwebpackでビルドしても、表示されません。

使用できるバージョンがあるのでしょうか?
クラスを使用し、表示の仕方を教えていただきたく思います。

どうか、宜しくお願い致します。

追記

package.json

{
  "name": "zer0",
  "version": "1.0.0",
  "description": "",
  "main": "react.js",
  "scripts": {
    "start": "webpack-dev-server --inline",
    "webpack": "webpack",
    "w": "webpack -p --watch && NODE_ENV=production webpack config/production/webpack.config.js --progress --colors",    "d": "webpack -d --watch"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/facebook/react/issues"
  },
  "homepage": "https://facebook.github.io/react/",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-react-hmre": "^1.1.1",
    "create-react-class": "^15.6.3",
    "extract-text-webpack-plugin": "^3.0.1",
    "gulp-ejs": "^3.1.2",
    "gulp-postcss": "^7.0.1",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^3.0.0",
    "node-sass": "^4.7.2",
    "postcss-cssnext": "^3.1.0",
    "react": "^15.6.2",
    "react-dom": "^15.6.2",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "sass-loader": "^6.0.6"
  },
  "devDependencies": {
    "@uirouter/react": "^0.6.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babelify": "^8.0.0",
    "browserify": "^16.1.0",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.10",
    "fs": "0.0.1-security",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.9.2",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.0",
    "gulp-webserver": "^0.9.1",
    "history": "4.7.2",
    "jquery": "^3.3.1",
    "node-sass": "^4.7.2",
    "page": "^1.8.3",
    "pdf.js-controller": "^1.0.1",
    "postcss-easy-import": "^3.0.0",
    "postcss-loader": "^2.1.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-event-listener": "^0.5.3",
    "react-router": "4.2.0",
    "react-router-dom": "^4.2.2",
    "react-transform-hmr": "^1.0.4",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^2.11.1"
  }
}


webbpack

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, 'assets/js'),
  entry: {
    react: './react.jsx'//ここを増やす
  },
  output: {
    path: path.join(__dirname, 'public/js/react'),
    filename: 'react.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'react-hmre']
        },
      }
    ],
  },
  devServer: {
    port:8888,
    inline: true
  },
};


reactの記載内容です。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


class App extends Component {
  render() {
    return (
      <div className="test">
        <p>test</p>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('content')
);


上記が開発時使用していますファイルになります。
長々となってしまいましたが、宜しくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • HayatoKamono

    2018/04/13 11:26 編集

    普通に出来るはずなので、それが出来ないという特殊な環境、状況、エラーや警告メッセージ、コード、それを再現するためのステップなどの補足説明を追記する必要があるかと思います。

    キャンセル

  • masaru_free

    2018/04/15 23:27

    ご指摘ありがとうございます。追記いたしました。

    キャンセル

回答 1

checkベストアンサー

0

 回答

とりあえず最小構成のものでClassシンタックスの動作確認ができるものを書いてみました。
任意のフォルダに以下のファイルを以下のディレクトリー構造通りに配置し、npm run installしてからnpm run startwebpack-dev-serverlocalhost:8080で起動すれば、ブラウザでtestという文字が表示されるはずです。

最小構成のもので動作確認がとれたら、ご自身のプロジェクトデータと比較して、何が原因そうなのか調査してみると良いかと思います。

質問文に追記されたpackage.jsonを見る限り、dependenciesのところでは古いバージョンのreactが入っていて、devDependenciesのところでは新しいバージョンのreactが入っているので、古いバージョンのreactが使われてしまっているとかではないでしょうか。

とりあえず、今あるものをベースに開発を続けなければいけない場合は、今あるものを小さい単位で正常に動くように確認しながら、積み上げていくことをお勧めします。

 ディレクトリー構造

.
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── bundle.js
│   └── index.html
├── src
│   └── index.js
└── webpack.config.js

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="root"></div>

<script src="./bundle.js"></script>
</body>
</html>

 index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


class App extends Component {
  render() {
    return (
      <div className="test">
        <p>test</p>
      </div>
  );
  }
}

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

 package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.0.0-beta.44",
    "babel-preset-react": "^6.24.1",
    "@babel/core": "^7.0.0-beta.44",
    "@babel/preset-env": "^7.0.0-beta.44",
    "babel-loader": "^8.0.0-beta.2",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  }
}

 webpack.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    entry: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/react']
          }
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
  },
};

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/17 12:40

    HayatoKamonoさん、ありがとうございます。

    参考ファイルもいただきありがとうございます

    少しづつ自分なりの形にしていこうとおもいます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16320questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Windows

    1437questions

    Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

  • React.js

    826questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。