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中

回答

相关问题