react universal app
1.0.0
react-universal-app ist eine Bibliothek, die das Erstellen einer einseitigen Anwendung mit universellen React-Komponenten und React-Router ermöglicht.
Die Ziele von react-universal-app sind sehr einfach:
Einfachheit
react-universal-app liefert 2 React-Komponenten:
Es bietet auch eine einzelne API für die Datenfetchung. Diese Datenfetching-API wird neben Ihren Routen definiert.
Flexibilität
react-universal-app tut nicht viel.
Es gibt Ihnen einige React -Komponenten, um Ihre Routen zu rendern, und zwingt Sie nicht, Ihre App auf eine bestimmte Weise zu rendern oder zu fydratieren. Sie können wie Sie wollen!
Es gibt Ihnen eine einzelne Datenfetching-API, die auf Ihren Routen definiert ist. Dies bedeutet, dass Sie Ihre App -Komponenten trotzdem erstellen können, und Ihre React -Komponenten sind nur React -Komponenten.
Um schnell zu beginnen, sehen Sie sich die Beispielanwendungen an. Diese Anwendungen geben ein Beispiel dafür, wie Sie eine Anwendung mit react-universal-app erstellen können.
Befolgen Sie alternativ die folgenden Schritte, um loszulegen.
npm install react-universal-app react Im Folgenden werden Informationen zum Einrichten von Routing und Daten zum Einrichten Ihrer Haupt -Reaktionsanwendung enthält. Sobald Sie Ihre Routen eingerichtet haben, können Sie sie an die Reaktion von Komponenten übergeben, die react-universal-app für serverseitige Rendering und clientseitige Flüssigkeitszufuhr bietet.
react-universal-app verwendet React Router 4, was eine hervorragende Grundlage für das Servieren von Seiten als Komponenten und die Bereitstellung von Routenkonfigurationen ist. Um Ihre Routen zu definieren, erstellen Sie eine Routenkonfiguration und exportieren Sie sie.
HINWEIS: react-universal-app unterstützt derzeit nur einen einzelnen Routing-Niveau.
// ./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 bietet eine sehr vertraute getInitialData für das Abrufen von Daten, die in der Routenkonfiguration definiert ist.
Dies bietet eine klare Trennung von Bedenken und Agnostizismus zwischen Routenkonfiguration/Datenabruf und Komponenten. Ihre React -Komponenten sind nur React -Komponenten, und Sie können Komponenten auf Routen so weit austauschen, wie Sie möchten.
Dies hat einen impliziten Vorteil, um die Eintrittsbarriere für die Entwicklung neuer React -Entwickler zu verringern, da der Datenfluss in der Anwendung klar und definiert ist.
await getInitialData(ctx): { data } getInitialData ist eine optionale asynchrone Funktion, die auf der Konfiguration einer Route definiert ist. Diese API wird zum Abholen von Daten von einer externen API oder zur Rückgabe einiger Anfangsdaten an die Komponente einer Route basierend auf einer anderen Variablen verwendet.
Ein ctx -Objekt wird an getInitialData weitergegeben, einschließlich:
match - React Routers Match -Objekt Auf dem Server wird getInitialData von Ihnen explizit über loadInitialData (siehe unten) aufgerufen, wobei die Antwort an die Serverkomponente übergeben wird.
Auf dem Client wird es intern aufgerufen und die zurückgegebenen Daten werden an die definierte Komponente der Route übergeben. Auf dem Kunden verfügt react-universal-app im Lebenszyklus von getInitialData über 3 Zustände, die an die Komponente der Route übergeben werden:
loading ( boolean ) - loading ist true , wenn getInitialData noch nicht reagiert hat, wahrscheinlich weil es damit beschäftigt ist, von Ihrer API zu holen. Ansonsten ist es falsedata ( object )-Sobald react-universal-app Ihre Daten hat, wird sie in der data übergeben. Ansonsten ist es nullerror ( Error ) - Wenn der Vorgang zum Abrufen Ihrer anfänglichen Daten einen Fehler auslöst, wird er an Ihre Komponente übergeben, um sie zu verarbeiten. Ansonsten ist es 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 unterstützt das parametrisierte Routing aus react-router . Da das Abholen von Daten auf der Route definiert ist, ist das parametrisierte Routing ein Kinderspiel und kann sehr sauber behandelt werden.
// ./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 ; Um Ihre App auf einem Server zu rendern, bietet react-universal-app Ihnen eine React-Komponente ( ServerApp ) und eine Datenfetchungs-API ( loadInitialData ). react-universal-app könnte die ersten Daten intern für Sie abrufen, wenn sie mehr übersprechend waren. react-universal-app macht jedoch keine Annahmen darüber, wie oder wo Sie Ihre React-Anwendung auf dem Server rendern, sodass dies nicht! Lesen Sie den Client für ein klares Beispiel dafür, warum nicht.
Schauen Sie sich dann die Methoden von ReactDOMServers an, um eine React -Anwendung auf einem Server zu rendern!
loadInitialData ist eine optionale asynchrone Funktion, die der Route basierend auf der übergebenen URL entspricht, Anrufe getInitialData und die Antwort zurückgibt. Wenn in der Route kein getInitialData enthält, wird ein leeres Objekt zurückgegeben. Nimmt die folgenden Argumente an:
url ( string ) - a node.js http URL -ähnliches Objektroutes ( array ) - Router -Routen reagierenEine React -Komponente, die eine Route mit einigen anfänglichen Daten macht. Es kann die folgenden Requisiten erfordern:
routes ( array ) - Router -Routen reagierendata ( object ) - Optionale Anfangsdaten von loadInitialData , die an die Komponente der Route übergeben wirdlocation ist ein Schlüssel, das Sie ein Node.js HTTP -URL -ähnlicher Objekt übergeben können Um Ihre React-Anwendung auf einem Client zu feuchten, bietet react-universal-app eine React-Komponente namens ClientApp . Sie müssen dann die hydrate von react-dom aufrufen.
Die clientseitige Anwendung benötigt Zugriff auf die Daten, mit denen die Anwendung auf dem Server gerendert wurde. Daher sollte in das HTML-Dokument eingefügt werden, in dem der Server die gerenderte React-Anwendung eingewickelt und an den Client gesendet wurde. Diese Daten können sich in einem script -Tag befinden, das die Daten in das globale window wie SO injiziert:
< script >
window.__APP_DATA__ = data;
</ script > Schauen Sie sich dann die Methoden von ReactDOM an, um eine React -Anwendung auf einem Client zu feuchten!
Eine React -Komponente, die Ihre Routen und Ihre Anwendung im Client rendert. Nimmt die folgenden Requisiten:
routes ( array ) - Router -Routen reagierendata ( object ) - Optionale Anfangsdaten von loadInitialData , die an die Komponente der Route übergeben wird
