Habiba Gadalla
Hi!
@CodingCodessa
What's Gatsby?
Gatsby is a blazing fast modern site generator for React.
Who's using Gatsby?
*Warning: Don't use a library/framework/tool because all the cool people are using is, use it because it makes sense to you why is it popular
How Does it Work?
How Does it Work?
How Does it Work?
Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.
How Does it Work?
Why Use Gatsby?
-
Webpack bundling and latest tooling
-
Components
-
Gatsby plugins, starters and React packages
-
Styling
Why Use Gatsby?
-
Follows performance best practices
-
Generates only static assets (no server required)
-
Optimizes and lazy-loads assets
-
Normalizes third-party data
Let's Use Gatsby!
npm install -g gatsby-cli
gatsby new egytpjs-site
cd egytpjs-site
gatsby develop
Let's Use Gatsby!
gatsby-config.jsgatsby-node.jsgatsby-ssr.jsgatsby-browser.js- first file to be read when running gatsby build/develop
- the core of the gatsby system
- all the configs and plugins and metadata
- server side render — it generates all the pages during build time.
- hook into the lifecycle
- createPages
- onCreateBabelConfig
-onCreateWebpackConfig
- onPostBuild
Gatsby is a static site that loads a dynamic application after initial load, which means you get the benefits of a static site in a web application. gatsby-browser.js provides convenient hooks to deal with app loading, route updates, service worker updates, scroll positioning, and more.