2016-04-14 27 views
1

React kod tabanımı ES2016'ya taşımaya çalışıyorum ancak en basit örneği geçemiyorum, biraz yardıma ihtiyacım var!Tepki başlangıcı ES2016

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
</head> 
<body> 
    <wrapper></wrapper> 

    <script src="js/lib/react-with-addons.min.js"></script> 
    <script src="js/lib/react-dom.min.js"></script> 
    <script src="js/bundle.js"></script> 
</body> 
</html> 

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { App } from './app'; 

ReactDOM.render(
    <App/>, 
    document.querySelector('wrapper') 
); 

import React from 'react'; 

export default class App extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <app>something goes there</app> 
     ) 
    } 
}; 

gulpfile.js app.js

var gulp = require('gulp'), 
    browserify = require('browserify'), 
    source = require('vinyl-source-stream'), 
    gutil = require('gulp-util'), 
    babelify = require('babelify'); 

gulp.task('jsx', function() { 
    browserify({ 
     entries: './src/web/js/main.jsx', 
     extensions: ['.jsx'], 
     debug: true 
    }) 
    .transform(babelify, {presets: ['es2015', 'react']}) 
    .bundle() 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('./dist/web/js/')) 
}); 

gulp.task('default', ['jsx']); 
çalışması lazım gibive package.json

{ 
    "name": "test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.html", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "?.git" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.0.1", 
    "react-dom": "^15.0.1" 
    }, 
    "devDependencies": { 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "babelify": "^7.2.0", 
    "browserify": "^13.0.0", 
    "gulp": "^3.9.1", 
    "gulp-util": "^3.0.7", 
    "reactify": "^1.1.1", 
    "vinyl-source-stream": "^1.1.0" 
    } 
} 

görünüyor, ama ben şu iki hatalar

warning.js almaya devam: 44 Uyarı: React.createElement: tip olmamalı null, tanımsız, boolean veya sayı. Bir dize (DOM öğeleri için) veya bir ReactClass (bileşik bileşenler için) olmalıdır.

ve

invariant.js: 38 Yakalanmayan Değişmez İhlali: Eleman türü geçersiz: beklenen (yerleşik bileşenler için) bir dize veya (kompozit bileşenler için) bir sınıf/fonksiyon ancak var: tanımsız.

Bunun aptalca basit bir şey olması gerektiğini biliyorum, ama bunu anlayamıyorum. Lütfen yardım et.

cevap

3

değiştirin Buna

import { App } from './app'; 

:

import App from './app'; 
+0

sayesinde! o oldu! – Stone