如何導入反應文件

我是新來的JavaScript和React.js和我在與進口的麻煩。如何導入反應文件

我有以下index.js文件：

var Main = React.createClass ({ 
    render: function() { 
     return (
      <div>test</div> 
     ); 
    } 
}); 


ReactDOM.render(
    <Main/>, 
    document.getElementById('content') 
);

以下pub.js文件：

export default class Pub extends React.Component { 
    render() { 
     return <div>test</div> ; 
    } 
};

的pub.js文件和文件index.js包含在同一文件夾 - > /腳本。我也有以下index.html文件：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React Application</title> 
    <!-- Not present in the tutorial. Just for basic styling. --> 
    <link rel="stylesheet" href="css/base.css" /> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/remarkable.min.js"></script> 
    </head> 
    <body> 
    <div id="content"></div> 
    <script type="text/babel" src="scripts/index.js"></script> 
    </body> 
</html>

這工作完全正常，即加載一個頁面，上面寫着「測試」

但如果我只是導入酒吧類（甚至沒有使用它），如下，應用程序中斷，屏幕上不顯示任何內容。

import Pub from './pub' 

var Main = React.createClass ({ 
    render: function() { 
     return (
      <div>test</div> 
     ); 
    } 
}); 


ReactDOM.render(
    <Main/>, 
    document.getElementById('content') 
);

此外，如果錯誤是由未使用的進口造成的，我也試過如下：

ReactDOM.render(
    <Pub/>, 
    document.getElementById('content') 
);

如果任何人能更好地揭示問題的一些輕，甚至，點我對語法檢查React.js代碼的好工具，我將不勝感激。

來源

2017-01-20 John Devitt

進口不會在瀏覽器中運行，你需要的東西導入爲你喜歡的WebPack/browserify /彙總 – azium

https://github.com/facebookincubator/create-react-app是一個不錯的啓動和運行的基礎，如果你不想要進入學習的WebPack –

此外 - https://reactforbeginners.com/是學習基礎知識的非常好的資源（以及更高級的東西） –

進出口使用的WebPack建築/ transpiling /服務我的代碼。

我已經試過你的樣品，並在這樣的設置工作：

我創建Pub.jsx組件，並在這樣的方式出口：

import React from 'react'; 

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

export default Pub;

然後我進口酒吧元件和其他元件在同目錄，它是正確呈現：

import React from 'react'; 

import Pub from './Pub'; 

class ExplorableList extends React.Component { 
    render() { 
     return (<Pub />); 
    } 
} 

export default ExplorableList;

渲染結果的瀏覽器：https://www.screencast.com/t/Ojwrq3KNE

我的文件夾結構：https://www.screencast.com/t/9Mi8LLdnv

檢查你的作品（如果不是，提供確切的錯誤你得到）

來源

2017-01-20 17:31:15

如何導入反應文件

回答

相關問題