react universal app
1.0.0
react-universal-app -это библиотека, которая позволяет создавать одностраничное приложение с универсальными компонентами React и REACT Router.
Цели react-universal-app очень просты:
Простота
react-universal-app обеспечивает 2 компонента React:
Он также обеспечивает единый API извлечения данных. Этот API избрать данные определяется рядом с вашими маршрутами.
Гибкость
react-universal-app мало что делает.
Это дает вам несколько компонентов реагирования для визуализации ваших маршрутов и не заставляет вас представлять или увлажнить ваше приложение каким -либо образом. Вы можете рендерировать так, как хотите!
Это дает вам единый 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 - React Router's Match Object На сервере getInitialData явно называется вами через loadInitialData (см. Ниже), а ответ передается на компонент сервера.
На клиенте он называется внутренне, и возвращаемые данные передаются в определенный компонент маршрута. На клиенте react-universal-app имеет 3 состояния в жизненном цикле getInitialData , которые передаются в компонент маршрута:
loading ( boolean ) - loading будет true , если getInitialData еще не ответила, вероятно, потому что она занята из вашего API. В противном случае это falsedata ( object )-После того, как react-universal-app имеет ваши данные, они будут переданы в предложении data . В противном случае это nullerror ( 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 для отображения приложения React на сервере!
loadInitialData - это дополнительная асинхронная функция, которая соответствует маршруту на основе прошедшего URL, вызовов getInitialData и возвращает ответ. Если маршрут не имеет getInitialData , будет возвращен пустой объект. Принимает следующие аргументы:
url ( string ) - node.js http url -подобный объектroutes ( array ) - реагировать маршруты маршрутизатораКомпонент реагирования, который отображает маршрут с некоторыми начальными данными. Это может занять следующий реквизит:
routes ( array ) - реагировать маршруты маршрутизатораdata ( object ) - Необязательные начальные данные из loadInitialData , которые передаются в компонент маршрутаlocation является ключевым, что вы можете передать Node.js http -подобный объект Чтобы увлажнить ваше приложение React на клиенте, react-universal-app предоставляет компонент React, называемый ClientApp . Затем вы должны вызвать метод hydrate react-dom .
Приложению на стороне клиента требует доступа к данным, которые использовались для визуализации приложения на сервере, и поэтому должно быть введено в документ HTML, в котором сервер завершил приложение REACT REACT и отправлено клиенту. Эти данные могут быть внутри тега script , который вводит данные в глобальный window -объект, как и так:
< script >
window.__APP_DATA__ = data;
</ script > Затем посмотрите на методы ReactDOM для увлажнения приложения React на клиенте!
Компонент React, который отменяет ваши маршруты и приложение на клиенте. Принимает следующий реквизит:
routes ( array ) - реагировать маршруты маршрутизатораdata ( object ) - Необязательные начальные данные из loadInitialData , которые передаются в компонент маршрута
