react universal app

react-universal-app

react-universal-app adalah perpustakaan yang memungkinkan pembangunan aplikasi satu halaman dengan komponen reaksi universal dan reaksi router.

Tujuan proyek

Tujuan react-universal-app sangat sederhana:

• Kesederhanaan dalam membangun spa dengan komponen reaksi universal
• Fleksibilitas dalam membangun spa dengan komponen reaksi universal

Kesederhanaan

react-universal-app menyediakan 2 komponen reaksi:

1. Untuk server, lewati saja beberapa data dan rute awal, dan render hal itu
2. Untuk klien, lewati saja data yang Anda render pada servis dan rute yang sama yang Anda lewati ke komponen server, dan melembabkan benda itu

Ini juga menyediakan API pengambilan data tunggal. API pengambilan data ini didefinisikan di sebelah rute Anda.

Fleksibilitas

react-universal-app tidak banyak membantu.

Ini memberi Anda beberapa komponen React untuk membuat rute Anda, dan tidak memaksa Anda untuk membuat atau melembabkan aplikasi Anda dengan cara apa pun. Anda dapat merender sesuka Anda!

Ini memberi Anda API pengambilan data tunggal, yang didefinisikan pada rute Anda. Ini berarti Anda dapat membangun komponen aplikasi Anda dengan cara yang Anda inginkan, dan komponen reaksi Anda hanyalah komponen bereaksi.

Memulai

Untuk memulai dengan cepat, lihat contoh aplikasi. Aplikasi ini memberikan contoh bagaimana Anda dapat membuat aplikasi menggunakan react-universal-app .

Atau, ikuti langkah -langkah di bawah ini untuk memulai.

Instalasi

npm install react-universal-app react

Aplikasi

Berikut ini memberikan informasi tentang cara mengatur perutean dan pengambilan data dalam aplikasi React utama Anda. Setelah Anda mengatur rute Anda, Anda dapat meneruskannya untuk bereaksi komponen yang react-universal-app menyediakan rendering sisi server dan hidrasi sisi klien.

Rute

react-universal-app menggunakan React Router 4, yang merupakan fondasi yang bagus untuk melayani halaman sebagai komponen dan menyediakan konfigurasi rute. Untuk menentukan rute Anda, buat beberapa konfigurasi rute dan mengekspornya.

CATATAN: react-universal-app saat ini hanya mendukung satu tingkat atas perutean.

 // ./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 ; 

Pengambilan data

react-universal-app menyediakan getInitialData yang sangat akrab untuk pengambilan data, yang didefinisikan dalam konfigurasi rute.

Ini memberikan pemisahan kekhawatiran yang jelas dan agnostisisme antara konfigurasi rute/pengambilan data dan komponen. Komponen Bereaksi Anda hanyalah komponen bereaksi, dan Anda dapat bertukar komponen di rute sebanyak yang Anda inginkan.

Ini memiliki manfaat implisit untuk mengurangi hambatan untuk masuk untuk pengembangan untuk pengembang React baru karena aliran data dalam aplikasi jelas dan ditentukan.

await getInitialData(ctx): { data }

getInitialData adalah fungsi asinkron opsional yang didefinisikan pada konfigurasi rute. API ini digunakan untuk mengambil data dari API eksternal, atau hanya mengembalikan beberapa data awal ke komponen rute berdasarkan beberapa variabel lainnya.

Objek ctx diteruskan ke getInitialData , yang meliputi:

• match - React Router's Match Object

Di server, getInitialData disebut secara eksplisit oleh Anda melalui loadInitialData (lihat di bawah), dengan respons diteruskan ke komponen server.

Pada klien, itu disebut secara internal dan data yang dikembalikan diteruskan ke komponen yang ditentukan rute. Pada klien, react-universal-app memiliki 3 negara bagian dalam siklus hidup getInitialData yang diteruskan ke komponen rute:

• loading ( boolean ) - loading akan true jika getInitialData belum merespons, mungkin karena sibuk mengambil dari API Anda. Kalau tidak, itu false
• data ( object )-Setelah react-universal-app memiliki data Anda, itu akan diteruskan di data prop. Kalau tidak, itu null
• error ( Error ) - Jika proses untuk mendapatkan data awal Anda melakukan kesalahan, itu akan diteruskan ke komponen Anda untuk ditangani. Kalau tidak, itu 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 ; 

Routing parameterisasi

react-universal-app mendukung routing parameterisasi dari react-router . Karena pengambilan data didefinisikan pada rute, perutean parameterisasi sangat mudah, dan dapat ditangani dengan sangat bersih.

 // ./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 ;

Server

Untuk membuat aplikasi Anda di server, react-universal-app memberi Anda komponen React ( ServerApp ) dan API pengambilan data ( loadInitialData ). react-universal-app dapat mengambil data awal secara internal untuk Anda jika lebih opini. Namun, react-universal-app tidak membuat asumsi tentang bagaimana atau di mana Anda akan membuat aplikasi React Anda di server, jadi tidak bisa! Baca klien untuk contoh yang jelas mengapa tidak.

Kemudian, lihatlah metode ReactDOMServers untuk membuat aplikasi bereaksi di server!

menunggu loadInitialData (url, rute): {data}

loadInitialData adalah fungsi asinkron opsional yang cocok dengan rute berdasarkan URL yang diteruskan, panggilan getInitialData , dan mengembalikan respons. Jika rute tidak memiliki getInitialData , objek kosong akan dikembalikan. Mengambil argumen berikut:

• url ( string ) - objek seperti url node.js http
• routes ( array ) - React Router Rute

Komponen Bereaksi yang membuat rute dengan beberapa data awal. Ini dapat mengambil alat peraga berikut:

• routes ( array ) - React Router Rute
• data ( object ) - Data awal opsional dari loadInitialData yang diteruskan ke komponen rute
• Semua alat peraga staticrouter react router - location adalah yang kunci, yang dapat Anda lewati objek seperti url node.js http

Klien

Untuk melembabkan aplikasi React Anda pada klien, react-universal-app menyediakan komponen bereaksi yang disebut ClientApp . Anda kemudian harus memanggil metode hydrate react-dom .

Aplikasi sisi klien memerlukan akses ke data yang digunakan untuk membuat aplikasi di server, dan karenanya harus disuntikkan ke dokumen HTML bahwa server membungkus aplikasi bereaksi yang diberikan dan dikirim ke klien. Data ini bisa berada di dalam tag script , yang menyuntikkan data ke objek window global, seperti itu:

 < script >
  window.__APP_DATA__ = data;
</ script >

Kemudian, lihatlah metode ReactDOM untuk menghidrasi aplikasi bereaksi pada klien!

Komponen Bereaksi yang membuat rute dan aplikasi Anda pada klien. Mengambil alat peraga berikut:

• routes ( array ) - React Router Rute
• data ( object ) - Data awal opsional dari loadInitialData yang diteruskan ke komponen rute
• Semua alat peraga browserrouter React Router