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

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"
  }
}

以上、よろしくお願いいたします。