Laravel+반응

이 강좌는 React with Laravel을 어떻게 사용하는지 보여 줍니다. 전통적인 Laravel 코드 라이브러리와blade 템플릿에 React를 추가할 수 있습니다.SPA를 만들거나 Create React 응용 프로그램을 사용하지 않습니다.
전체 예제 항목을 보고 다운로드할 수 있습니다.
https://github.com/jcz530/laravel-plus-react

이 안내서를 읽고 나서...

React 구성 요소를 블레이드 파일에 추가할 수 있습니다.

우리는 복잡한 구성 요소로 조합할 수 있는 재사용 가능한 구성 요소가 있을 것이다.

우리는 웹 팩(Laravel Mix)을 사용하여 우리의 파일을 구축할 것이다.

우리는 수욕이 없을 것이다.

React는 SSR(서버 측 렌더링)을 사용하지 않습니다.

이 구성 요소들을 Vue에서 유행하는 내연 구성 요소로 사용할 수 없습니다.

출신 배경

나는 이 안내서를 계발하여 썼다. 왜냐하면 최근에 React를 나의 남겨진 프로젝트에 추가했기 때문이다. 나는 전체 프로젝트를 다시 써서 React SPA로 만들고 싶지 않다.반대로, 나는 새로운 React 구성 요소를 작성하는 것에서 이익을 얻고 싶다. 나는 즉시 그것을 프로젝트에 추가할 수 있다.
로드와 렌더링 구성 요소에 반응할 수 있는 방법은 많은데, 이것은 내가 프로젝트를 처리할 때 선택한 방법일 뿐이다.이 설정을 선택한 방식과 이유를 알려드리겠습니다.
먼저 기존 또는 새 Laravel 항목으로 이동합니다.

더욱 진행한다

npm i react react-dom

폴더 구조

/resources/js/ 폴더에 모든 React 파일이 있는 새 폴더를 추가합니다.우리는 이 파일들을 다른 JS 파일과 혼합하지 않고 함께 놓으려고 한다.이것은 일부 웹 페이지의 설정을 더욱 쉽게 하고 다른 기술을 사용할 수 있도록 항목을 조리 있게 할 것이다.
내 예에서, 나는 /resources/js/src/ 나의 모든 React 파일을 위한 원본 폴더를 만들었다.src 폴더에 다음 폴더가 있습니다.

/src/components

/src/hooks

/src/레이아웃 맵

/src/pages

구체적인 폴더는 필요와 조직 스타일에 따라 다를 수 있지만, 이것은 좋은 시작일 수 있습니다.

Laravel Mix - 패키지 설정

별칭

이 단계는 선택할 수 있지만, 나는 그것이 프로젝트를 더욱 쉽고 깨끗하게 한다고 생각한다.패키지 설정에서 다른 이름을 정의하면 파일 경로의 위치를 알 필요가 없이 파일을 인용할 수 있습니다.
예를 들어 폴더 구조 깊은 곳에 있는 구성 요소에서 테마 파일을 인용하고 별명을 사용하지 않으려면 작성할 수 있습니다import theme from '../../../themes/theme.js'별칭을 사용하면 작성하기만 하면 됩니다import theme from 'themes/theme.js'별명을 사용하려면 mix 파일 webpack.mix.js 에 추가해야 합니다.

mix.webpackConfig({
    resolve: {
        alias: {
            //adding react and react-dom may not be necessary for you but it did fix some issues in my setup.
            'react' : path.resolve('node_modules/react'),
            'react-dom' : path.resolve('node_modules/react-dom'),

            'components' : path.resolve('resources/js/src/components'),
            'pages' : path.resolve('resources/js/src/pages'),
            'themes' : path.resolve('resources/js/src/themes'),
            'layouts' : path.resolve('resources/js/src/layouts'),
            'hooks' : path.resolve('resources/js/src/hooks'),
        },
    },
});

웹 패키지.혼합회사 명

묶음 및 추출 반응

별명을 추가하면 웹 팩에 파일을 압축하고 추출하는 것을 알려야 합니다.같은 webpack.mix.js 파일에 다음 줄을 추가합니다.참고 mix.react 및 app.js 을 사용하고 있습니다.하면, 만약, 만약...js 파일에 코드가 남아 있습니다. React 구성 요소에 새 응용 프로그램 파일을 만들 수 있습니다.

mix.react('resources/js/app.js', 'public/js').extract(['react', 'react-dom']);

웹 패키지.혼합회사 명

어셈블리 렌더링

이것이 바로 일이 까다로워진 곳이다.
비록 우리가 SPA를 구축하지 않았지만, 우리는 여전히 여러 개의 구성 요소를 다시 사용하는 복잡한 구성 요소를 구축할 수 있기를 희망한다.우리는react 구성 요소를blade 파일에 혼합할 것입니다. 만약 우리가 구성 요소의 JS 느낌을 보존할 수 있다면, 우리가 가리키는 것은 id가 있는 무작위div가 아니라 React 구성 요소를 가리키는 것을 알 수 있습니다.
어셈블리 이름 대신 <div id="MyComponent" />우리는 사용할 것이다 <MyComponent />.
이것은 유효한 html이 아니기 때문에 id 방법을 사용하려면ReactRenderer의 한 줄에 대한 설명을 취소하십시오.js 파일이 곧 나타날 것입니다.

