Slide 1

Slide 1 text

@khaled_garbaya. #GatsbyDaysLondon https://k4d.dev G A T S B Y A S A R E P L A C E M E N T F O R C R E A T E - R E A C T - A P P

Slide 2

Slide 2 text

https://k4d.dev H I , I ’ M K H A L E D www.k4d.dev www.learnjamstack.com @khaled_garbaya @khaled_garbaya. #GatsbyDaysLondon

Slide 3

Slide 3 text

https://k4d.dev I ’ M F R O M T U N I S I A @khaled_garbaya. #GatsbyDaysLondon

Slide 4

Slide 4 text

https://k4d.dev S T A R W A R S E P I S O D E 1 W A S F I L M E D I N T U N I S I A T A T A O U I N E I S A N A C T U A L C I T Y I N T U N I S I A @khaled_garbaya. #GatsbyDaysLondon

Slide 5

Slide 5 text

https://k4d.dev F R O M T H E P I C T U R E G U E S S H O W M A N Y P R S I M A D E T O G A T S B Y @khaled_garbaya. #GatsbyDaysLondon

Slide 6

Slide 6 text

https://k4d.dev L A S T T I M E I C H E C K E D 2 2 @khaled_garbaya. #GatsbyDaysLondon

Slide 7

Slide 7 text

https://k4d.dev G A T S B Y A S A R E P L A C E M E N T F O R C R E A T E - R E A C T - A P P @khaled_garbaya. #GatsbyDaysLondon

Slide 8

Slide 8 text

https://k4d.dev I S N ’ T G A T S B Y A S T A T I C S I T E G E N E R A T O R ? @khaled_garbaya. #GatsbyDaysLondon

Slide 9

Slide 9 text

https://k4d.dev I T ’ S M O R E T H A N T H A T @khaled_garbaya. #GatsbyDaysLondon

Slide 10

Slide 10 text

https://k4d.dev I T G I V E S Y O U H T M L T O S T A R T W I T H @khaled_garbaya. #GatsbyDaysLondon

Slide 11

Slide 11 text

https://k4d.dev T H E N , R E H Y D R A T E S I T I N T O A F U L L Y - F L E D G E D R E A C T A P P @khaled_garbaya. #GatsbyDaysLondon

Slide 12

Slide 12 text

https://k4d.dev C R A V S G A T S B Y @khaled_garbaya. #GatsbyDaysLondon

Slide 13

Slide 13 text

https://k4d.dev T H E Y A R E S I M I L A R @khaled_garbaya. #GatsbyDaysLondon

Slide 14

Slide 14 text

https://k4d.dev T H E Y W O R K W I T H R E A C T @khaled_garbaya. #GatsbyDaysLondon

Slide 15

Slide 15 text

https://k4d.dev T H E Y H E L P Y O U S E T U P A N A P P L I C A T I O N @khaled_garbaya. #GatsbyDaysLondon

Slide 16

Slide 16 text

https://k4d.dev T H E Y R E M O V E M U C H O F T H E C O N F I G U R A T I O N H E A D A C H E . @khaled_garbaya. #GatsbyDaysLondon

Slide 17

Slide 17 text

https://k4d.dev H O W E V E R … @khaled_garbaya. #GatsbyDaysLondon

Slide 18

Slide 18 text

https://k4d.dev G A T S B Y O F F E R S M O R E @khaled_garbaya. #GatsbyDaysLondon

Slide 19

Slide 19 text

https://k4d.dev S T A T I C R E N D E R I N G N O S E R V E R S N E E D E D @khaled_garbaya. #GatsbyDaysLondon

Slide 20

Slide 20 text

https://k4d.dev S E O F R I E N D L Y A P P @khaled_garbaya. #GatsbyDaysLondon

Slide 21

Slide 21 text

https://k4d.dev A U T O M A T I C R O U T I N G @khaled_garbaya. #GatsbyDaysLondon

Slide 22

Slide 22 text

https://k4d.dev A C C E S S I B L E R O U T I N G @khaled_garbaya. #GatsbyDaysLondon

Slide 23

Slide 23 text

https://k4d.dev U N I F I E D G R A P H Q L D A T A L A Y E R @khaled_garbaya. #GatsbyDaysLondon

Slide 24

Slide 24 text

https://k4d.dev E X C E L L E N T E C O S Y S T E M O F P L U G I N S @khaled_garbaya. #GatsbyDaysLondon

Slide 25

Slide 25 text

https://k4d.dev A F E W G O T C H A @khaled_garbaya. #GatsbyDaysLondon

Slide 26

Slide 26 text

https://k4d.dev T H E ` W I N D O W ` O B J E C T @khaled_garbaya. #GatsbyDaysLondon

Slide 27

Slide 27 text

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. #GatsbyDaysLondon

Slide 28

Slide 28 text

https://k4d.dev Y O U C A N U S E G A T S B Y W I T H O U T G R A P H Q L @khaled_garbaya. #GatsbyDaysLondon

Slide 29

Slide 29 text

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. #GatsbyDaysLondon

Slide 30

Slide 30 text

https://k4d.dev I H A V E N ’ T U S E D C R A F O R A L O N G T I M E S I N C E G A T S B Y C A M E I N @khaled_garbaya. #GatsbyDaysLondon

Slide 31

Slide 31 text

https://k4d.dev T H A N K Y O U k4d.dev/talk/cra-vs-gatsby https://learnjamstack.com/migrate-a-reactjs-project-to-gatsby/ @khaled_garbaya. #GatsbyDaysLondon @khaled_garbaya #GatsbyDaysLondon