menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
Team

Gatsby.js and Html themes

September 7, 2018 at 5:56am

Gatsby.js and Html themes

September 7, 2018 at 5:56am (Edited 1 year ago)

Hello guys,

I was wondering if Gatsby.js was a good solution to implement HTML themes (from themeforest for example) ?

It looks very interesting but I'm quite struggling with the js part of the theme.

In a general way, in the theme you can find all the libraries and the jquery's plugins (in most case) it requires. As the theme provides js files, there is not always a related npm package. I'm trying to require them in a `ComponentDidMount` but I'm facing many issues, because they don't have the reference of jquery and most of the time the plugins are in their minified version which is not the most easiest way to debug.

I'm probably doing it wrong, but after some time spend in the documentation of Gatsby I do not really find an answer. Could you give me some advices ?


September 7, 2018 at 12:01pm

I believe the gatsby-starter-ceevee was created from an HTML template. Im dont recall if it uses jquery.

  • reply
  • like

Some of the other starters were created from HTML files too. Looking at those may help. In some cases they have multiple repeating lines of HTML instead of calling a component and passing in props. That isnt really “the React way” of doing things, but people visiting your page will never know 😉.

  • reply
  • like

Im new to Gatsby and React too. To take advantage of Gatsby’s power you need to do things the Gatsby way. Running images through Gatsby to take advantage of all the optimisation it does would be a good example.

  • reply
  • like

Great question @zed, I'm interested to achieve a similar outcome.

I have found a few starters at https://next.gatsbyjs.org/docs/gatsby-starters/ which have reproduced a few themes from html5up.net. Very nice stuff -- and a good model for you, perhaps, as you adapt your own new theme.

  • reply
  • like

September 11, 2018 at 4:55am

Hello @tori-occhio and @dns, thanks for your answers.

Converting a simple html / css theme was not a big issue for me. In fact, my main concern was more javascript related, how to correctly implement the javascript plugin part.

I finally ended up with something, but I'm not sure it's the best way.I did, on

  • reply
  • like

`ComponentDidMount`, set the jquery document ready method, and in it I added the javascript plugin method, like carroussels, loader, ect.

  • reply
  • like

September 11, 2018 at 1:00pm

I would drop jQuery completely and redo the parts with corresponding React components

like-fill
2
  • reply
  • like