標(biāo)準(zhǔn)的Node工程目錄結(jié)構(gòu)，根目錄包含一個package.json" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 更現(xiàn)代化的建站方式——Gatsby.js系列教程(二)：了解Gatsby概貌&基礎(chǔ)概念

更現(xiàn)代化的建站方式——Gatsby.js系列教程(二)：了解Gatsby概貌&基礎(chǔ)概念

時間：2023-07-29 00:36:01 | 來源：網(wǎng)站運營

時間：2023-07-29 00:36:01 來源：網(wǎng)站運營

更現(xiàn)代化的建站方式——Gatsby.js系列教程(二)：了解Gatsby概貌&基礎(chǔ)概念：

Gatsby工程目錄

創(chuàng)建gatsby工程后(如果不會創(chuàng)建，可參見上節(jié))，用VSCode打開，目錄如圖所示：







標(biāo)準(zhǔn)的Node工程目錄結(jié)構(gòu)，根目錄包含一個package.json。

熟悉一下Gatsby界面

如上節(jié)所講，進(jìn)入工程根目錄，運行$ gatsby develop以啟動開發(fā)模式。瀏覽器https://localhost:8000 可以看到界面。

打開src/page/index.js，此文件描述的就是你看到的界面，有hello world字樣。

它是一個React組件，如果你還不熟悉React，沒關(guān)系，你現(xiàn)在只需要知道這個文件描述了一個界面，你會看到熟悉的div等html元素，后面會講React的相關(guān)知識。

試著修改一下hello world，去瀏覽器你會發(fā)現(xiàn)界面立即改變了。這就是Gatsby的熱重載機(jī)制，以提高開發(fā)效率。

熱重載：本質(zhì)上，當(dāng)您運行Gatsby開發(fā)服務(wù)器時，Gatsby站點文件在后臺會被“監(jiān)視”——任何時候保存文件，您的更改都會立即在瀏覽器中反映出來。您不需要硬刷新頁面或重新啟動開發(fā)服務(wù)器。
JSX:

js的擴(kuò)展語法，React用它描述界面。類似下面代碼，混合xml和js:

import React from "react"export default () => <div>Hello world!</div>而純js的寫法更像下面這樣：

import React from "react"export default () => React.createElement("div", null, "Hello world!")瀏覽器并不認(rèn)識jsx，只是gatsby附帶的工具把它轉(zhuǎn)換成了瀏覽器認(rèn)識的！

認(rèn)識組件

組件是站點的構(gòu)建塊；它是描述UI（用戶界面）的一部分的自包含代碼。
簡單說，在React中就是用來描述界面的jsx代碼。

在html中，我們就不再限于使用瀏覽器認(rèn)識的標(biāo)簽，比如<button>，而是可以自定義<MyButton>這樣。

界面組件

在gatsby中，任何定義在src/pages/*.js的React組件都是一個界面組件。

可以通過瀏覽器https://localhost:8000/* 來訪問！

子組件

如果一個界面很大，很復(fù)雜，或者某一塊界面許多地方要用到，比如Header，就可以把它抽離出來，封裝成一個子組件，便于重用。然后在父組件中引用。

類似下面代碼：

header.jsx:

import React from "react"export default () => <h1>This is a header.</h1>父組件引用header：

import React from "react"import Header from "../components/header"export default () => ( <div style={{ color: `teal` }}> <Header /> <p>Such wow. Very React.</p> </div>)瀏覽器就會把Header顯示出來：







gatsby習(xí)慣將其放到 src/components/*.js

Props

如果你了解過 React、Vue、Angular等框架，就發(fā)現(xiàn)組件的概念早已不新鮮，大家都是這么做的，而Props則是輸入屬性，給組件傳值用的！

如：

<Header headerText="About Gatsby" />你可以在組件jsx中，這么訪問它：

<h1>{props.headerText}</h1>

布局組件

布局組件是指要在多個頁面上共享的站點的部分。

如，GATSBY站點通常會有一個具有共享頭和頁腳的布局組件。其他常見的包括側(cè)欄或?qū)Ш讲藛巍?br>

頁面間鏈接

使用<Link />組件

例如：

import React from "react"import { Link } from "gatsby"import Header from "../components/header"export default () => ( <div style={{ color: `purple` }}> <Link to="/contact/">Contact</Link> <Header headerText="Hello Gatsby!" /> <p>What a world.</p> <img src="https://source.unsplash.com/random/400x200" alt="" /> </div>)Gatsby<Link />組件用于在站點內(nèi)的頁與頁之間進(jìn)行鏈接。對于GATSBY站點未處理的頁面的外部鏈接，請使用常規(guī)HTML<a>標(biāo)簽

構(gòu)建與部署

$ gatsby build然后生成靜態(tài)文件到public/目錄下，可將此目錄上傳到任何靜態(tài)服務(wù)，比如Github Page。

斜杠青年：獨立開發(fā)者/業(yè)余交易員/傳統(tǒng)文化愛好者
更多原創(chuàng)盡在公眾號: 「優(yōu)雅的程序員呀」。全棧。程序員賺錢之道。優(yōu)雅的技術(shù)，優(yōu)雅的賺錢。
關(guān)注公眾號，可以加我好友交流，也可加群技術(shù)交流哦。


關(guān)鍵詞：基礎(chǔ),概念,教程,現(xiàn)代化,方式,系列

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