Gatsby as a replacement fro create-react-app

A presentation at Gatsby Days by Khaled Garbaya

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

Khaled Garbaya
@kgarbaya

1 / 30

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.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Gatsby