React 구성 요소를 개별적으로 컴파일 및 제공

Question

Laravel Mix를 사용하여 반응 구성 요소를 컴파일하고 필요한 각 페이지에 개별적으로 제공합니다. 이는 SPA가 아닙니다.

나는 반갑습니다. 그래서 내 무지를 변명하십시오. 나는 현재 설정에 대해 머리 글자를 쓰고 같은 페이지에 여러 구성 요소가있는 올바른 방법인지 확인하려고합니다.

은 그래서 아래의 보일러는, 예를 들어, 일부 구성 요소는 저장소를 만드는 방법에 다소 차이가

'use strict' 
import React from 'react' 
import ReactDOM from 'react-dom' 
import {Provider} from 'react-redux' 
import {createStore, applyMiddleware, compose} from 'redux' 
import ReduxPromise from 'redux-promise' 
import App from './containers/App' 
import reducers from './reducers' 

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose 
const enhancer = composeEnhancers(
    applyMiddleware(ReduxPromise), 
) 
const newstore = createStore(reducers, enhancer) 

ReactDOM.render(
    <Provider store={newstore}> 
     <App /> 
    </Provider>, document.querySelector('.component-foo') 
) 

선택기를, 예컨대 : 변경, 모든 구성 요소에서 복사 및 붙여 넣기하고있다 redux devtools는 항상 존재하지는 않습니다.

그래서 Vue.js에서 오는 것은별로 이상하지 않습니다. Vue.js에서는 하나의 파일을 사용하여 프레임 워크와 관련된 모든 것을 가져온 다음 필요한 각 구성 요소를 하나의 파일로로드합니다. 코드 행. 하지만이 React 설정은 Vue.js에 여러 루트/응용 프로그램 구성 요소가있는 것처럼 페이지의 모든 구성 요소에 대해 React 및 Redux의 별도 인스턴스를로드하는 것과 상당히 반대되는 것으로 보인다.

React가 번들되고 여러 번 부팅된다고 가정하는 것이 옳은 일이며 적절한 방법일까요?

Answer 1

당신은 거의 틀리게 이것을하고 있습니다. 그렇습니다. React를 여러 번 묶어서 부팅 할 가능성이 높습니다. 그러나 그 방법은 적절한 방법이 아닙니다. Vue 패러다임을 사용하여 React SPA에서 복사 한 코드로이 괴물을 만들고있는 이유입니다.

진행하기 전에 기본 react + laravel 튜토리얼을 확인 하시겠습니까? 간단한 구글 검색은 이것을 보여 줬다 : https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-backend-part-2-react--cms-29443 그리고 나는 많은 다른 사람들이있을 것이라고 확신한다.

반응이 새로운 사람들이므로 지금은 부담을 피하고 여러 구성 요소에 대한 반응에 익숙해 지십시오. 당신이 필요로하는 경우에만 redux 상태 관리를 추가하십시오.