Сначала попробуйте установить npm, возможно, ваши зависимости в package.json установлены не полностью.

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);

the 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 не является функцией, а когда я добавляю импорт и синтаксис ES6, я получаю «незаконное замедление импорта». Спасибо,

Нэвин

 Dream_Cap29 сент. 2017 г., 09:28
Вам помог какой-нибудь из ответов ...? Если это так, пожалуйста, отметьте галочкой.
 Dream_Cap30 сент. 2017 г., 05:56
Я обновил свой ответ, вам нужен ReactDOM.
 Naveen DINUSHKA30 сент. 2017 г., 05:13
Спасибо за помощь
 Andrew29 сент. 2017 г., 08:10
Не было бы проблемы с попыткой экспортировать неназванный компонент React? Кстати, вы, вероятно, должны использовать обновленный и очень хорошо поддерживаемый синтаксис класса ES6 в будущем.
 Naveen DINUSHKA29 сент. 2017 г., 08:11
Хорошо, я буду использовать импорт в следующий раз

Ответы на вопрос(8)

йти к createComponent с классом ECMA6.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const App = function(){};
App.prototype = Object.create(Component.prototype);
App.prototype.render = function(){
     return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
     )
   }
export default App;

Решение Вопроса

В соответствии сдокументы, вам нужно получить пакет класса npm create реагировать. Из командной строки пути к файлу вашего проекта вам нужно сделать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);
 Naveen DINUSHKA01 окт. 2017 г., 04:11
если мы используем module.exports = createReactClass, это не выдаст ошибку. createReactClass не является функцией
 Naveen DINUSHKA30 сент. 2017 г., 05:13
Я получаю эту ошибку на консоли 'createReactClass' не является функцией
 Dream_Cap30 сент. 2017 г., 05:26
Вы делали «npm install create-реагировать-класс --save» из командной строки, чтобы установить пакет?
 Felipe08 мар. 2018 г., 06:43
Я все еще получаю ошибку ... в основном в консоли я получаю что-то вроде функции, скажем: Greeter, еще не объявлен ... странно ...

в котором говорится, что React.creatClass является неопределенной функцией, это потому, что более новые версии реакции не поддерживают это.

Вы можете попробовать ниже:

Установите пакет создания-реакции-класса NPM:

npm установить создать-реагировать-класс --save-dev

Затем создайте новую переменную в переменной ReactDom:

var createReactClass = require ('create-Reaction-class');

Теперь вместо использования React.createClass () для компонентов используйте var createReactClass ()

Пример: заменить это:

var TodoComponent = React.createClass ({render: function () {return (<h1>Helloooo</h1>); }});

С этим:

var TodoComponent = createReactClass ({render: function () {return (<h1>Helloooo</h1>); }});

 Sarz15 февр. 2018 г., 08:47
Привет с той же проблемой, но теперь я сталкиваюсьReferenceError: require is not defined

безусловно, проблема с версией. Если вы начинаете с нуля, я бы предложил вам создатьReact component расширяяReact.Component вместо того, чтобы использоватьReact.createClass так как его устарела от версии16.0 и был перемещен в отдельный пакет'create-react-class' как @Dream_Cap также упомянуть

Также используйте синтаксис ES6 для импорта. Вы бы изменили свой код на

import React from 'react';

export default class App extends React.Component {
    render(){
       return(
           <div>
               <h1> the list  </h1>
           </div>   
        )
     }
}
 Gerard Simpson26 дек. 2017 г., 02:02
Это должен быть принятый ответ
 Naveen DINUSHKA30 сент. 2017 г., 05:11
Я получаю это при попытке импортировать ошибку синтаксического анализа: строка 1: недопустимое объявление импорта при анализе файла:
 Dream_Cap30 сент. 2017 г., 05:27
попробуйте "const React = require ('реагировать')"
 Shubham Khatri13 дек. 2017 г., 07:12
@arsho, проверь этоstackoverflow.com/questions/42051886/...
 arsho13 дек. 2017 г., 06:57
Отличный ответ! Но когда я держалdefault это была ошибка...does not contain an export named ..., Тогда я использовалexport class ... безdefault, Можете ли вы помочь мне понять необходимостьdefault Вот?

1) используйте реакцию-dom для рендеринга

 var ReactDOM = require('react-dom');
  var List=require('./components/List.jsx');
  ReactDOM.render(<List/>,app);

2) использовать класс create-реагировать (не реагировать) и экспортировать его 'module.exports= createReactClass({.... вместоmodule.exports=React.createReactClass (это выдает ошибку 'createReactClass' не является функцией

Спасибо всем еще раз! '

Новые предупреждения об устаревании от React v15.5.0 +

Самое большое изменение в том, что мы извлеклиReact.PropTypes а такжеReact.createClass в свои собственные пакеты. Оба по-прежнему доступны через основнойReact объект, но с помощью любого из них будет записано одноразовое предупреждение об устаревании консоли в режиме разработки. Это позволит в будущем оптимизировать размер кода.

Миграция из React.createClass

Когда React был первоначально выпущен, не было никакого идиоматического способа создания классов в JavaScript, поэтому мы предоставили наш собственный:React.createClass.

Позже, классы были добавлены к языку как частьES2015, поэтому мы добавили возможность создавать компоненты React с использованием классов JavaScript. Наряду с функциональными компонентами,Классы JavaScript сейчас предпочтительный способ создания компонентов в React.

Для вашего существующегоcreateClass компоненты, мы рекомендуем вам перенести их в классы JavaScript. Тем не менее, если у вас есть компоненты, которые полагаются наmixinsпреобразование в классы может быть неосуществимым. Если так,create-react-class доступно наnpm в качестве замены:

// Before (15.4 and below)
var React = require('react');

var Component = React.createClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

// After (15.5)
var React = require('react');
var createReactClass = require('create-react-class');

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

Ваши компоненты будут продолжать работать так же, как и раньше.

Если вы заинтересованы в использованииновые классы JavaScriptПредлагаю вам взглянуть наВот.

Но для быстрого доступа я включу здесь несколько строк:

Самый простой способ определить компонент - написать функцию JavaScript:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Эта функция является допустимым компонентом React, потому что она принимает одинprops (что означает свойства) аргумент объекта с данными и возвращает элемент React. Мы называем такие компонентыfunctional потому что они буквально функции JavaScript.

Вы также можете использовать класс ES6 для определения компонента:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Вышеуказанные два компонента эквивалентны с точки зрения React.

 zero817 янв. 2019 г., 05:28
этот ответ лучше всего объясняет обстоятельства

возможно, ваши зависимости в package.json установлены не полностью.

Ваш ответ на вопрос