react universal app
1.0.0
react-universal-app Universal React 구성 요소 및 REACT 라우터를 갖춘 단일 페이지 응용 프로그램을 구축 할 수있는 라이브러리입니다.
react-universal-app 의 목표는 매우 간단합니다.
간단
react-universal-app 2 개의 React 구성 요소를 제공합니다.
또한 단일 데이터 가져 오기 API를 제공합니다. 이 데이터 가져 오기 API는 경로 옆에 정의됩니다.
유연성
react-universal-app 많은 일을하지 않습니다.
그것은 당신에게 당신의 경로를 렌더링하기위한 몇 가지 React 구성 요소를 제공하며, 어떤 방식 으로든 앱을 렌더링하거나 수화 시키도록 강요하지 않습니다. 원하는대로 렌더링 할 수 있습니다!
그것은 당신에게 당신의 경로에 정의 된 단일 데이터를 가져 오는 API를 제공합니다. 즉, 원하는 앱 구성 요소를 구축 할 수 있으며 RECT 구성 요소는 REACT 구성 요소 일뿐입니다.
신속하게 시작하려면 예제 응용 프로그램을보십시오. 이러한 응용 프로그램은 react-universal-app 사용하여 응용 프로그램을 만드는 방법에 대한 예를 제공합니다.
또는 아래 단계를 따라 시작하려면 시작하십시오.
npm install react-universal-app react 다음은 기본 React 응용 프로그램에서 라우팅 및 데이터 가져 오기 방법에 대한 정보를 제공합니다. 경로를 설정하면 경로를 전달하면 서버 측 렌더링 및 클라이언트 측 수화에 react-universal-app 부품을 반응하는 구성 요소로 전달할 수 있습니다.
react-universal-app 반응 라우터 4를 사용합니다.이 라우터 4는 구성 요소로 페이지를 제공하고 경로 구성을 제공하기위한 훌륭한 기초입니다. 경로를 정의하려면 경로 구성을 만들어 내보내십시오.
참고 : react-universal-app 현재 단일 최상위의 라우팅 만 지원합니다.
// ./app/routes.js
import Home from './components/Home' ;
const routes = [
{
path : '/' ,
exact : true ,
component : Home ,
} ,
] ;
export default routes ; // ./app/components/Home.js
const Home = ( ) => (
< div >
< h1 > Home! </ h1 >
</ div >
)
export default Home ; react-universal-app 경로 구성에 정의 된 데이터 페치에 대해 매우 친숙한 getInitialData 제공합니다.
이것은 경로 구성/데이터 페치 및 구성 요소 간의 우려와 불가지론의 명확한 분리를 제공합니다. React 구성 요소는 반응 구성 요소 일뿐 아니라 원하는만큼 경로에서 구성 요소를 교체 할 수 있습니다.
이는 응용 프로그램의 데이터 흐름이 명확하고 정의되므로 New React 개발자의 개발 장벽을 줄이는 데 암시적인 이점이 있습니다.
await getInitialData(ctx): { data } getInitialData 는 경로 구성에 정의 된 선택적 비동기 기능입니다. 이 API는 외부 API에서 데이터를 가져 오거나 일부 초기 데이터를 다른 변수를 기반으로 경로 구성 요소로 반환하는 데 사용됩니다.
ctx 객체는 다음을 포함하는 getInitialData 로 전달됩니다.
match - 반응 라우터의 매치 객체 서버에서 getInitialData loadInitialData (아래 참조)를 통해 귀하가 명시 적으로 호출되며 응답은 서버 구성 요소에 전달됩니다.
클라이언트에서는 내부적으로 호출되며 반환 된 데이터는 경로의 정의 된 구성 요소로 전달됩니다. 클라이언트에서 react-universal-app 경로의 구성 요소로 전달되는 getInitialData 의 수명주기에 3 개의 상태를 가지고 있습니다.
loading ( boolean ) - getInitialData 아직 응답하지 않은 경우 loading true 입니다. 아마도 API에서 바쁘기 때문일 수 있습니다. 그렇지 않으면 false 입니다data ( object )-일단 react-universal-app 에 데이터가 있으면 data 소품에 전달됩니다. 그렇지 않으면 null 입니다error ( Error ) - 초기 데이터를 얻는 프로세스에 오류가 발생하면 구성 요소로 전달됩니다. 그렇지 않으면 null 입니다 // app/routes.js
import Home from './components/Home' ;
const routes = [
{
path : '/' ,
exact : true ,
component : Home ,
getInitialData : await ( ctx ) => {
return { title : 'Home!' } ; ;
} ,
} ,
] ;
export default routes ; // app/components/Home.js
const Home = ( { loading , error , data } ) => {
if ( loading ) return 'Loading...'
if ( error ) return 'Oh no, something went wrong!'
if ( data ) {
return (
< div >
< h1 > { data . title } </ h1 >
</ div >
)
}
} ;
export default Home ; react-universal-app react-router 의 매개 변수화 라우팅을 지원합니다. 경로에서 데이터 가져 오기가 정의되므로 매개 변수화 라우팅은 산들 바람이며 매우 깨끗하게 처리 할 수 있습니다.
// ./app/routes.js
import Home from './components/Home' ;
const routes = [
{
path : '/:id' ,
exact : true ,
component : Home ,
getInitialProps : await ( { match } ) => {
const { id } = match . params ;
const response = await fetch ( `/someApi/ ${ id } ` ) ;
const apiResponse = await response . json ( ) ;
return { title : 'Home!' , apiResponse } ; ;
} ,
} ,
] ;
export default routes ; // ./app/components/Home.js
const Home = ( { loading , error , data } ) => {
if ( loading ) return 'Loading...'
if ( error ) return 'Oh no, something went wrong!'
if ( data ) {
const { title , apiResponse } = data ;
return (
< div >
< h1 > { title } </ h1 >
{
apiResponse . map ( ( { title , description } ) => (
< div >
< h2 > { title } </ h2 >
< p > { description } </ p >
</ div >
) )
}
</ div >
)
}
} ;
export default Home ; react-universal-app 서버에서 앱을 렌더링하기 위해 React Component ( ServerApp ) 및 데이터 가져 오는 API ( loadInitialData )를 제공합니다. react-universal-app 더 많은 의견이 있으면 초기 데이터를 내부적으로 가져올 수 있습니다 . 그러나 react-universal-app 서버에서 RECT 응용 프로그램을 어떻게 또는 어디서 렌더링 할 것인지에 대한 가정을하지 않으므로 할 수 없습니다! 명확한 예를 보려면 클라이언트를 읽으십시오.
그런 다음 서버에서 React 애플리케이션을 렌더링하는 ReactDOMServers 의 방법을 살펴보십시오!
loadInitialData 전달 된 URL을 기반으로 경로 getInitialData 일치하는 선택적 비동기 기능입니다. 경로에 getInitialData 가없는 경우 빈 개체가 반환됩니다. 다음과 같은 주장을합니다.
url ( string ) - node.js http url -like 객체routes ( array ) - 라우터 경로를 반응합니다일부 초기 데이터로 경로를 렌더링하는 반응 구성 요소. 다음 소품을 사용할 수 있습니다.
routes ( array ) - 라우터 경로를 반응합니다data ( object ) - 경로의 구성 요소로 전달되는 loadInitialData 의 선택적 초기 데이터location 키입니다. react-universal-app 클라이언트에서 React 응용 프로그램을 수화시키기 위해 ClientApp 이라는 React 구성 요소를 제공합니다. 그런 다음 react-dom 의 hydrate 방법을 호출해야합니다.
클라이언트 측 애플리케이션은 서버에서 응용 프로그램을 렌더링하는 데 사용 된 데이터에 대한 액세스가 필요하므로 서버가 렌더링 된 RECT 응용 프로그램을 감고 클라이언트로 전송하도록 HTML 문서에 주입해야합니다. 이 데이터는 script 태그 내부에있을 수 있습니다 window
< script >
window.__APP_DATA__ = data;
</ script > 그런 다음 클라이언트에서 React 응용 프로그램을 수화하는 ReactDOM 의 방법을 살펴보십시오!
클라이언트의 경로와 응용 프로그램을 렌더링하는 반응 구성 요소. 다음 소품을 가져옵니다.
routes ( array ) - 라우터 경로를 반응합니다data ( object ) - 경로의 구성 요소로 전달되는 loadInitialData 의 선택적 초기 데이터
