React w/JSX：將JSX中定義的類加載到HTML中

我是React的新手，嘗試通過幾個教程但沒有運氣，所以我在這裏求助於問題。React w/JSX：將JSX中定義的類加載到HTML中

我的設置：我有一個包含一個類定義一個.jsx文件：

HelloWorld.jsx

import React, { Component } from 'react'; 

export default class HelloWorld extends Component { 
    render() { 
     return (
      <div className='greeting-div'> 
       <div> 
        HELLO WORLD JSX 
       </div> 
      </div> 
     ); 
    } 
}

我願做這在我的index.html（app.js包含主JS資產）：

的index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>My First React Example</title> 
    <script type="text/javascript" src="../assets/app.js" ></script> 
    <script type="text/javascript" src="../assets/HelloWorld.js" ></script> 
    </head> 
    <body> 
    <div id="greeting-div"></div> 

    <script type="text/javascript"> 

     ReactDOM.render(
     <HelloWorld/>, 
     document.getElementById('greeting-div') 
    ); 
    </script> 
    </body> 
</html>

我配置我webpack.config.js這樣

webpack.config.js

var webpack = require("webpack"); 
var autoprefixer = require("autoprefixer"); 
var paths = require("./paths.js"); 
var files = require('./files.js'); 
var path = require("path"); 

module.exports = { 
    entry: { 
     HelloWorld : path.join(paths.hello, "HelloWorld"), 
     app: ["react", "react-dom", "react-bootstrap", "jquery", "underscore"] 
    }, 

    output: { 
     path: paths.webappAssets, 
     publicPath: "", 
     filename: "[name].js", 
     chunkFilename: "[chunkhash].js", 
     libraryTarget: 'var', 
     library: '[name]' 
    }, 
};

正如你可能已經預期，這種設置不工作，我堅持。我懷疑它與我如何呼叫ReactDOM有關（也許它屬於jsx？）

無論如何，一些指導將不勝感激！謝謝！

來源

2016-08-18 user1836155

希望有所幫助。做那樣的事。

HelloWorld.jsx

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

export default class HelloWorld extends Component { 
    render() { 
     return (
      <div className='greeting-div'> 
       <div> 
        HELLO WORLD JSX 
       </div> 
      </div> 
     ); 
    } 
} 
ReactDOM.render(
    <HelloWorld/>, 
    document.getElementById('greeting-div') 
);

的index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>My First React Example</title> 
    </head> 
    <body> 
    <div id="greeting-div"></div> 
    <script type="text/javascript" src="PATH_OF_YOUR_OUTPUR_SCRIPT" ></script> 
    </body> 
</html>

webpack.config.js：

var webpack = require("webpack"); 
var autoprefixer = require("autoprefixer"); 
var paths = require("./paths.js"); 
var files = require('./files.js'); 
var path = require("path"); 

module.exports = { 
    entry: { 
    path.resolve(__dirname, 'PATH_OF_YOUR_HelloWorld.jsx'), 
    }, 

    output: { 
     path: paths.webappAssets, 
     publicPath: "", 
     filename: "[name].js", 
     chunkFilename: "[chunkhash].js", 
     libraryTarget: 'var', 
     library: '[name]' 
    }, 
};

來源

2016-08-18 08:28:27

感謝。我跟着你的設置，遇到了這個控制檯錯誤：HelloWorld.js：2 Uncaught ReferenceError：webpackJsonp_name_未定義 – user1836155

好的。我得到了這個2個額外的變化。（1）vendor.js（或app.js）需要被引用之前（例如在）。（2）對編譯HelloWorld.js的引用需要在。我在的末尾提出了建議，並且它工作。謝謝你的幫助。 – user1836155

。歡迎。快樂的編碼。 –

React w/JSX：將JSX中定義的類加載到HTML中

回答

相關問題