[解決済み] ReactJsのCreateClassは関数ではない
2022-02-12 03:39:54
質問
var React = require('react');
module.exports=React.createClass({
render:function(){
return(
<div>
<h1> the list </h1>
</div>
)}
})
上記のコードを実行すると、次のようなエラーが発生します。
app.js:4 Uncaught TypeError: React.createClass is not a function
これはバージョンの違いなのか、それともタイポなのか?
package.json-I have included create-react-class as seen here but not in the bower.json file
{
"dependencies": {
"browser-sync": "^2.18.13",
"browserify": "^14.4.0",
"create-react-class": "^15.6.2",
"ejs": "^2.5.7",
"express": "^4.16.0",
"gulp": "^3.9.1",
"gulp-live-server": "0.0.31",
"react": "^16.0.0",
"reactify": "^1.1.1",
"vinyl-source-stream": "^1.1.0"
}
}
gulpfile.js -このファイルに何か依存関係がないでしょうか?
var gulp= require('gulp');
var LiveServer= require('gulp-live-server');
var browserSync=require('browser-sync');
var browserify = require('browserify');
var reactify= require('reactify');
var source = require('vinyl-source-stream');
gulp.task('live-server', function(){
var server= new LiveServer('server/main.js');
server.start();
})
gulp.task('bundle',function(){
return browserify({
entries:'app/main.jsx',
debug:true,
})
.transform(reactify)
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./.tmp'))
})
gulp.task('serve',['bundle','live-server'],function(){
browserSync.init(null,{
proxy: "http://localhost:7777",
port:9001
})
})
そして、私のmain.jsxは以下のようになっています。
var React = require('react');
var createReactClass = require('create-react-class');
var GroceryItemList=require('./components/GroceryItemsList.jsx');
React.render(<GroceryItemList/>,app);
groceryitems.jsxには、以下のようなものがあります。
var React = require('react');
var createReactClass = require('create-react-class');
module.exports=React.createReactClass({
render:function(){
return(
<div>
<h1> Grocery Listify </h1>
</div>
)
}
})
createReactClassを追加すると「createReactClass is not function」というエラーが発生し、importとES6構文を追加すると「inlegal import deceleration」と表示されます。 ありがとうございました。
ナヴィーン
解決方法は?
につきまして
ドキュメント
のように、npm create react class パッケージを取得する必要があります。プロジェクトのファイルパスのコマンドラインから、以下を実行する必要があります。
npm install create-react-class --save
というように、コードを修正します。
var React = require('react');
//You need this npm package to do createReactClass
var createReactClass = require('create-react-class');
module.exports=createReactClass({
render:function(){
return(
<div>
<h1> the list </h1>
</div>
)
}
また、このようにコンポーネントをレンダリングするためには、React DOMが必要です。
npm install react react-dom
var ReactDOM = require('react-dom');
ReactDOM.render(<GroceryItemList/>,app);
関連
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み】React this.setStateは関数ではありません。
-
[解決済み] nginxでcertbotを使用する際の問題点
-
[解決済み] React JSXのforEach()でHTMLが出力されない
-
[解決済み] ReactJSでコンポーネントがtext型の非制御入力を制御エラーに変更する場合
-
[解決済み] ReactJS Componentに複数のクラスを追加する方法は?
-
[解決済み] ReactJS - .JSと.JSXの比較
-
[解決済み】ReactJS - "setState "が呼ばれるたびにrenderが呼び出されるのですか?
-
[解決済み】ReactJS 2つのコンポーネントが通信しています。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Warning.Itが表示されるのはなぜですか?Functions are not valid as a React child?
-
[解決済み] マテリアルUIセレクトフィールドのマルチセレクト
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] Next.jsでWebSocketを利用する
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには?
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] eslint: no-case-declaration - case ブロックで予期しない字句の宣言があった。
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] 拡張子.tsと.tsxの違いは何ですか?どちらもreactのタイプスクリプトファイルの拡張子として使用されます。では、どこで使うべきなのでしょうか?
-
[解決済み] リアクトコンポーネントにiframeを挿入する