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') );
上記が開発時使用していますファイルになります。
長々となってしまいましたが、宜しくお願いいたします。
回答1件
あなたの回答
tips
プレビュー