What is an API in a react project?

Question

React

For example, I have this code, let's say with action I have a request to add

axios.post(`/api/user/`, {
        username: 'test',
        email: '[email protected]',
        password: 'faefe',
        isEmailVerified: false,
        verifyEmailToken: ''
      });

And there is a router that handles this

router.route('/user')
  .post((req, res) => {
    const user = createUser(req.body);

    user.save(err => {
      if(err)
        res.status(400).send(err);

      res.json({ success: true });
    });
  });

How to tie it to the API, i.e. there is no clear understanding of what the API is and how to use it. Or is my router already an API?

Answer 1

You have 2 pieces of code from 2 different worlds:
1) this is the code from the frontend world where you make a request to /api/user/
2) this is the code from the backend world where you handle the ???/user route (why ???, because the main server file is not visible, but if you imagine that you are parsing some working example, most likely this is the /api/user route handler)
1. A server is made (in any of the languages), which, in principle, is a set of routes, for example:

GET на роут /products - отдает все продукты
 POST на роут /products/add - создает новый продукт
 GET на роут /proudcts/1231rh8fdf - отдает один продукт с id 1231rh8fdf
 DELETE ...
 PUT ...

2. The client is written, if within the framework of the react-redux, then the main thing in your question is what you have already given - requests for a specific route in the action creator.
For example:

export function signIn(email, password) {
  return dispatch => {

    dispatch({
      type: USER_SIGN_IN_REQUEST,
    })

    const data = {
      session: {
        email,
        password,
      },
    }

    httpPost(`http://${API_ROOT_V1}/api/sessions`, data)
      .then((data) => {
        dispatch({
          type: USER_SIGN_IN_SUCCESS,
          data: data.account,
        })
      })
      .catch((err) => {
        console.warn(`Sign in error: ${err}`) //eslint-disable-line no-console
        dispatch({
          type: USER_SIGN_IN_FAILURE,
          err,
        })
      })
  }
}

This action creator makes a POST request to the API server (you can also call the server privately) along with a username and password. Next, the server processes this request (that is, it looks for a match between the route and the method (get / post / put ..) and performs the necessary operations, after that it issues a response (for example, json with user data) and you set this data to your reducer.
Everything what you really need is to figure out what an API is and what it is eaten with. Unfortunately, I can’t give specific articles on this. Maybe someone will tell you good ones.
Total : what is an API in a React project is not a question correct The right question is: how do you interact with the API in applications written in react, or: how to write an API in the XXX language (example in English for node.js and express -https://scotch.io/tutorials/build-a-restful-api-us...