react universal app
1.0.0
react-universal-app est une bibliothèque qui permet la construction d'une application à une seule page avec des composants REACT universels et REACT ROUTER.
Les objectifs de react-universal-app sont très simples:
Simplicité
react-universal-app fournit 2 composants REACT:
Il fournit également une seule API à obtenir des données. Cette API à fixer des données est définie à côté de vos itinéraires.
Flexibilité
react-universal-app ne fait pas grand-chose.
Il vous donne quelques composants React pour rendre vos itinéraires et ne vous oblige pas à rendre ou à hydrater votre application de manière particulière. Vous pouvez rendre comme vous le souhaitez!
Il vous donne une seule API à obtenir des données, qui est définie sur vos itinéraires. Cela signifie que vous pouvez créer vos composants d'application de toute façon, vous le souhaitez, et vos composants de réaction ne sont que des composants React.
Pour commencer rapidement, affichez l'exemple des applications. Ces applications donnent un exemple de la façon dont vous pourriez créer une application en utilisant react-universal-app .
Alternativement, suivez les étapes ci-dessous pour commencer.
npm install react-universal-app react Ce qui suit donne des informations sur la façon de configurer le routage et la récupération des données dans votre application REACT principale. Une fois que vous avez configuré vos itinéraires, vous pouvez les transmettre pour réagir des composants qui react-universal-app propose le rendu côté serveur et l'hydratation côté client.
react-universal-app utilise React Router 4, qui est une excellente base pour servir les pages en tant que composants et fournir une configuration d'itinéraire. Pour définir vos itinéraires, créez une configuration d'itinéraire et exportez-les.
Remarque: react-universal-app ne prend actuellement en charge uniquement un seul niveau de routage.
// ./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 fournit un getInitialData très familier pour la récupération des données, qui est défini dans la configuration de l'itinéraire.
Cela fournit une séparation claire des préoccupations et de l'agnosticisme entre la configuration de l'itinéraire / la récupération des données et les composants. Vos composants React ne sont que des composants React, et vous pouvez échanger des composants sur les itinéraires autant que vous le souhaitez.
Cela a un avantage implicite de réduire la barrière à l'entrée pour le développement des nouveaux développeurs React, car le flux de données dans l'application est clair et défini.
await getInitialData(ctx): { data } getInitialData est une fonction asynchrone facultative définie sur la configuration d'un itinéraire. Cette API est utilisée pour récupérer les données d'une API externe, ou simplement renvoyer certaines données initiales dans le composant d'une route en fonction d'une autre variable.
Un objet ctx est passé pour getInitialData , qui comprend:
match - React Router Match Object Sur le serveur, getInitialData est appelé explicitement par vous via loadInitialData (voir ci-dessous), la réponse transmise au composant du serveur.
Sur le client, il est appelé en interne et les données retournées sont transmises au composant défini de l'itinéraire. Sur le client, react-universal-app a 3 états dans le cycle de vie de getInitialData qui sont transmis à la composante de l'itinéraire:
loading ( boolean ) - loading sera true si getInitialData n'a pas encore répondu, probablement parce qu'il est occupé à récupérer de votre API. Sinon, c'est falsedata ( object ) - Une fois que react-universal-app a vos données, il sera transmis dans l'hélice data . Sinon, c'est nullerror ( Error ) - Si le processus pour obtenir vos données initiales lance une erreur, il sera transmis à votre composant pour gérer. Sinon, c'est 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 prend en charge le routage paramétré à partir de react-router . Comme la récupération des données est définie sur l'itinéraire, le routage paramétré est un jeu d'enfant et peut être manipulé très proprement.
// ./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 ; Pour rendre votre application sur un serveur, react-universal-app vous fournit un composant React ( ServerApp ) et une API à la recherche de données ( loadInitialData ). react-universal-app pourrait récupérer les données initiales en interne pour vous si elle était plus opiniâtre. Cependant, react-universal-app ne fait aucune hypothèse sur la façon ou l'endroit où vous rendez votre application React sur le serveur, donc il ne peut pas! Lisez le client pour un exemple clair de pourquoi pas.
Ensuite, jetez un œil aux méthodes de ReactDOMServers pour rendre une application React sur un serveur!
loadInitialData est une fonction asynchrone facultative qui correspond à l'itinéraire en fonction de l'URL passée, appelle getInitialData et renvoie la réponse. Si l'itinéraire n'a pas de getInitialData , un objet vide sera retourné. Prend les arguments suivants:
url ( string ) - un objet de type URL Node.js Httproutes ( array ) - routeurs réagisUn composant React qui rend un itinéraire avec certaines données initiales. Il peut prendre les accessoires suivants:
routes ( array ) - routeurs réagisdata ( object ) - Données initiales facultatives de loadInitialData qui est transmise au composant de l'itinérairelocation est une clé, que vous pouvez passer un objet de type URL Node.js Http URL Pour hydrater votre application React sur un client, react-universal-app fournit un composant React appelé ClientApp . Vous devez ensuite appeler la méthode hydrate de react-dom .
L'application côté client a besoin d'accès aux données utilisées pour rendre l'application sur le serveur, et doit donc être injectée dans le document HTML dans lequel le serveur a enveloppé l'application React rendue et envoyée au client. Ces données pourraient être à l'intérieur d'une balise script , qui injecte les données sur l'objet window global, comme ainsi:
< script >
window.__APP_DATA__ = data;
</ script > Ensuite, jetez un œil aux méthodes de ReactDOM pour hydrater une application React sur un client!
Un composant React qui rend vos itinéraires et votre application sur le client. Prend les accessoires suivants:
routes ( array ) - routeurs réagisdata ( object ) - Données initiales facultatives de loadInitialData qui est transmise au composant de l'itinéraire
