Как front-end (React) взаимодействует с back-end (Express)? - PullRequest
0 голосов
/ 05 июня 2018

Я создаю приложение с полным стеком, используя MongoDB, Express, React и Node.Я работал над проектами только с программированием на стороне и я работал над проектами только с программированием на стороне.Я использовал ejs для создания представлений для Express, поэтому я не уверен, как это будет работать с интерфейсными представлениями, созданными с помощью React.Кроме того, я не уверен, как операции CRUD будут использоваться с React.У меня есть очень смутные идеи.

Что я знаю, так это то, что в файле package.json эти две комбинации объединяются при запуске программы.Вот и все.Даже с этим я не уверен.У меня вопрос: как Express взаимодействует с React?

Ответы, которые я ищу, включают в себя соединения.Где и как это щелкает вместе?Если React создает представления, то как Express связан с этими представлениями?Импортирую ли я файлы?Я пишу ExpressJS внутри компонентов React?Как он отображает данные в виде из базы данных?Достаточно ли app.get ('/', ...)?Как Express узнает, какие файлы использовать при публикации этих данных?

1 Ответ

0 голосов
/ 05 июня 2018

Простой способ соединения реагировать с прокси-сервером экспресс-добавления в файле json.

 {
    "name": "create-react-app",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
        "husky": "^0.14.3",
        "lint-staged": "^7.0.0",
        "prettier": "^1.11.0",
        "react-scripts": "^1.0.17"
    },
    "dependencies": {
        "bootstrap": "^4.1.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-router-dom": "^4.2.2",
        "sanitize.css": "^5.0.0",
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "precommit": "lint-staged"
    },
    "proxy": "http://localhost:3000/",
    "lint-staged": {
        "*.{js,json,css,md}": [
        "prettier --write",
        "git add"
        ]
    }
 }
...