Gatsby as a replacement fro create-react-app

GAT S BY A S A REPLACEMENT FOR C R E A T E - R E A C T- A P P @khaled_garbaya. https://k4d.dev

HI, I’M KHALED @khaled_garbaya www.k4d.dev www.learnjamstack.com @khaled_garbaya. https://k4d.dev

I’M FROM TUNISIA @khaled_garbaya. https://k4d.dev

S T A R WA R S E P I S O D E 1 WA S FILMED IN TUNISIA TATAO U I N E I S A N AC T UA L C I T Y IN TUNISIA @khaled_garbaya. https://k4d.dev

FROM THE PICTURE GUESS HOW MANY PRS I MADE TO GAT S BY @khaled_garbaya. https://k4d.dev

LAST TIME I CHECKED 22 @khaled_garbaya. https://k4d.dev

GAT S BY A S A REPLACEMENT FOR C R E A T E - R E A C T- A P P @khaled_garbaya. https://k4d.dev

I S N ’ T GAT S BY A S TAT I C S I T E G E N E R AT O R ? @khaled_garbaya. https://k4d.dev

IT’S MORE T HA N T HAT @khaled_garbaya. https://k4d.dev

I T G I V E S YO U H T M L T O S TA R T W I T H @khaled_garbaya. https://k4d.dev

T H E N , R E H Y D R AT E S I T I N T O A F U L LY- F L E D G E D REACT APP @khaled_garbaya. https://k4d.dev

CRA VS GAT S BY @khaled_garbaya. https://k4d.dev

THEY ARE SIMILAR @khaled_garbaya. https://k4d.dev

THEY WORK WITH REACT @khaled_garbaya. https://k4d.dev

T H EY H E L P YO U SET UP AN A P P L I CAT I O N @khaled_garbaya. https://k4d.dev

THEY REMOVE MUCH OF T H E C O N F I G U R AT I O N HEADACHE. @khaled_garbaya. https://k4d.dev

HOWEVER … @khaled_garbaya. https://k4d.dev

GAT S BY OFFERS MORE @khaled_garbaya. https://k4d.dev

S TAT I C R E N D E R I N G N O S E RV E R S NEEDED @khaled_garbaya. https://k4d.dev

S E O F R I E N D LY APP @khaled_garbaya. https://k4d.dev

AU T O M AT I C ROUTING @khaled_garbaya. https://k4d.dev

ACCESSIBLE ROUTING @khaled_garbaya. https://k4d.dev

UNIFIED GRAPHQL D ATA L AY E R @khaled_garbaya. https://k4d.dev

EXCELLENT ECOSYSTEM OF PLUGINS @khaled_garbaya. https://k4d.dev

A FEW GOTCHA @khaled_garbaya. https://k4d.dev

THE WINDOW OBJECT @khaled_garbaya. https://k4d.dev

const isBrowser = typeof window !== undefined exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === “build-html”) { actions.setWebpackConfig({ module: { rules: [ { test: /moduleName/, use: loaders.null(), }, ], }, }) } } @khaled_garbaya. https://k4d.dev

YO U C A N U S E GAT S BY W I T H O U T GRAPHQL @khaled_garbaya. https://k4d.dev

exports.createPages = async ({ actions: { createPage } }) #=> { #// getPokemonData is a function that fetches our data const allPokemon = await getPokemonData([“pikachu”, “charizard”, “squirtle”]) #// Create a page that lists all Pokémon. createPage({ path: /, component: require.resolve(“./src/templates/all-pokemon.js”), context: { allPokemon }, }) #// Create a page for each Pokémon. allPokemon.forEach(pokemon #=> { createPage({ path: /pokemon/${pokemon.name}/, component: require.resolve(“./src/templates/pokemon.js”), context: { pokemon }, }) }) } @khaled_garbaya. https://k4d.dev

T HA N K YO U k4d.dev/talk/cra-vs-gatsby @khaled_garbaya. https://k4d.dev