2

I'm building a full stack app using MongoDB, Express, React, and Node. I've worked on projects with only front-end programming and I've worked on projects with only back-end programming. I used ejs to create views for Express, so I'm not sure how it would work with front-end views created through React. Also, I'm not sure how the CRUD operations would be used with React. I have very vague ideas.

What I know is that in package.json, the two are combined together when running the program. That's about it. Even with that I'm unsure. My question is: How does Express interact with React?

The kind of answers I'm looking for involve connections. Where and how does it click together? If React creates views, then how is Express connected to those views? Am I importing files? Am I writing ExpressJS inside React components? How does it display data onto the view from a database? Is app.get('/',...) enough? How does Express know which files to use when posting that data?

Miranda Manriquez
  • 23
  • 5
  • 1
    in short, the backend expose set of api and frontend(be it react, angular or any other) consumes it – Priyesh Kumar Jun 05 '18 at 03:42
  • 1
    React (client) can make a request (get, post, etc.) to an Express API endpoint you have created. You can additionally attach data when you make those requests. When Express gets the request, you can see which endpoint it's from, and what data are passed. Express doesn't know anything about the client, it's the client that manually request various Express endpoint urls. If you have a user view, you make a request to my-express-server.com/user and wait for a response. The express server should process the request and deliver the response payload. – Dan Jun 05 '18 at 03:47
  • use "proxy" : "localhost:3000/" inside your json file – ROHIT CHAUHAN Jun 05 '18 at 05:48

1 Answers1

3

Simple way to connect react with express add proxy in json File.

 {
    "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"
        ]
    }
 }
ROHIT CHAUHAN
  • 148
  • 1
  • 10