Gatsby as a replacement for create-react-app

Gatsbyjs and create-react-app are similar in that can help you set up an application and removes much of the configuration headache. However, Gatsby offers more and in this talk will go through the reason why I think Gatsby can be a CRA replacement.

Transcript

1. @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
2. https://k4d.dev H I , I ’ M K H A L E D www.k4d.dev www.learnjamstack.com @khaled_garbaya @khaled_garbaya. #GatsbyDaysLondon
3. https://k4d.dev I ’ M F R O M T U N I S I A @khaled_garbaya. #GatsbyDaysLondon
4. 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
5. 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
6. https://k4d.dev L A S T T I M E I C H E C K E D 2 2 @khaled_garbaya. #GatsbyDaysLondon
7. 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
8. 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
9. https://k4d.dev I T ’ S M O R E T H A N T H A T @khaled_garbaya. #GatsbyDaysLondon
10. 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
11. 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
12. https://k4d.dev C R A V S G A T S B Y @khaled_garbaya. #GatsbyDaysLondon
13. https://k4d.dev T H E Y A R E S I M I L A R @khaled_garbaya. #GatsbyDaysLondon
14. https://k4d.dev T H E Y W O R K W I T H R E A C T @khaled_garbaya. #GatsbyDaysLondon
15. 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
16. 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
17. https://k4d.dev H O W E V E R … @khaled_garbaya. #GatsbyDaysLondon
18. https://k4d.dev G A T S B Y O F F E R S M O R E @khaled_garbaya. #GatsbyDaysLondon
19. 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
20. https://k4d.dev S E O F R I E N D L Y A P P @khaled_garbaya. #GatsbyDaysLondon
21. https://k4d.dev A U T O M A T I C R O U T I N G @khaled_garbaya. #GatsbyDaysLondon
22. https://k4d.dev A C C E S S I B L E R O U T I N G @khaled_garbaya. #GatsbyDaysLondon
23. 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
24. 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
25. https://k4d.dev A F E W G O T C H A @khaled_garbaya. #GatsbyDaysLondon
26. https://k4d.dev T H E ` W I N D O W ` O B J E C T @khaled_garbaya. #GatsbyDaysLondon
27. 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
28. 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
29. 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
30. 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
31. 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