首页 > 使用ES6语法写的react组件无法渲染?

使用ES6语法写的react组件无法渲染?

https://github.com/wxungang/ES6_REACT_1104.git(项目链接)

app.jsx 文件
/**
    • Created by xiaogang on 2016/5/26.
      */
      "use strict";

    1. ReactDOM from 'react-dom';

    2. 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";

    3. {Component, PropTypes} from 'react';

    4. default class Test extends Component{

         constructor(props){
             super(props);
             this.state={};
         }
      
         render(){
             return <div>test {this.props.name }</div>
         }

      }

      webpack.config.js

    5. path = require('path');

    6. 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.jsjsx那个loader里却少babel-preset-reactbabel-preset-es2015,这两个presets不设置,压根不会能跑起来,像这样:

    第二,还是webpack.config.js,你又不做独立类库,这句话写来干嘛?externals: {'react': 'React', 'react-dom': 'ReactDOM'},


    return 后面的要用括号 () 围起来。你先这样试试。很有可能这个问题。

    【热门文章】
    【热门文章】