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

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

ただいまの
回答率

89.99%

jsx内でReact.createClassが使えないとエラーが出るので、使用できるようにしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,202

komiglas

score 14

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

そもそも論ですが、React.createClass古い書き方です。Babelなども入っている環境ですし、ES6のclass構文でコンポーネントを書きましょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/05 11:57

    ありがとうございます、上記のES6の構文でいけました。ありがとうございました。

    キャンセル

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

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

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