ReactJs - Mehrere Komponenten - Fehler: Uncaught ReferenceError: require ist nicht definiert

Ich bin neu zu reagieren, und ich habe Probleme mit mehreren Komponenten.ReactJs - Mehrere Komponenten - Fehler: Uncaught ReferenceError: require ist nicht definiert

Dies ist der Fehler, den ich Uncaught Reference erhalten: require

-Code nicht definiert ist, die ich verwende.

Index.HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
    <script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtf1/t39.3284-6/11057100_835863049837306_1087123501_n.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <div id="app"></div> 
    <script type="text/babel" src="js/layout.js"></script> 
</body> 
</html>

layout.js

import React from "react"; 
import ReactDOM from "react-dom"; 

import Header from "./header"; 

class Layout extends React.Component { 
    render() { 
     return(
     <div> 
      <Header/> 
     </div> 
    ); 
    } 
} 

const app = document.getElementById("app"); 
ReactDOM.render(<Layout/>, app);

Und header.js

import React from "react"; 
import ReactDOM from "react-dom"; 

export default class Header extends React.Component { 
    render() { 
     return(
      <h1>Hello header</h1> 
    ); 
    } 
}

Quelle

2016-06-22 xoomer

Babel behandelt nur die transpilation Teil (dh wandelt es2015 und jsx Syntax in gültige ES5). Sie müssen jedoch entweder einen Bundler (webpack, browserify) oder einen Modullader (systemjs oder jspm) verwenden, um Module zu laden.

Hier ist ein Beispiel mit SystemJS. Example.

konfigurieren systemjs loader

System.config({ 
    transpiler: 'babel', 
    baseURL: '', 
    map: { 
     babel: 'https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js', 
     react: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js', 
     'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js' 
    } 
}); 

// load application 
System.import('script.js');

Import lokale Dateien

// inside script.js 
import React from "react"; 
import ReactDOM from "react-dom"; 
import Header from "./header.js"; //note extension 

class Layout extends React.Component {

Quelle

2016-06-22 10:08:49

danken Ihnen Libs von CDN zu laden! Funktioniert gut :) – xoomer

ReactJs - Mehrere Komponenten - Fehler: Uncaught ReferenceError: require ist nicht definiert

Antwort

Verwandte Themen