ReactJS Larvel에서 사용하기

1. laravel/ui 설치

composer require laravel/ui

2. laravel에 react 프로젝트 설치

php artisan ui react
npm install && npm run dev

2-1. 위의 명령어를 실행하면 아래와 같이 생성됨
resources/js/components/Example.js

import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

resources/js/app.js

require('./components/Example');

추가되는 컴포넌트는 app.js에 계속 수동으로 추가 해야함

ex)
resources/js/components/Test.js

import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Test!!</div>

                    </div>
                </div>
            </div>
        </div>
    );
}

export default Test;

if (document.getElementById('test')) {
    ReactDOM.render(<Test />, document.getElementById('test'));
}

resources/js/app.js

require('./components/Example');
require('./components/Test');

3. 마지막으로 명령어 실행

npm run dev

4. 결과 blade.php
   

5. 만약 컴포넌트가 바뀔때 마다 npm run dev 해주기 귀찮다면 package.json의 "development" 맨 마지막에 --watch를 추가해준다.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "build": "npm run production" 
    },
    "devDependencies": {
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0"
    }
}

npm run dev를 실행하면 끝나지 않아 컴포턴트 수정 후 바로 적용됨

• Chrome 확장프로그램 React Developer Tools 설치 > 개발자 도구 > ">>" > Components 클릭 > React 컴포넌트 정보 확인 가능