Question

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

在我关注一些教程时，我遇到了以下两个应用程序体系结构：

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

和

https://hackernoon.com/m-e-r-n-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 path="/another-path" component={SubComponent} />

然后您可以通过访问baseURL / another-path

来访问该组件。

令牌认证和React-Router的使用是这两个项目之间的主要区别。

Answer 2

没有区别。两种版本都将使用ReactDOM.render元素来调用App。

如果您使用webpack编译第二个版本，则webpack会将所有文件捆绑在一起，并生成与您的第一个手动解决方案相同的代码。

有人可以区分这两个Express-React-Node应用程序之间的区别吗？

2 个答案: