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

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

HayatoKamono

2018/04/13 02:47 編集

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

masaru_free

2018/04/15 14:27

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

行動規範の内容に同意します

回答1件

ベストアンサー

回答

とりあえず最小構成のものでClassシンタックスの動作確認ができるものを書いてみました。
任意のフォルダに以下のファイルを以下のディレクトリー構造通りに配置し、npm run installしてからnpm run startでwebpack-dev-serverをlocalhost: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

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6</head>
7<body>
8
9<div id="root"></div>
10
11<script src="./bundle.js"></script>
12</body>
13</html>

index.js

JavaScript
1import React, { Component } from 'react';
2import ReactDOM from 'react-dom';
3
4
5class App extends Component {
6  render() {
7    return (
8      <div className="test">
9        <p>test</p>
10      </div>
11  );
12  }
13}
14
15ReactDOM.render(
16  <App />,
17  document.getElementById('root')
18);

package.json

json
1{
2  "name": "sample",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "start": "webpack-dev-server",
8    "build": "webpack"
9  },
10  "dependencies": {
11    "react": "^16.3.2",
12    "react-dom": "^16.3.2"
13  },
14  "devDependencies": {
15    "@babel/preset-react": "^7.0.0-beta.44",
16    "babel-preset-react": "^6.24.1",
17    "@babel/core": "^7.0.0-beta.44",
18    "@babel/preset-env": "^7.0.0-beta.44",
19    "babel-loader": "^8.0.0-beta.2",
20    "webpack": "^4.5.0",
21    "webpack-cli": "^2.0.14",
22    "webpack-dev-server": "^3.1.3"
23  }
24}

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 01:36

HayatoKamono

総合スコア2415