反應 - 如何處理多部分網站？如何縮放反應應用程序？

我剛開始與react-create-app做出反應。我製作了一個小應用程序，並知道我在分割不同部分的網站時遇到問題。反應 - 如何處理多部分網站？如何縮放反應應用程序？

我正在製作一個html5遊戲的網站。我做了一個反應的快速原型（玩家可以看到其他連接的玩家，開始遊戲等）。例如，要獲得連接的玩家，我只需使用axios從JAVA彈簧服務器獲取數據。

但讓我說我想在這個應用程序之前創建一個歡迎/登錄頁面。 Like this 此頁面只是關於「看這個酷遊戲，現在註冊！」。

我應該如何處理這個問題？我應該使用React Router嗎？也許以後我想添加一個DevBlog？也許論壇？ ...我不希望有人想看到devblog從論壇下載所有資源。

我該如何輕鬆縮放我的小應用程序？

我迷失了自己，似乎有這麼多的方式！創建一個並行節點服務器？使用服務器端渲染？ NextsJS？ Redux？路由器？

單獨工作的人的最佳選擇是什麼？

來源

2017-03-16 hilderic sb

建議您閱讀反應路由器。另外，開始將頁面和頁面分割成組件。稍後您會看到將網站從可重用組件中分離出來是多麼容易。想想法式。您現在可以忽略服務器端，只需爲您的數據執行API調用即可。 – Joseph

+1反應路由器。 nextJS還內置了路由器，但我只用它做了一個小型測試項目。 redux是爲了國家管理，在我看來與指導人們到一個網站的不同「部分」無關。 – aberkow

好的，我應該爲所有不同的部分創建不同的路由器路由？但是，我應該關心服務器端？好吧，減肥似乎是脫節的東西，也許我應該關心以後的改善？ –

你可以使用react-router和一些叫做異步路由的東西。使用Webpack，您可以使用require.ensure爲每條路線創建多個拆分點。

而不是有一個巨大的js/css文件，你會得到多個（儘可能多你想）文件，當用戶輸入一個特定的路線異步下載。

import { injectReducer } from '../../store/reducers' 

export default (store) => ({ 
    path : 'forum', 
    /* Async getComponent is only invoked when route matches */ 
    getComponent (nextState, cb) { 
    /* Webpack - use 'require.ensure' to create a split point 
     and embed an async module loader (jsonp) when bundling */ 
    require.ensure([], (require) => { 
     /* Webpack - use require callback to define 
      dependencies for bundling */ 
     const Counter = require('./containers/ForumContainer').default 
     const reducer = require('./modules/forum').default 

     /* Add the reducer to the store on key 'forum' */ 
     injectReducer(store, { key: 'forum', reducer }) 

     /* Return getComponent */ 
     cb(null, Forum) 

    /* Webpack named bundle */ 
    }, 'forum') 
    } 
})

因此，與當有人進入yourawesomepage.com/forum上述配置必要的文件被下載並減速（從終極版）負責論壇被注入。

This是一個開箱即用的開箱即用功能。

來源

2017-03-16 14:29:11

看起來很有趣，webpack對我來說仍然有些模糊。但也許我應該放棄創建應用程序，並嘗試這個！ –

反應 - 如何處理多部分網站？如何縮放反應應用程序？

回答

相關問題