React(JS)가 포함된 Laravel 8

6825 단어 phpreactlaravel
무엇보다 먼저 Laravel 8 애플리케이션을 설정해야 합니다.

composer create-project laravel/laravel react-app
cd react-app


백엔드



Inertia.js용 백엔드를 설정하려면 여기의 지침을 따르십시오.

composer require inertiajs/inertia-laravel


resources/views/app.blade.php에 다음 내용으로 루트 템플릿을 만듭니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>


route/web.php에 경로 생성

use Inertia\Inertia;

Route::get('home', function(){
  return Inertia::render('home');
});


Note: We haven't constructed the Home component yet, which is specified in the render method.



프런트 엔드



제공된 지침에 따라 프런트 엔드를 시작하고 실행해 보겠습니다.

설치 컬렉션부터 시작하겠습니다.

npm i react-dom

npm install @inertiajs/inertia @inertiajs/inertia-react

npm i jsconfig.json


resources/js/app.js 내에서 아래와 같이 Inertia 앱을 초기화합니다.


import { InertiaApp } from '@inertiajs/inertia-react'
import React from 'react'
import { render } from 'react-dom'

const app = document.getElementById('app')

render(
  <InertiaApp
    initialPage={JSON.parse(app.dataset.page)}
    resolveComponent={name => import(`./pages/${name}`).then(module => module.default)}
  />,
  app
)


resources/js/pages/home.js에서 홈 구성 요소를 만듭니다.


import React from "react";

const Home = () => {
    let parameter1 = "React";
    let parameter2 = "laravel 8";

    return (
        <h1>
            Hello {parameter1} + {parameter2}
        </h1>
    );
};

export default Home;


babel/preset-react를 dev 의존성으로 설치할 수 있습니다.

npm install --save-dev @babel/preset-react


다음 내용으로 프로젝트 루트에 .babelrc 파일을 만듭니다.

{
  "presets": ["@babel/preset-react"]
}


프로젝트 테스트

npm run dev

php artisan serve
정규식 패턴 매칭 플래그
Class create, device create, device create file

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage