成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

學(xué)習(xí) Next.js: 入門

Miracle / 2265人閱讀

摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署哪位分高的幫忙創(chuàng)建一個的標(biāo)簽謝謝現(xiàn)暫時放在標(biāo)簽下面了新建文章有時間限制一會全部發(fā)上來這是最近兩天

原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來.


學(xué)習(xí) Next.js: 入門
學(xué)習(xí) Next.js: 頁面之間的導(dǎo)航
學(xué)習(xí) Next.js: 使用共享組件
學(xué)習(xí) Next.js: 創(chuàng)建動態(tài)內(nèi)容
學(xué)習(xí) Next.js: 使用路由掩碼創(chuàng)建干凈的URL
學(xué)習(xí) Next.js: 干凈URL的服務(wù)器支持
學(xué)習(xí) Next.js: 獲取數(shù)據(jù)
學(xué)習(xí) Next.js: 部署


哪位分高的,幫忙創(chuàng)建一個 Next.js 的標(biāo)簽, 謝謝. 現(xiàn)暫時放在reactjs標(biāo)簽下面了. 新建文章有時間限制, 一會全部發(fā)上來, 這是最近兩天翻譯的 Next.js 學(xué)習(xí)資料, 原始文章在 http://learnnextjs.com
入門

創(chuàng)建一個單頁Javascript應(yīng)用程序是一件非常有挑戰(zhàn)的事情, 幸運(yùn)的是, 開源世界給我們提供了一些好用的工具來簡化, 加速單頁應(yīng)用的開發(fā).

Create React App 就是這樣一種工具.

即使是這樣, 創(chuàng)建單頁應(yīng)用有非常高的學(xué)習(xí)曲線. 仍然需要我們學(xué)習(xí)客戶端路由, 頁面布局, 等技術(shù). 如果你還想要運(yùn)行服務(wù)器端渲染(SSR: Server Side Rendering), 事情就變得更加困難了.

因此, 我們需要一個簡單并且可自定義的方案

想一下我們?nèi)绾问褂肞HP創(chuàng)建Web應(yīng)用程序. 首先創(chuàng)建一些文件, 編寫PHP代碼, 然后部署. 不用擔(dān)心路由的問題, Web應(yīng)用程序只是在服務(wù)器端運(yùn)行, 并且輸出HTML而已.

但這里我們說的不是用PHP來創(chuàng)建Web應(yīng)用程序, 我們使用Javascript和React, 使用Next.js框架給我們提供能力:

服務(wù)器端渲染(默認(rèn))

自動代碼切分, 加速頁面加載

簡單的客戶端路由(基于頁面)

基于Webpack的開發(fā)環(huán)境, 支持熱模塊替換(HMR: Hot Module Replacement)

可以使用Express 或其他Node.js服務(wù)器實(shí)現(xiàn)

使用Babel和Webpack配置定制

設(shè)置

Next.js 可以在Windows, Mac和Linux運(yùn)行. 只需要在系統(tǒng)中安裝Node.js即可開始構(gòu)建Next.js應(yīng)用程序.

除了需要一個文本編輯器編寫代碼, 一個終端調(diào)用命令之外, 沒什么別的是必須的.

如果在Windows上運(yùn)行, 建議使用 PowerShell. Next.js可以工作在任何Shell和終端下. 但是本指南中, 我們使用UNIX相關(guān)的命令.
推薦在 Windows 下使用 PowerShell, 讓工作方便一些.

運(yùn)行下面的命令, 創(chuàng)建一個示例項目:

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

然后打開package.json, 添加下面的NPM腳本命令:

{
  "scripts": {
    "dev": "next"
  }
}

現(xiàn)在, 一切就準(zhǔn)備好了, 你可以運(yùn)行下面的命令來啟動開發(fā)服務(wù)器了.

npm run dev

在瀏覽其中打開: http://localhost:3000.

404 頁面

打開 http://localhost:3000, 我們看到的是一個 404 頁面. 這個時候 Next.js 沒有任何功能. 默認(rèn)就是一個 404 頁面.

創(chuàng)建第一個頁面

現(xiàn)在我們來創(chuàng)建第一個頁面. 在 pages 目錄下創(chuàng)建一個名稱為 index.js 的文件, 內(nèi)容如下:

const Index = () => {
  return (
    

      
Hell Next.js

    

  )
}
export default Index

或者

const Index = () => (
  

    
Hell Next.js

  

)

export default Index

現(xiàn)在, 再次訪問 http://localhost:3000, 在頁面上你會看到 "Hello Next.js". 這里, 我們只是從 pages/index.js 模塊導(dǎo)出了一個簡單的 React 組件. 同理, 可以編寫你自己的模塊并且導(dǎo)出它.

確保你的 React 組件為默認(rèn)導(dǎo)出
譯注: (default關(guān)鍵字)

現(xiàn)在, 我們在Index頁故意引入一個語法錯誤(刪除尾部的

HTML標(biāo)簽), 如下:

const Index = () => (
  

    
Hello Next.js
  

)

export default Index

頁面將會顯示一個語法錯誤 There"s an error showing the syntax error.

錯誤處理

默認(rèn)情況, Next.js 會在瀏覽器中直接顯示這些錯誤信息, 這方便你識別錯誤并且快速的搞定它.

你但你解決了這些錯誤, 頁面會執(zhí)行一個無刷新的更新. 這得益于Webpack提供的熱模塊替換功能, 在Next.js它是默認(rèn)支持的.

你太棒了

看起來你已經(jīng)構(gòu)建了第一個Next.js應(yīng)用程序. 有什么想法? 如果你喜歡, 可以進(jìn)一步深入下去.

Bugfix

2017-10-11: 修復(fù)如下問題

Index(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83247.html

相關(guān)文章

  • Next.js踩坑入門系列（一）— Hello Next.js!

    摘要：接下來我們運(yùn)行一下。因此，我們需要新建一個目錄。接下在再重新啟動一下試試。因?yàn)槟J(rèn)開啟服務(wù)端渲染，也就無需我們進(jìn)行任何的配置，因此現(xiàn)在這個極其簡單的應(yīng)用就是一個。代碼地址參考文章服務(wù)端渲染與打造高可靠與高性能的同構(gòu)解決方案 寫在前面 說實(shí)話，我個人還是覺得文筆越來越不錯了，以前的文章都是一個問題悶到天黑，文章寫的有點(diǎn)亂由于文章過于龐大導(dǎo)致不是一氣呵成的，思路有時候會很混亂。所以我也準(zhǔn)備...

    rockswang 評論0 收藏0

  • 學(xué)習(xí) Next.js: 使用路由掩碼創(chuàng)建干凈的URL

    摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署使用路由掩碼創(chuàng)建干凈的在前面的課程中我們學(xué)到了如何使用查詢串創(chuàng)建動態(tài)頁面一次為基礎(chǔ)我們一篇博客的 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

    silenceboy 評論0 收藏0

  • 學(xué)習(xí) Next.js: 頁面之間的導(dǎo)航

    摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署頁面之間的導(dǎo)航現(xiàn)在我們知道了如何創(chuàng)建一個應(yīng)用程序并且運(yùn)行它我們的示例應(yīng)用程序只有一個簡單的頁面但 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

    layman 評論0 收藏0

  • 學(xué)習(xí) Next.js: 創(chuàng)建動態(tài)內(nèi)容

    摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署創(chuàng)建動態(tài)頁面現(xiàn)在我們知道了如何使用多個頁面創(chuàng)建一個基本的應(yīng)用程序?yàn)榱藙?chuàng)建頁面我們需要在磁盤上創(chuàng)建 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

    caohaoyu 評論0 收藏0

  • 學(xué)習(xí) Next.js: 部署

    摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署部署要部署一個應(yīng)用程序當(dāng)然我們首先需要一個可部署的已經(jīng)開發(fā)完成的應(yīng)用程序以下面這個開發(fā)的小型博客 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來.學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: 頁面...

    laznrbfe 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<