React + Webpack - 単純なHello Worldコンポーネントの不変の違反エラー

Question

これまでのところ、webpack.config.jsファイルをjsxファイルを処理するように設定する方法を見つけました。

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}) 

module.exports = { 
    entry: [ 
    './app/index.jsx' 
    ], 
    output: { 
    path: __dirname + '/dist', 
    filename: "index_bundle.jsx" 
    }, 
    module: { 
    loaders: [ 
     {test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader", query: {presets: ['react', 'es2015']}} 
    ] 
    }, 
    resolve: { 
    extensions: ['','.js', '.jsx'] 
    }, 
    plugins: [HtmlWebpackPluginConfig] 
} 

そして、私は何をしようとしているのは非常に簡単に反応し、ブートストラップボタンでコンポーネントを反応させるレンダリングである：ここにある

HelloWorld.jsx

import React from 'react'; 
import { Button } from 'react-bootstrap'; 

export default React.createClass({ 
    getInitialState: function() { 
    return { 
     spanish: false 
    } 
    }, 
    handleClick: function() { 
    this.setState({spanish: true}); 
    }, 
    render: function() { 
    const text = this.state.spanish ? 'Hola Mundo!' : 'Hello World'; 
    const buttonText = this.state.spanish ? 'Click Para Cambiar a Inglés' : 'Click to Swith To Spanish'; 
    return (
     <div> 
     <h1>{text}</h1> 
     <Button onClick={this.handleClick}>{buttonText}</Button> 
     </div> 
    ) 
    } 
}) 

そして、ここにあります

index.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { HelloWorld } from './components/HelloWorld'; 

ReactDOM.render(
    <HelloWorld />, 
    document.getElementById('app') 
); 

：アプリケーションのエントリポイントここ

がpackage.jsonです：

{ 
    "name": "soundcloud-player", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "production": "webpack -p", 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "axios": "^0.15.1", 
    "babel-cli": "^6.16.0", 
    "babel-core": "^6.17.0", 
    "babel-preset-es2015": "^6.16.0", 
    "babel-preset-react": "^6.16.0", 
    "ejs": "^2.5.2", 
    "express": "^4.14.0", 
    "react": "^15.3.2", 
    "react-bootstrap": "^0.30.5", 
    "react-dom": "^15.3.2", 
    "react-redux": "^4.4.5", 
    "react-router": "^2.8.1", 
    "redux": "^3.6.0" 
    }, 
    "devDependencies": { 
    "babel-loader": "^6.2.5", 
    "html-webpack-plugin": "^2.22.0", 
    "http-server": "^0.9.0", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.16.2" 
    } 
} 

今、私はここで起こって二つの問題があり、それが起こって、なぜ私は見当がつかない：

1. 私はローカルホストに行くとき：8080、私を得ます不変違反エラーおよび警告：

   index_bundle.jsx：1300警告：React.createElement：typeは、null、未定義、ブール値、または数値であってはなりません。これは文字列（DOM要素の場合）またはReactClass（複合コンポーネントの場合）でなければなりません。

   キャッチインバリアント違反：要素タイプが無効です：文字列（組み込みコンポーネント用）またはクラス/関数（コンポジットコンポーネント用）が必要ですが、未定義です。私は私のwebpack.config.jsの「決意」部分を削除すると

2. 、突然プロジェクトのすべては、私の./components/HelloWorldコンポーネントを見つけることができず、エラーの多くをスロー

最初の問題については、コンポーネントのインポート時に{}を使用しようとしましたが、役に立たなかった。 2番目の問題は私の謎です。なぜなら、私はローダーの 'テスト'の部分で指定したので、すべてのjsxファイルをフェッチするべきだと思うからです。誰かが私のプロジェクトに何が間違っているのか理解してもらえますか？ありがとうございました。

Answer 1

ES6では、さまざまなインポートタイプについて少し混乱しています。 export defaultクラスまたは変数の場合は、中括弧を使用せずにインポートする必要があります。例えば：

B.

class X { } export default X; 

A.jsあなたはそれをデフォルトとして設定せずに何かをエクスポートする場合（私はデフォルトのエクスポートとして設定していなかった場合、例えばimport { X } from 'A.js';）一方JS

import X from 'A.js'; 

、あなたは中括弧を使用する必要があります。

これがなぜ機能するのか理解するために、ES5の構文で何が起こるかを知ることができます。デフォルトのエクスポートは、基本的にこれに変換します。

module.exports = MyExportedClass; 

を次に、あなたがそれをインポートするとき、import MyExportedClass from 'A.js';はに変換：

export class X { 

}; 

：オブジェクトに

var MyExportedClass = require('A.js'); 

デフォルト以外の輸出は実際に命名されたプロパティ

翻訳先：

module.exports = { 
    X: /* translated class */ 
} 

2番目の問題については、resolve行を削除すると、デフォルト値：["", ".webpack.js", ".web.js", ".js"]にリセットされます。これはdocumentationで指定されています。

認識された拡張子から.jsxを削除すると、拡張子を明示的に指定しない限り、Webpackは.jsxファイルを検索しません。

Answer 2

問題は、index.jsxで間違ったクラスをインポートすることです。 これを変更する必要があります次のいずれかの

import React from 'react'; 
import ReactDOM from 'react-dom'; 
//import { HelloWorld } from './components/HelloWorld'; 
//to 
import HelloWorld from './components/HelloWorld.jsx'; 

ReactDOM.render(
    <HelloWorld />, 
    document.getElementById('app') 
); 

か、HelloWorld.jsxの輸出を変更する必要があります。

import React from 'react'; 
import { Button } from 'react-bootstrap'; 

const HelloWorld = React.createClass({ 
    getInitialState: function() { 
    return { 
     spanish: false 
    } 
    }, 
    handleClick: function() { 
    this.setState({spanish: true}); 
    }, 
    render: function() { 
    const text = this.state.spanish ? 'Hola Mundo!' : 'Hello World'; 
    const buttonText = this.state.spanish ? 'Click Para Cambiar a Inglés' : 'Click to Swith To Spanish'; 
    return (
     <div> 
     <h1>{text}</h1> 
     <Button onClick={this.handleClick}>{buttonText}</Button> 
     </div> 
    ) 
    } 
}) 

export { 
    HelloWorld 
} 

私は最初のアプローチはクリーナーだと思います。