728x90
1. 라라벨 프로젝트 생성
php aritsan serve
2. 터미널에서
> composer require laravel/ui
> php artisan ui react
> npm install (안될 시 npm install --force
> npm run dev
여기까지 라라벨과 react 설치 확인 (아마 부트스트랩 적용일거임)
3. tailwindcss 다운로드
https://dbsrbtjs.tistory.com/38
Laravel(라라벨) 9 버전 다운로드 및 tailwindcss 설치
composer 이용 1. cmd 창에 composer create-project laravel/laravel cake(파일 이름) 2. 터미널에서 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 3. tailwind.config.js 에서 module.exports = { content: [ "./resources/**/
dbsrbtjs.tistory.com
- js에서 bootstrap.js, app.js 삭제
4. vite.config.js 코드 변경
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: [
// 'resources/sass/app.scss',
// 'resources/js/app.js',
'resources/js/app.jsx',
],
refresh: true,
}),
react(),
],
});
5. tailwindcss.config.js 코드 변경
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.jsx",
],
theme: {
extend: {},
},
plugins: [],
}
나는 blade.php에다가 보여줄 거라
6. blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@viteReactRefresh
@vite(['resources/css/app.css','resources/js/app.jsx'])
</head>
<body>
<div id="example"></div>
</body>
</html>
728x90
'JavaScript > React' 카테고리의 다른 글
| React(리액트) : Laravel(라라벨)에 React 환경 만들어주기 (0) | 2023.07.31 |
|---|