React / NodeJS - веб-страница не работает при переходе на локальный хост: 3000

Question

Прежде всего я хотел бы сказать, что я новый разработчик React и NodeJS.

Я хочу использовать следующие технологии: - Реагировать как клиент - NodeJS как сервер - Веб-пакет для сборкимои файлы.

Структура моего проекта следующая:

my-application /

webpack.server.js

webpack.client.js

server.js

client / client.js

client / app.js

client / components / header.js

client /components / mainLayout.js

client / components / footer.js

Файлы верхнего и нижнего колонтитула не важны, поэтому я не пишу здесь.Важным файлом являются следующие:

mainLayout.js

import React, { Component } from 'react';

// import component
import Header from './header';
import Footer from './footer';

class MainLayout extends React.Component {
  constructor (props) {
    super(props)
  }

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

              {this.props.children}

            <Footer />
          </div>
        );
    }
}

export default MainLayout;

app.js

import React, { Fragment } from 'react';
import { Route, Switch } from 'react-router-dom';

import MainLayout from './components/mainLayout'

const AppComponent = () =>
    <Switch>
        <Route path="/" exact render={props => (
            <MainLayout>
                <h1>Hello World</h1>
            </MainLayout>
        )} />
    </Switch>
;

export default AppComponent;

client.js

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';

import AppComponent from './app';

ReactDOM.hydrate(
    <BrowserRouter>
        <AppComponent />
    </BrowserRouter>,
    document.querySelector('#root')
);

server.js

import express from 'express';
import React from 'react';

import AppComponent from './client/app'

var app = express();

const PORT = 3000;

app.use("/", express.static("build/public"));

app.get("/", (req, res) => {
    res.send(<AppComponent />)
});

app.listen(PORT, () => console.log('Now browse to localhost:3000'));

Запустить мой проект:

npm run build

npm run dev

, но когдая собираюсь набрать http://localhost:3000 ответ моей страницы: {"key": null, "ref": null, "props": {}, "_ owner": null, "_ store": {}}.

Я не понимаю, почему у меня ошибка, что-то, вероятно, ускользает от меня, но я не знаю, что.

Можете ли вы помочь мне, пожалуйста?

Заранее спасибо, КАК

Answer 1

Я снова запустил приложение, используя npm.

В команде, которую я ввел: npm start в папке приложения, после этого оно снова заработало.

Answer 2

Вы используете и передний и задний конец на одном и том же порту.Перейдите в package.json для своего приложения реагирования и замените стартовый скрипт следующим скриптом:

"scripts": {
    "start": "set PORT=3007 && react-scripts start",
     // the rest of your scripts
}

Это будет первый шаг для решения вашей проблемы.Если после этого вы продолжаете получать ошибки, сообщите нам, каковы они.