React w/JSX: Lade Klasse in JSX in HTML

Ich bin neu zu Reagieren und habe versucht, ein paar Tutorials zu durchlaufen, aber kein Glück, so dass ich hier Frage stellen.React w/JSX: Lade Klasse in JSX in HTML

Mein Setup: Ich habe eine .jsx-Datei, die eine Klassendefinition enthält:

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> 
     ); 
    } 
}

Ich mag würde dies in meinem index.html tun (app.js enthält die wichtigsten Vorzüge 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>

Ich baute mein webpack.config.js auf diese Weise

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]' 
    }, 
};

Wie Sie erwartet haben, ist diese Einstellung nicht funktioniert und ich bin fest. Ich vermute, dass es etwas damit zu tun hat, wie ich ReactDOM anrufe (vielleicht gehört es in die jsx?)

Wie auch immer, einige Hinweise würden geschätzt! Vielen Dank!

Quelle

2016-08-18 user1836155

Hoffe, dass hilft. Tue so etwas.

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]' 
    }, 
};

Quelle

2016-08-18 08:28:27

Dank. Ich folgte Ihrem Setup und stieß auf diesen Konsolenfehler: HelloWorld.js: 2 Uncaught ReferenceError: webpackJsonp_name_ ist nicht definiert – user1836155

OK. Ich habe das mit 2 zusätzlichen Änderungen zu arbeiten. (1) vendor.js (oder app.js) muss viel früher referenziert werden (z. B. in ). (2) Der Verweis auf die Kompilierung HelloWorld.js muss in sein. Ich habe es am Ende von bei vorgeschlagen hier vorgeschlagen und es hat funktioniert. Danke für deine Hilfe, Alter. – user1836155

genau. herzlich willkommen. fröhliche Codierung. –

React w/JSX: Lade Klasse in JSX in HTML

Antwort

Verwandte Themen