React不附加DOM到HTML

我在我的ReactJs代碼中遇到了一些問題。一切都在編譯沒有任何錯誤使用webpack。但是在webpack dev服務器啓動後，當我瀏覽到localhost：9000時，沒有任何內容從ReactJs插入到DOM中。React不附加DOM到HTML

我運行在終端npm start。

這是所有我寫的代碼 -

.babelrc

{ 
    "presets": ["es2015", "react", "stage-0"] 
}

.eslintrc

{ 
    "ecmaFeatures": { 
    "jsx": true, 
    "modules": true 
    }, 
    "env": { 
    "browser": true, 
    "node": true 
    }, 
    "parser": "babel-eslint", 
    "rules": { 
    "quotes": [2, "single"], 
    "strict": [2, "never"], 
    "react/jsx-uses-react": 2, 
    "react/jsx-uses-vars": 2, 
    "react/react-in-jsx-scope": 2 
    }, 
    "plugins": [ 
    "react" 
    ] 
}

.jslintrc

{ 
    "node": true, 
    "browser": true, 
    "esnext": true, 
    "newcap": false 
}

的index.html

<html> 
    <head> 
    <title>Forms in React Test</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    </head> 
    <body> 
    <div id='root' class="container"> 
    </div> 
    </body> 
    <script src="/static/bundle.js" type="text/javascript"></script> 
</html>

index.js

import React, { Component } from 'react'; 
    import ReactDOM from 'react-dom'; 

    class IndexComponent extends React.Component{ 
     render() { 
     return (
      <div> 
      <input type="text" value="Shawn" /> 
      </div> 
     ); 
     } 
    } 

    ReactDOM.render(<IndexComponent />, document.getElementById('root')); 

**package.json** 
{ 
    "name": "chapter4", 
    "version": "0.0.1", 
    "description": "ReactJS forms example", 
    "scripts": { 
    "start": "node server.js", 
    "lint": "eslint src" 
    }, 
    "author": "", 
    "license": "MIT", 
    "homepage": "", 
    "devDependencies": { 
    "babel": "^6.23.0", 
    "babel-cli": "^6.24.1", 
    "babel-core": "^6.24.1", 
    "babel-eslint": "^7.2.2", 
    "babel-loader": "^6.4.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "eslint": "^3.19.0", 
    "eslint-plugin-react": "^6.10.3", 
    "react-hot-loader": "^1.3.1", 
    "webpack": "^2.4.1", 
    "webpack-dev-server": "^2.4.2" 
    }, 
    "dependencies": { 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4" 
    } 
}

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:9000', 
    'webpack/hot/only-dev-server', 
    './src/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    // new webpack.NoEmitOnErrorsPlugin() 
    ], 
    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     include: [path.join(__dirname, 'src')], 
     }, 
     { 
     use: [ 
      { 
      loader: 'react-hot-loader' 
      }, 
      { 
      loader: 'babel-loader', 
      options: { 
       // cacheDirectory: 'babel_cache', 
       presets: ['react', 'es2015'] 
      } 
      } 
     ] 
     } 
    ] 

    } 
};

謝謝大家提前。

來源

2017-04-15 Himadri Ganguly

在JS控制檯中是否有任何錯誤？或者在編譯期間以及運行時錯誤中沒有任何錯誤？ – saadq

打開您的控制檯並檢查是否有任何錯誤。那會讓你指向正確的方向。 –

@saadq在控制檯上沒有錯誤。 –

得到了解決方案。在rules部分我犯了一些錯誤。以下將是正確的規則。

rules: [{ 
    test: /\.jsx?$/, 
    include: [path.join(__dirname, 'src/')], 
    use: [ 
    { 
     loader: 'react-hot-loader' 
    }, 
    { 
     loader: 'babel-loader', 
    } 
    ] 
}]

這將是正確的webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:9000', 
    'webpack/hot/only-dev-server', 
    path.resolve(__dirname, 'src/') 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin() 
    ], 
    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 
    module: { 
    rules: [{ 
     test: /\.jsx?$/, 
     include: [path.join(__dirname, 'src/')], 
     use: [ 
     { 
      loader: 'react-hot-loader' 
     }, 
     { 
      loader: 'babel-loader', 
     } 
     ] 
    }] 
    } 
};

感謝所有的幫助。

來源

2017-04-16 09:03:36

在你webpack.confg.js您具備以下條件：

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:9000', 
    'webpack/hot/only-dev-server', 
    './src/index' // <-- no src dir in project 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    // new webpack.NoEmitOnErrorsPlugin() 
    ], 
    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     include: [path.join(__dirname, 'src')], // <-- no src dir in project 
     }, 
     { 
     use: [ 
      { 
      loader: 'react-hot-loader' 
      }, 
      { 
      loader: 'babel-loader', 
      options: { 
       // cacheDirectory: 'babel_cache', 
       presets: ['react', 'es2015'] 
      } 
      } 
     ] 
     } 
    ] 

    } 
};

你沒有src目錄，在這個項目中。

修復：做一個src目錄和移動你的index.js文件在裏面。您也嘗試使用react-hot-loader而不排除node_modules。試試這個爲模塊部分：

module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      loaders: ['react-hot-loader', 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2&presets[]=stage-0'], 
      include: [path.join(__dirname, 'src')], 
      exclude: '/node_modules/' 
     } 
    ] 
}

測試和它的作品在我的地方。

來源

2017-04-16 02:26:33

React不附加DOM到HTML

回答

相關問題