有人可以區分這兩個Express-React-Node應用程序之間的區別嗎？

Question

我正在構建要在Google App Engine上部署的Express-React-Node應用程序。

當我關注一些教程時，我遇到了這兩個應用程序體系結構：

https://github.com/BalasubramaniM/react-nodejs-passport-app/tree/master/src

和

https://hackernoon.com/mern-stack-application-using-passport-for-authentication-920b1140a134

我想了解這些差異。

第一個只是Webpackand Babel的一個應用程序。

在客戶端，我有一個App.jsx文件和Index.html文件。

這是App.jsx文件：

import React from 'react';

const App = () => (
    <div className='app'>This is a React app</div>
);

export default App;

這是html文件：

<!DOCTYPE html>
<html>
  <head>
    <title>A Web App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="./bundle.js"></script>
  </head>
  <body>
    <div id="app">This is an Express App</div>
    <script>
        ReactDOM.render(
            React.createElement(App.default),
            document.getElementById('app')
        );
    </script>
  </body>
</html>

第二個帶有客戶端應用程序和服務器應用程序。

有一個帶有以下代碼的index.jss文件：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { Route, Switch } from "react-router-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route path="/" component={App} />
        </Switch>
    </BrowserRouter>,
    document.getElementById("root")
);
registerServiceWorker();

以及帶有以下代碼的App.js文件：

    import React, { Component } from "react";
    import logo from "./logo.svg";
    import "./App.css";
    import queryString from "query-string";

    class App extends Component {
      componentWillMount() {
        var query = queryString.parse(this.props.location.search);
        if (query.token) {
          window.localStorage.setItem("jwt", query.token);
          this.props.history.push("/");
        }
      }

      render() {
        return (
          <div className="App">

    //some stuff here

          </div>
        );
      }
    }
export default App;

html文件中沒有與反應有關的內容。

我有點理解，在第一個項目中，呈現部分混入了html文件中，但我真的無法理解它們之間的區別，並且在一個應用程序和另一個應用程序中都可以清楚地看到這些內容。

Answer 1

第二個似乎正在使用create-react-app引擎來生成腳手架和入門文件。 第二個示例合並了JWT用戶身份驗證，該身份驗證已存儲在本地存儲中，而第一個似乎沒有這樣做。 另外，第二個示例利用了React Router，它允許您構建具有導航功能的單頁Web應用程序，而無需在用戶導航時刷新頁面。 React Router使用組件結構來調用組件，這些組件顯示適當的信息，並允許您快速添加路線以構建導航。 這就是在index.jss中的導入的Route組件prop中呈現App組件的方式。 如果有人用另一個路徑添加另一個Route，其中包含另一個組件prop，如下所示：

<Route path="/another-path" component={SubComponent} />

然后，您可以通過訪問baseURL / another-path來訪問該組件

令牌認證和React-Router的使用是這兩個項目之間的主要區別。

Answer 2

沒有區別。 這兩個版本都將使用App元素調用ReactDOM.render 。

如果您使用webpack編譯第二個版本，則webpack會將所有文件捆綁在一起，並將產生與第一個部分手動解決方案相同的代碼。

有人可以區分這兩個Express-React-Node應用程序之間的區別嗎？

問題描述

2 個解決方案

解決方案1
1 已采納 2019-09-14 02:25:59

解決方案2
0 2019-09-14 00:30:55

有人可以區分這兩個Express-React-Node應用程序之間的區別嗎？

問題描述

2 個解決方案

解決方案1 1 已采納 2019-09-14 02:25:59

解決方案2 0 2019-09-14 00:30:55

解決方案1
1 已采納 2019-09-14 02:25:59

解決方案2
0 2019-09-14 00:30:55