Laravel Back End : Part 2, React가있는 React 앱 구축-PHP 튜토리얼-php.cn

Laravel Back End : Part 2, React가있는 React 앱 구축

William Shakespeare

풀어 주다： 2025-03-04 09:33:15

원래의

954명이 탐색했습니다.

이것은 Laravel 백엔드가있는 React Application을 구축하는 데있어 시리즈의 두 번째이자 마지막 부분입니다. 이 시리즈의 첫 번째 부분에서는 기본 제품 목록 응용 프로그램을 위해 Laravel을 사용하여 편안한 API를 만들었습니다. 이 튜토리얼에서는 React를 사용하여 프론트 엔드를 개발할 것입니다.

우리는 또한 Laravel과 React 사이의 간격을 연결하기 위해 사용 가능한 모든 옵션을 고려할 것입니다. 이 튜토리얼을 이해하기 위해 시리즈 중 하나를 따를 필요는 없습니다. 당신이 여기에 반응하고 라벨이 함께 운임하는지 보려고한다면 실제로 첫 번째 부분을 피할 수 있습니다. Github로 가서 Repo를 복제하고 아래의 빠른 요약을 따라 시작해야합니다.

빠른 요약

이전 자습서에서 API 호출에 응답하는 Laravel 애플리케이션을 개발했습니다. 경로, 컨트롤러 및 간단한 제품 목록 애플리케이션 모델을 만들었습니다. HTTP 요청에 대한 응답을 반환하는 것이 컨트롤러의 작업이기 때문에보기 섹션은 완전히 건너 뜁니다.

그런 다음 Laravel을 사용한 예외 처리 및 검증 기술을 논의했습니다. 튜토리얼이 끝날 무렵, 우리는 Laravel Back-End API가있었습니다. 이제이 API를 사용하여 웹과 광범위한 모바일 장치 모두에 대한 응용 프로그램을 구축 할 수 있습니다.

이 튜토리얼에서는 초점을 프론트 엔드로 이동시킬 것입니다. 튜토리얼의 전반부는 라벨 환경에서 React 설정에 관한 것입니다. 또한 자산을 컴파일하기위한 API 인 Laravel Mix (Laravel 5.4 이상 지원)를 소개합니다. 튜토리얼의 후반부에서 우리는 처음부터 REACT 응용 프로그램을 구축하기 시작합니다.

Laravel

에서 React 설정은 Laravel 5.4에 도입되었으며 현재 React 및 Laravel을 연결하는 이상적인 방법입니다. Laravel 7을 사용하면 전체 프로세스가 훨씬 쉬워졌습니다. 나는 아래의 두 가지 방법을 모두 설명했다.

React Preset 명령 (Laravel 5.5 및 Laravel 7)을 사용하여 Laravel 5.5는 Artisan의 Laravel/UI를 사용하여 React 구성 요소에 대한 코드를 발판하고 Composer 패키지를 사용하여 React Scaffolding을 생성하기 위해 다음을 만들어 낼 수있는 기능이 제공됩니다. 사용자 인증을 위해 로그인 및 등록 구성 요소.

백그라운드에서 Laravel은 Laravel Mix를 사용합니다. Laravel 믹스는 웹 팩의 부드러운 래퍼입니다. 이미 알고 있듯이 Webpack은 Bundler 모듈입니다. 모든 모듈 종속성을 해결하고 JavaScript 및 CSS에 필요한 정적 자산을 생성합니다. React는 Bundler가 작동해야하며 Webpack은 그 역할에 완벽하게 맞습니다. 따라서 Laravel Mix는 웹 팩 위에있는 레이어이며 Laravel에서 Webpack을보다 쉽게 사용할 수 있습니다. 나중에 웹 팩 구성을 사용자 정의 해야하는 경우 Laravel Mix가 어떻게 작동하는지에 대한 이해가 더 중요합니다. React Preset 명령은 우리에게 배경에서 일이 어떻게 작동하는지에 대한 정보를 제공하지 않습니다. 따라서 React Preset을 제거하고 대신 수동으로 단계를 되돌아 보겠습니다.

수동 방법 (laravel 5.4) Laravel 5.4를 실행하거나 Laravel 믹스가 어떻게 구성되어 있는지 궁금한 점이 있다면 다음은 다음과 같은 단계입니다.

usestate 필드를 설치하고 다음을 대체합니다. useeffect

가 실행됩니다. 그 안에는 구성 요소의 UI를 설명하기 위해 RenderProducts

메소드를 사용합니다. 모든 제품은 목록으로 렌더링됩니다.

마지막으로, 우리는 반환 문 내부의 페이지로 렌더링됩니다.

composer require laravel/ui<br>php artisan ui react<br><br>// Generate login & registration scaffolding...<br>php artisan ui react --auth<br>

로그인 후 복사

페이지는 지루한 제품 제목을 나열합니다. 또한, 우리는 아직 대화식 요소가 없습니다. 제품 제목을 클릭 할 수있게하고 클릭하면 제품에 대한 자세한 내용이 렌더링됩니다.

제품 데이터 표시 클릭 한 제품을 추적하려면 다음을 다루어야 할 사항의 목록은 다음과 같습니다. main 구성 요소라고합시다. 부모 인 메인 구성 요소는 함수 참조를 소품으로 전달합니다. 자식 구성 요소 인 Main 구성 요소는 제품

구성 요소를 선언하는 반면 업데이트 기능에는 자체 구성 요소가 있어야합니다. 이 도전을 수행하고 누락 된 구성 요소를 완성하는 것이 좋습니다.

요약

우리는 우리가 시작한 곳에서 먼 길을 왔습니다. 먼저 Laravel Framework를 사용하여 REST API를 만들었습니다. 그런 다음 Laravel과 React를 혼합하기위한 옵션에 대해 논의했습니다. 마지막으로, 우리는 React를 사용하여 API에 대한 프론트 엔드를 구축했습니다.

주로 React를 사용하여 단일 페이지 애플리케이션을 만드는 데 중점을 두었지만 뷰에서 특정 요소에 장착 된 위젯 또는 구성 요소를 만들 수 있습니다. React는 도서관이기 때문에 매우 유연합니다. Laravel Back End : Part 2, React가있는 React 앱 구축 지난 몇 년 동안 React는 인기가 높아졌습니다. 실제로, 우리는 시장에 구매, 검토, 구현 등을 사용할 수있는 여러 품목이 있습니다. React 주변의 추가 리소스를 찾고 있다면 주저하지 말고 확인하십시오.