Spring Boot добавить интерфейс с React

Question

У меня есть проект Rest Api, в котором я использовал методы CRUD с моими двумя классами сущностей. Я хочу добавить пользовательский интерфейс этого проекта с реагировать. Но я новый Reactjs, я не очень хорошо знаю. Вот мой контроллер Rest-Api и примеры методов:

@CrossOrigin(origins = { "http://localhost:3000", "http://localhost:4200" })
@RestController
@RequestMapping("/student")
public class StudentController {

    @Autowired
    StudentService studentService;

    @GetMapping("/list")

    public ResponseEntity<List<Student>> ListStudents() {

        List<Student> theStudent = studentService.getStudents();
        return new ResponseEntity<>(theStudent, HttpStatus.OK);
    }

    @GetMapping("/getStudent/{id}")
    public ResponseEntity<Student> getStudentById(@PathVariable("id") int theId) {

        Student theStudent = studentService.getStudentById(theId);
        return new ResponseEntity<Student>(theStudent, HttpStatus.OK);
    }

Я настроил реакцию своего компьютера и создал новый проект. Но сейчас я не знаю, что мне с этим делать. Как я могу подключить React и мой проект Rest-Api. Пожалуйста, помогите мне, что мне делать?

Answer 1

, как я упоминал в комментариях, вы должны отправить HTTP-запрос к вашему api.

вы можете сделать это с помощью axios, fetch или даже XMLHttpRequest.

тогда вам нужно получить ответ (приведите его, если это json, вы можете сделать это с помощью библиотеки json2typescript, чтобы привести json к модели класса), а затем изменить состояние компонента своей реакции с помощью setState и отобразить данные в страница.

лично, мой выбор - fetch api, а вот пример работы с fetch:

const response = fetch('server_URL:port/student', {method: "get"}).then(res => console.log(res));

Вот более полное руководство с использованием axios: https://hackernoon.com/tutorial-how-to-make-http-requests-in-react-part-3-daa6b31b66be

- обновление -

здесь вы можете найти информацию о состояниях и компонентах реакции (также вы можете найти примеры) https://reactjs.org/docs/state-and-lifecycle.html