728x90
챰고
https://www.youtube.com/watch?v=MOrQ86ktpjU
1. composer로 라라벨 프로젝트 만들기
2. (터미널) npm install
3. (터미널) npm install react@latest react-dom@latest
4. app.js -> app.jsx로 변경
5. vite.config.js app.js -> app.jsx로 변경
6. (터미널) npm install --save-dev @vitejs/plugin-react --force
7. vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
react(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.jsx'],
refresh: true,
}),
],
});
8. resources > js 파일
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'])
</head>
<body>
<div id="app"></div>
<div id="index"></div>
</body>
</html>
app.jsx
import './bootstrap';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from '/resources/js/components/App';
import Index from '/resources/js/components/products/Index';
ReactDOM.createRoot(document.getElementById('app')).render(<App />);
ReactDOM.createRoot(document.getElementById('index')).render(<Index />)
App.jsx
import React from 'react';
const App = () => {
const num = 3;
return(
<div>
<h1>나</h1>
<div>{num}</div>
</div>
)
}
export default App
products/Index.jsx
import React from 'react';
const Index = () => {
return(
<div>
<h1>naneunangman</h1>
</div>
)
}
export default Index
ㅠ
728x90
'JavaScript > React' 카테고리의 다른 글
| React : 라라벨에서 react 생성 및 tailwindcss 적용 (0) | 2023.08.04 |
|---|