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を提供します。これは、とにかく必要なアプリコンポーネントを構築できることを意味し、Reactコンポーネントは単なるReactコンポーネントです。
すぐに開始するには、アプリケーションのサンプルを表示します。これらのアプリケーションはreact-universal-appを使用してアプリケーションを作成する方法の例を示しています。
または、以下の手順に従って開始します。
npm install react-universal-app react以下は、メインReactアプリケーションでルーティングとデータフェッチをセットアップする方法に関する情報を提供します。ルートをセットアップしたら、 react-universal-appサーバー側のレンダリングとクライアント側の水分補給を提供する反応コンポーネントに渡すことができます。
react-universal-app React Router 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コンポーネントはReactコンポーネントであるだけであり、好きなだけルートでコンポーネントを交換できます。
これは、アプリケーション内のデータの流れが明確で定義されているため、新しい反応開発者の開発の障壁を減らすという暗黙の利点があります。
await getInitialData(ctx): { data } getInitialData 、ルートの構成で定義されるオプションの非同期関数です。このAPIは、外部APIからデータを取得するか、他の変数に基づいていくつかの初期データをルートのコンポーネントに返すためだけに使用されます。
ctxオブジェクトはgetInitialDataに渡されます。
match - ルーターの一致オブジェクトを反応しますサーバーでは、 getInitialDataは、 loadInitialData （以下を参照）を介して明示的に呼ばれ、サーバーコンポーネントに応答が渡されます。
クライアントでは、内部で呼ばれ、返されたデータはルートの定義されたコンポーネントに渡されます。クライアントでは、 react-universal-appには、ルートのコンポーネントに渡されるgetInitialDataのライフサイクルに3つの状態があります。
loading （ boolean ） - getInitialDataまだloadingしていない場合、おそらくAPIからフェッチするのに忙しいtrueです。そうでなければ、それは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コンポーネント（ ServerApp ）とデータフェッチングAPI（ loadInitialData ）を提供します。 react-universal-appそれがより意見があった場合、あなたのために初期データを内部的に取得することができます。ただし、 react-universal-app Reactアプリケーションをサーバー上のどのように、どこでレンダリングするかについての仮定を立てていないため、できません。理由の明確な例については、クライアントを読んでください。
次に、 ReactDOMServersのMethodのサーバーでReactアプリケーションをレンダリングする方法をご覧ください！
loadInitialData 、通過したURLに基づいてルートに一致するオプションの非同期関数であり、 getInitialData呼び出し、応答を返します。ルートにgetInitialDataがない場合、空のオブジェクトが返されます。次の議論を取ります：
url （ string ）-a node.js http url -likeオブジェクトroutes （ array ） - Routerルータールートを反応しますいくつかの初期データを使用してルートをレンダリングする反応コンポーネント。次の小道具を取ることができます。
routes （ array ） - Routerルータールートを反応しますdata （ object ） - ルートのコンポーネントに渡されるloadInitialDataからのオプションの初期データlocation重要なもので、node.js HTTP URLのようなオブジェクトを渡すことができますReactアプリケーションをクライアントに補給するために、 react-universal-app ClientAppと呼ばれるReactコンポーネントを提供します。その後、 react-domのhydrate法を呼び出す必要があります。
クライアント側のアプリケーションは、サーバー上のアプリケーションをレンダリングするために使用されたデータにアクセスする必要があるため、サーバーがレンダリングされたReactアプリケーションをラップしてクライアントに送信したHTMLドキュメントに挿入する必要があります。このデータは、 scriptタグ内にある可能性があり、次のようにデータをグローバルwindowオブジェクトに挿入します。
< script >
window.__APP_DATA__ = data;
</ script >次に、クライアントにReactアプリケーションに潤いを与えるためのReactDOMの方法を見てみましょう！
クライアントにルートとアプリケーションをレンダリングする反応コンポーネント。次の小道具を取ります：
routes （ array ） - Routerルータールートを反応しますdata （ object ） - ルートのコンポーネントに渡されるloadInitialDataからのオプションの初期データ
