Faramaz Patrick
🧑🏽💻 Senior freelance front developer | React, Gatsby, Nuxt, Node, Vue JS, TS, JamStack, Wordpress. Opquast certified, a11y. |🎙 Podcaster slash-podcast.fr |
PHP / JavaScript / Symfony / React JS / Vue JS and more...
Web Maker indépendant since 2016
web developer since 2006
Annecy / Lyon / Genève / Lausanne
Gatsby ajoute une couche pour vous aider à développer une application React (avec une partie statique en plus).
Peut facilement remplacer create-react-app.
Première version en 2015. V2 septembre 2018
Grosse communauté, tout le monde peut contribuer (récompense aux contributeurs)
Système de plugins. A ce jour 1400 plugins disponibles : sources (wordpress, drupal, contentfull...), dev (sass, post-css....), marketing (Google Analytics...)
Plusieurs levées de fonds, la dernière 15 millions d'euros.
Ils ont embauché le créateur de WPGraphQL en juin pour lui permettre de travailler sur le plugin.
Un peu les mêmes que pour la JAMStack !
Obtenir 100/100 au Google page speed
👋 coucou WordPress
Pas obligé d'utiliser un serveur.
CDN avec now, netlify...
🥇
🤓
Hook, Redux, CSS-in-JS...
Pas de changement d'habitudes !
🥰
npm install -g gatsby-cli
gatsby new hello-world
Installation de gatsby-cli
Création d'un nouveau projet
npx gatsby new hello-world
ou par npx
Je fais mes pages en React, pas besoin de sources externes.
import React from "react"
import Layout from "../components/Layout"
import SEO from "../components/seo"
const MyPage = () => (
<Layout>
<SEO title="My page" />
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Compensabatur, inquit, cum summis doloribus laetitia ?
</p>
</Layout>
)
export default MyPage
src/pages/index.js => /
src/pages/my-page.js => /my-page
...
je veux des sources externes
Soit j'utilise un plugin qui récupère les sources
npm install --save gatsby-source-wordpress
// In your gatsby-config.js
module.exports = {
plugins: [
/*
* Gatsby's data processing layer begins with “source”
* plugins. Here the site sources its data from WordPress.
*/
{
resolve: "gatsby-source-wordpress",
options: {...}
}
]
};
exports.sourceNodes = async ({ actions, createNodeId, createContentDigest }) => {
try {
// Fetch the data
const res = await fetch(`https://api.rawg.io/api/games`);
// Transform the data into json
const data = await res.json();
// calling action.createNode on each item in the array
data.results.forEach(game => {
const node = {
...game, // We copy all of the properties from the game object
id: createNodeId(`RAWG-game-${game.id}`), // Needs to be unique
internal: {
type: 'RAWGGame',
// We pass in the game object to make sure it's unique
contentDigest: createContentDigest(game)
}
};
// Create the actual data node
actions.createNode(node);
});
} catch (error) {
console.log(error);
}
};
Soit j'utilise l'API pour créer une source
// The GraphQL data is passed into the component via props.data
const IndexPage = ({ data }) => {
return (
<Layout>
...
</Layout>
);
};
// We use the GraphiQL query here
export const query = graphql`
query MyQuery {
allRawgGame {
edges {
node {
id
name
background_image
}
}
}
}
`;
export default IndexPage;
Ensuite les data sont disponibles via GraphQL
Attention code façon node JS
By Faramaz Patrick
🧑🏽💻 Senior freelance front developer | React, Gatsby, Nuxt, Node, Vue JS, TS, JamStack, Wordpress. Opquast certified, a11y. |🎙 Podcaster slash-podcast.fr |