如何在單獨的文件中正確存儲React組件並導入React？

Question

我已經完成了一些React教程的介紹，並且我試圖將我的一些知識用到目前為止。 我已成功在<script type='text/babel'>創建了一些組件，並使用babel的browser.js將其轉換為瀏覽器中的JS客戶端。

但是，我現在正試圖將我的組件分解為單個文件，轉換它們，然后將已轉換的JS提供給客戶端，而不是在客戶端完成轉換。

我對如何將ReactJS正確導入我的組件JSX文件感到困惑。 我之前沒有構建過大型JS應用程序，因此我不熟悉將庫導入其他模塊的方法。

這是我的組件JSX文件之一：

var SidebarFilter = React.createClass({
  render: function() {
    return (
        <div className="btn-group">
          Some markup removed for brevity. 
        </div>
    );
  }
});

在我的主html文件中，如果我有：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

在我的組件的任何<script>標簽之前，一切正常。 但是，如果組件放在react / reactdom腳本標記之上，則它不起作用。

我已經看到javascript有一個import ，但也有require ，但我不確定有什么不同，哪個更好用，何時，如果其中一個/兩個需要任何額外的建築物或如果它們在正確使用瀏覽器。

謝謝！

Answer 1

如果您只是學習反應，那么您使用腳本標記的方式是在html內部。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

如果要開發可部署到生產的應用程序，則需要按照以下步驟操作。 毫無疑問，互聯網上有更好的教程，但它會給你一些想法。

1.Need Browserfiy或Webpack：

在瀏覽器中，您不能像編寫node.js代碼時那樣通常require或import模塊。 在Browserify / Webpack的幫助下，您可以編寫使用require/import代碼，方法與在節點環境中使用它的方式相同。 我假設您將使用webpack考慮其受歡迎程度。

2.安裝依賴項（es6）

這些是項目（ package.json ）中所需的最小依賴項，以使其正常工作

  "devDependencies": {
        "babel-cli": "^6.3.17",
        "babel-core": "^6.3.21",
        "babel-eslint": "^5.0.0-beta6",
        "babel-loader": "^6.2.0",
        "babel-preset-es2015": "^6.3.13",
        "babel-preset-react": "^6.3.13",
        "babel-preset-stage-3": "^6.3.13",
        "css-loader": "^0.23.0",
        "eslint": "^1.10.3",
        "eslint-loader": "^1.1.1",
        "eslint-plugin-react": "^3.12.0",
        "style-loader": "^0.13.0",
        "webpack": "^1.12.9",
        "webpack-dev-server": "^1.14.0"
      },
      "dependencies": {
        "react": "^15.0.0-rc.1",
    "react-dom": "^15.0.0-rc.1"

3.寫你的webpack-config.js文件

一個示例webpack配置文件應該是這樣的。 不要問我關於它的每一點，而是看看webpack教程，因為我無法解釋這里的一切。 請記住， Webpack是一個模塊捆綁器，可以為瀏覽器捆綁javascript和其他資產。

var path    = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ]
  },
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: 'http://localhost:8080/public/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
   loaders: [
      {
        test      : /\.jsx?$/,
        include   : path.join(__dirname, 'src'),
        loader    : 'react-hot!babel'
      },
      {
        test      : /\.scss$/,
        include   : path.join(__dirname, 'sass'),
        loaders   : ["style", "css?sourceMap", "sass?sourceMap"]
      },
      {
          test    : /\.(png|jpg|svg)$/,
          include : path.join(__dirname, 'img'),
          loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
     } // inline base64 URLs for <=30k images, direct URLs for the rest
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

4.為您的應用程序設置入口點和路線

src-> index.js src-> routes.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Router,browserHistory} from 'react-router';
import routes from './routes';

ReactDOM.render(
    <Router routes={routes} history={browserHistory}/>
  , document.querySelector('.init')
);

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/app';
import Home from './components/home';


module.exports = (
       <Route path="/" component={App}>
           <IndexRoute component={Home}/>
       </Route>
)

5.在項目根目錄中設置index.html

<!DOCTYPE html>
<html>
  <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Welcome to ReactJs</title>
  </head>
  <body>
    <div class="init"></div>
  </body>
  <script src="./public/bundle.js"></script>
</html>

6.Running

形成項目根類型

webpack-dev-server --progress --colors

進口和要求

import和require在功能上非常相似。 唯一不同的是import可與ES6而新的語法糖require使用與ES5。

Answer 2

import和require都用於模塊化javascript應用程序，但它們來自不同的地方：

進口

import語句是ES6的一部分，如果您已經在項目中使用帶有babel的ES6，那么您可以正常使用它。 它將先前導出的模塊（或其某些部分）導入到聲明它的文件中。

因此，在import React, { PropTypes, Component } from 'react'我們只從react模塊導入PropTypes和Component成員，因此我們不必導入整個'react'模塊，只導入我們需要的成員，我們將它分配給React變量。

您可以在此處詳細了解import 。

要求

require語句是Node.js模塊加載系統的一部分，其作用與ES6 import相同。 它允許您導入以前導出的模塊或其中的一部分。

var React = require('react')將整個react模塊導入React變量。

您可以在此處閱讀更多關於Node.js模塊系統的信息。

對於這兩種情況，我們導入的模塊可以來自不同的來源，例如來自npm下載的庫（如“react”）或來自您自己的文件，例如您創建和導出的組件。 在第二種情況下，由於它不是來自你的'node_modules'文件夾的npm下載模塊，我們必須寫入文件的路徑。 例如：

import MyComponent from './components/MyComponent.js';

要么

var MyComponent = require(./components/MyComponent.js;

您可以使用您喜歡的任何一種。

導出模塊

要導出模塊，您有兩個選項， Node.js模塊加載系統和ES6 。

正如您所看到的，您的下一步是使用Node.js作為環境來構建React應用程序以及Webpack或Gulp之類的構建工具，以進行轉換，縮小等操作。您可以從Webpack教程Cerad在他的評論中指出。

如何在單獨的文件中正確存儲React組件並導入React？

問題描述

2 個解決方案

解決方案1
10 已采納 2016-03-18 09:42:32

解決方案2
4 2016-03-18 09:06:38

進口

要求

導出模塊

如何在單獨的文件中正確存儲React組件並導入React？

問題描述

2 個解決方案

解決方案1 10 已采納 2016-03-18 09:42:32

解決方案2 4 2016-03-18 09:06:38

進口

要求

導出模塊

解決方案1
10 已采納 2016-03-18 09:42:32

解決方案2
4 2016-03-18 09:06:38