https://github.com/wxungang/ES6_REACT_1104.git(项目链接)
app.jsx 文件
/**
Created by xiaogang on 2016/5/26.
*/
"use strict";
ReactDOM from 'react-dom';
-
test from "../components/test";
console.log(test);ReactDOM.render(
<div> <test className="myLists" title="header"> </test> </div>, document.getElementById('body')
);
test.js文件(简单的组件都没法渲染)
/**Created by xiaogang on 2016/6/8.
*/
"use strict";
{Component, PropTypes} from 'react';
-
default class Test extends Component{
constructor(props){ super(props); this.state={}; } render(){ return <div>test {this.props.name }</div> }
}
webpack.config.js
path = require('path');
-
webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map', entry: [ 'webpack-hot-middleware/client', './docs/src/js/app.jsx', './docs/src/less/style.less' ], output: { path: path.join(__dirname, 'docs'), filename: 'js/app.js', publicPath: '/' }, externals: {'react': 'React', 'react-dom': 'ReactDOM'}, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], module: { loaders: [ { test: /\.jsx?$/, loaders: ['babel'], include: [ path.resolve(__dirname, 'src'), path.resolve(__dirname, 'docs'), path.resolve(__dirname, 'node_modules/refetch') ] }, { test: /\.(css|less)$/, loader: 'style-loader!css-loader?localIdentName=[hash:base64:8]!less-loader' }, { test: /\.(ttf|eot|woff|woff2|otf|svg)/, loader: 'file-loader?name=./font/[name].[ext]' }, { test: /\.json$/, loader: 'file-loader?name=./json/[name].json' }, { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=10000&name=./images/[name].[ext]' } ] }
};
幕课网的回答:很简单的原因,React组件的首字母必须大写,包括在import的时候,import Test from...然后用<Test />就正常显示了。
另外你用的这个cdn好像非常慢,换一个国内的好了。
都是大神呀,看来我平时细节不好,原来是强制的规范呀。
粗看了一下,发现俩问题:
第一,webpack.config.js
的jsx
那个loader
里却少babel-preset-react
和babel-preset-es2015
,这两个presets
不设置,压根不会能跑起来,像这样:
第二,还是webpack.config.js
,你又不做独立类库,这句话写来干嘛?externals: {'react': 'React', 'react-dom': 'ReactDOM'},
return
后面的要用括号 ()
围起来。你先这样试试。很有可能这个问题。