React 및 TypeScript를 사용한 Laravel 및 관성

9939 단어 reacttypescriptlaravel
  • 새로운 Laravel 프로젝트를 만듭니다.

    • laravel new inertia-typescript


    백엔드


  • here 의 지침에 따라 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>


  • routes/web.php에서 경로 생성

    • use Inertia\Inertia;

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


    참고: render 메서드 내부에 지정된 홈 구성 요소를 아직 생성하지 않았습니다.

    프런트 엔드



    here 의 지침에 따라 프런트 엔드를 설정해 보겠습니다.
  • 여러 설치부터 시작하겠습니다.

    • npm install react react-dom @types/react




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




    npm install --save-dev ts-loader typescript


  • 아래 명령을 사용하여 typescript 파일을 생성하여 초기화tsconfig.json:

    • tsc --init --jsx react


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

    • 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
)


  • Home에서 resources/js/Pages/Home.tsx 구성 요소를 만듭니다.

    • import React from "react";

const Home = () => {
    let foo: string = "React";
    const bar: string = "TypeScript";

    return (
        <h1>
            Hello {foo} + {bar}
        </h1>
    );
};

export default Home;


    Notice that I have .tsx extension instead of .jsx


  • mix.js 파일에서 mix.ts를 webpack.mix.js로 변경:

    • mix.ts('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);


  • 다음으로 npm run dev
  • 아래 업데이트를 읽으십시오 👇🏼

    • 🔴 앱 초기화를 위해 resources/js/app.js 구문을 작성했지만 Babel이 이해할 수 있도록 JSX 설치하지 않았기 때문에 react-preset 파일 내부에 오류가 발생합니다.
  • 개발자 종속성으로 @babel/preset-react를 설치할 수 있습니다.

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


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

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


  • npm run dev를 다시 실행하면 지금 자산을 컴파일할 수 있습니다. /home 경로를 방문하여 브라우저에서 출력을 볼 수 있는지 확인하십시오.

    • Disclaimer: This is not the definitive guide on setting up TypeScript with React for Laravel and Inertia. This is just how I am proceeding with this setup.



    오류를 발견하거나 더 나은 접근 방식을 알고 있다면 아래 의견에 피드백을 남겨주세요 🙏🏼

    데모 소스 코드를 찾을 수 있습니다here.

    업데이트



    우리가 JavaScript를 완전히 버릴 수 있고 위의 @babel/preset-react 단계를 피할 수 있다면 Twitter에서 언급했습니다. 쉽게 할 수 있습니다.
    수행 방법을 보여주는 데모 저장소에서 커밋: 49be431
    자바 기초 연습 문제, for 순환 사용, 정사각형 인쇄, 삼각형 등
    링크 ux 는 flock 파일 잠 금 을 사용 하여 crontab 충돌 문 제 를 해결 합 니 다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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