react universal app

react-universal-app

react-universal-app เป็นไลบรารีที่ช่วยให้สามารถสร้างแอปพลิเคชันหน้าเดียวที่มีส่วนประกอบปฏิกิริยาสากลและเราเตอร์ตอบสนอง

เป้าหมายโครงการ

เป้าหมายของ react-universal-app เป็นเรื่องง่ายมาก:

• ความเรียบง่ายในการสร้างสปาที่มีส่วนประกอบปฏิกิริยาสากล
• ความยืดหยุ่นในการสร้างสปาที่มีส่วนประกอบปฏิกิริยาสากล

ความเรียบง่าย

react-universal-app ให้ 2 ส่วนประกอบปฏิกิริยา:

1. สำหรับเซิร์ฟเวอร์เพียงแค่ผ่านข้อมูลเริ่มต้นและเส้นทางและแสดงผลสิ่งนั้น
2. สำหรับไคลเอนต์เพียงส่งผ่านข้อมูลของคุณที่แสดงบนเสิร์ฟและเส้นทางเดียวกับที่คุณส่งไปยังส่วนประกอบเซิร์ฟเวอร์และให้ความชุ่มชื้น

นอกจากนี้ยังมี API การดึงข้อมูลเดียว API การดึงข้อมูลนี้ถูกกำหนดไว้ถัดจากเส้นทางของคุณ

ความยืดหยุ่น

react-universal-app ไม่ได้ทำอะไรมาก

มันช่วยให้คุณมีส่วนประกอบตอบสนองสองสามอย่างสำหรับการแสดงเส้นทางของคุณและไม่บังคับให้คุณแสดงหรือให้ความชุ่มชื้นแก่แอปของคุณในวิธีใดวิธีหนึ่ง คุณสามารถแสดงผลได้ตามที่คุณต้องการ!

มันให้ API การดึงข้อมูลเดียวซึ่งกำหนดไว้ในเส้นทางของคุณ ซึ่งหมายความว่าคุณสามารถสร้างส่วนประกอบแอปของคุณได้ในขณะที่คุณต้องการและส่วนประกอบที่ตอบสนองของคุณเป็นเพียงส่วนประกอบที่ตอบสนอง

เริ่มต้น

ในการเริ่มต้นอย่างรวดเร็วให้ดูแอปพลิเคชันตัวอย่าง แอปพลิเคชันเหล่านี้ให้ตัวอย่างของวิธีที่คุณอาจสร้างแอปพลิเคชันโดยใช้ react-universal-app

หรือทำตามขั้นตอนด้านล่างเพื่อเริ่มต้น

การติดตั้ง

npm install react-universal-app 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 ใหม่เนื่องจากการไหลของข้อมูลในแอปพลิเคชันมีความชัดเจนและกำหนด

await getInitialData(ctx): { data }

getInitialData เป็นฟังก์ชั่นแบบอะซิงโครนัส เสริม ที่กำหนดไว้ในการกำหนดค่าของเส้นทาง API นี้ใช้สำหรับการดึงข้อมูลจาก API ภายนอกหรือเพียงส่งคืนข้อมูลเริ่มต้นบางส่วนไปยังส่วนประกอบของเส้นทางตามตัวแปรอื่น ๆ

วัตถุ ctx ถูกส่งผ่านไปยัง getInitialData ซึ่งรวมถึง:

• match - วัตถุจับคู่ของเราเตอร์ตอบสนอง

บนเซิร์ฟเวอร์ getInitialData เรียกอย่างชัดเจนโดยคุณผ่าน loadInitialData (ดูด้านล่าง) โดยการตอบกลับส่งผ่านไปยังส่วนประกอบเซิร์ฟเวอร์

บนไคลเอนต์มันถูกเรียกว่าภายในและข้อมูลที่ส่งคืนจะถูกส่งผ่านไปยังองค์ประกอบที่กำหนดของเส้นทาง ในลูกค้า react-universal-app มี 3 รัฐในวงจรชีวิตของ getInitialData ที่ส่งผ่านไปยังองค์ประกอบของเส้นทาง:

• loading ( boolean ) - loading จะเป็น true หาก getInitialData ยังไม่ตอบสนองอาจเป็นเพราะมันยุ่งอยู่กับการดึงข้อมูลจาก API ของคุณ มิฉะนั้นมันเป็น 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 สำหรับการแสดงแอปพลิเคชัน React บนเซิร์ฟเวอร์!

รอ LoadInitialdata (URL, เส้นทาง): {data}

loadInitialData เป็นฟังก์ชั่นแบบอะซิงโครนัส เสริม ที่ตรงกับเส้นทางตาม URL ที่ผ่านการโทร getInitialData และส่งคืนการตอบกลับ หากเส้นทางไม่มี getInitialData วัตถุที่ว่างเปล่าจะถูกส่งคืน ใช้ข้อโต้แย้งต่อไปนี้:

• url ( string ) - a node.js http url url url
• routes ( array ) - เส้นทางเราเตอร์ตอบสนอง

องค์ประกอบปฏิกิริยาที่แสดงเส้นทางที่มีข้อมูลเริ่มต้นบางอย่าง สามารถใช้อุปกรณ์ประกอบฉากต่อไปนี้:

• routes ( array ) - เส้นทางเราเตอร์ตอบสนอง
• data ( object ) - ข้อมูลเริ่มต้นที่ เป็นตัวเลือก จาก loadInitialData ที่ส่งผ่านไปยังส่วนประกอบของเส้นทาง
• อุปกรณ์ประกอบฉาก StaticRouter ของ React ทั้งหมด - location เป็นกุญแจสำคัญซึ่งคุณสามารถผ่านวัตถุ URL HTTP ที่มีลักษณะคล้าย node.js HTTP

ลูกค้า

เพื่อให้ความชุ่มชื้นแก่แอปพลิเคชัน React ของคุณบนไคลเอนต์ react-universal-app ให้องค์ประกอบปฏิกิริยาที่เรียกว่า ClientApp จากนั้นคุณต้องเรียกวิธีการ hydrate ของ react-dom

แอปพลิเคชันฝั่งไคลเอ็นต์ต้องการการเข้าถึงข้อมูลที่ใช้ในการแสดงแอปพลิเคชันบนเซิร์ฟเวอร์และควรถูกฉีดลงในเอกสาร HTML ที่เซิร์ฟเวอร์ห่อแอปพลิเคชัน React ที่แสดงผลและส่งไปยังไคลเอนต์ ข้อมูลนี้อาจอยู่ในแท็ก script ที่ฉีดข้อมูลไปยังวัตถุ window ทั่วโลกเช่น:

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

จากนั้นลองดูที่วิธีการของ ReactDOM สำหรับการให้ความชุ่มชื่นแอปพลิเคชัน React บนไคลเอนต์!

องค์ประกอบปฏิกิริยาที่แสดงเส้นทางและแอปพลิเคชันของคุณบนไคลเอนต์ ใช้อุปกรณ์ประกอบฉากต่อไปนี้:

• routes ( array ) - เส้นทางเราเตอร์ตอบสนอง
• data ( object ) - ข้อมูลเริ่มต้นที่ เป็นตัวเลือก จาก loadInitialData ที่ส่งผ่านไปยังส่วนประกอบของเส้นทาง
• อุปกรณ์ประกอบฉากของ Browserrouter ของ React เราเตอร์ทั้งหมด