jsx内でReact.createClassが使えないとエラーが出るので、使用できるようにしたい
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 1,202
const React = require('react');
const ReactDOM = require('react-dom');
var Foo = React.createClass({
render(){
return (<div>Foo</div>);
},
});
ReactDOM.render(
<Foo />,
document.getElementById('example')
);
React.js初心者です。
現在手探り状態でローカル環境構築中で
上記のようにjsx内でテスト用として記述しました。
ただ、ターミナルで
component.jsx:17 Uncaught TypeError: React.createClass is not a function
と出ましたので色々調べたところ「create-react-class」のモジュールが必要とわかりましたので
それをインストールしようとしたところターミナルで以下のエラーがでました。
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kensu/.npm/_logs/2018-10-05T01_48_56_993Z-debug.log
kensu-iMAC2noiMac:node_modules kensu$ npm i babel-plugin-transform-class-properties
npm WARN checkPermissions Missing write access to /Users/kensu/Desktop/web/node_modules/babel-plugin-transform-class-properties
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@1.0.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN kensu_template@0.0.0 No repository field.
npm WARN The package imagemin-pngquant is included as both a dev and production dependency.
npm ERR! path /Users/kensu/Desktop/web/node_modules/babel-plugin-transform-class-properties
npm ERR! code ELOOP
npm ERR! errno -62
npm ERR! syscall access
npm ERR! ELOOP: too many symbolic links encountered, access '/Users/kensu/Desktop/web/node_modules/babel-plugin-transform-class-properties'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kensu/.npm/_logs/2018-10-05T01_54_04_739Z-debug.log
ちょっと解決方法がわからず皆様の落ちかを借りたいと思っております。。
また、以下にpackage.jsonも記述いたします。
{
"name": kensu_template",
"version": "0.0.0",
"description": "kensu_template",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"browser-sync": "^2.18.2",
"css-loader": "^1.0.0",
"css-mqpacker": "^6.0.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-cached": "^1.1.1",
"gulp-changed": "^1.3.2",
"gulp-clean-css": "^3.7.0",
"gulp-combine-media-queries": "^0.2.0",
"gulp-compass": "^2.1.0",
"gulp-concat": "^2.6.1",
"gulp-connect-php": "0.0.8",
"gulp-csscomb": "^3.0.8",
"gulp-cssmin": "^0.1.7",
"gulp-csso": "^3.0.1",
"gulp-ejs": "^3.1.1",
"gulp-gzip": "^1.4.1",
"gulp-htmlhint": "^0.3.1",
"gulp-imagemin": "^3.1.1",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^7.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.0.0",
"gulp-sftp": "^0.1.5",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.3.11",
"gulp-webpack": "^1.5.0",
"imagemin-pngquant": "^5.0.0",
"jquery": "^3.3.1",
"jsx-loader": "^0.13.2",
"postcss-cssnext": "^3.1.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"rimraf": "^2.6.1",
"run-sequence": "^1.2.2",
"style-loader": "^0.23.0",
"vinyl-ftp": "^0.5.0",
"webpack": "^3.12.0",
"webpack-stream": "^4.0.0"
},
"dependencies": {
"animejs": "^2.2.0",
"del": "^2.2.2",
"imagemin-pngquant": "^5.0.0"
}
}
以上、よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
そもそも論ですが、React.createClass
は古い書き方です。Babelなども入っている環境ですし、ES6のclass
構文でコンポーネントを書きましょう。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.99%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/10/05 11:57