단순 구성 요소 만들기

우리는 그들이 얻은 것처럼 간단한 구성 요소를 가지고 테스트해야 한다.src/components/MySimpleComponent.js의 다음 코드를 사용하여 새 파일을 만듭니다.

import React from 'react';

export default function MySimpleComponent(props) {

  return (
    <>
        <h2>This was loaded from a React component.</h2>
    </>
  );
}

구성 요소/MySimpleComponent회사 명

응용 프로그램을 설정합니다.회사 명

다음은 응용 프로그램을 설정해야 합니다.js 파일.이것은 응용 프로그램에 추가해야 할 줄입니다.js 파일.

require('./bootstrap')
import React from 'react'
import ReactRenderer from './src/ReactRenderer'

import MySimpleComponent from 'components/MySimpleComponent'

const components = [
  {
    name: "MySimpleComponent",
    component: <MySimpleComponent />,
  },
]

new ReactRenderer(components).renderAll()

응용 프로그램.회사 명
약간의 해석.
우리 응용 프로그램에서js 파일은 우리가 칼날 파일에 사용하고자 하는 모든 구성 요소를 가져와 진열에 추가합니다."name"요소를 사용하여 블레이드 파일에서 구성 요소에 대한 모든 인용을 찾고 "component"요소를 사용하여 렌더링합니다.
다음은 ReactRenderer.js 파일을 추가해야 합니다.

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

export default class ReactRenderer {

  constructor(components) {
    this.components = components;
  }

  renderAll() {

    for (let componentIndex = 0; componentIndex < this.components.length; componentIndex++) {

      // Use this to render React components in divs using the id. Ex, <div id="MySimpleComponent"></div>
      // let container = document.getElementById(this.components[componentIndex].name);

      // Use this to render React components using the name as the tag. Ex, <MySimpleComponent></MySimpleComponent>
      let containers = document.getElementsByTagName(this.components[componentIndex].name)

      if (containers && containers.length > 0) {

        for (let i = containers.length - 1; i >= 0; i--) {
          let props = this.getPropsFromAttributes(containers[i]);
          let element = this.components[componentIndex].component;

          if (props !== null) {
            element = React.cloneElement(
              element,
              props
            )
          }

          ReactDOM.render(element, containers[i]);
        }
      }
    }
  }

  // Turns the dom element's attributes into an object to use as props.
  getPropsFromAttributes(container) {
    let props = {};
    if (container.attributes.length > 0) {
      for (let attributeIndex = 0; attributeIndex < container.attributes.length; attributeIndex++) {
        let attribute = container.attributes[attributeIndex];
        if (this.hasJsonStructure(attribute.value)) {
          props[attribute.name] = JSON.parse(attribute.value);
        } else {
          props[attribute.name] = attribute.value;
        }
      }
      return props;
    }
    return null;
  }

  hasJsonStructure(str) {
    if (typeof str !== 'string')
      return false;
    try {
      const result = JSON.parse(str);
      const type = Object.prototype.toString.call(result);
      return type === '[object Object]' || type === '[object Array]';
    } catch (err) {
      return false;
    }
  }

}

반응 렌더기.회사 명
당신은 코드를 통독하여 현재 발생하고 있는 일을 더욱 전면적으로 이해할 수 있습니다.그 핵심은 구성 요소와 일치하는 모든 DOM 요소를 찾고 포함된 도구를 사용하여 렌더링하는 것입니다.

투입 사용

이제 더 많은 구성 요소를 구축하여 블레이드 파일에 추가할 수 있는 모든 준비가 되었습니다.
다음은 블레이드 파일에 추가하는 예입니다.

...
<MySimpleComponent></MySimpleComponent>

@guest
<MySecondComponent
    title="This is using blade's {{'@'}}guest helper to show to 'Guests' only"
/>
@endguest

@auth
{{-- Remember to use "json_encode" to pass in objects --}}
<MySecondComponent
    title="This is showing to authed users"
    user="{{ json_encode(auth()->user()) }}"
/>
@endauth
...

응용 프로그램.칼날php
이 강좌의 원본 코드에는 두 번째 수용 title 도구의 구성 요소도 포함되어 있습니다.이 코드는 원본 코드 app.blade.php 파일의 한 부분이다.
예시 항목을 다운로드하고 실행하면 다음과 같은 내용을 얻을 수 있습니다.

나는 당신이 환매 협의를 다운로드하여 그것을 테스트하기 위해 탐색하고 수정하는 것을 장려합니다.https://github.com/jcz530/laravel-plus-react