-2

There is a very good Tutorial for Gatsby on their website. Everything works fine but I've a problem to understand the difference in the starter templates.

What is the difference between the different react component usage in the starte templates? Why do they use export default... for the hello world example, const IndesPage = () 0> ( for the default starter and class BlogIndes extends React.Componenent for the blog example.

gatsby-starter-hello-world

export default () => <div>Hello world!</div>

gatsby-starter-default

const IndexPage = () => (
  ...
)

export default IndexPage

gatsby-starter-blog

class BlogIndex extends React.Component {
  render() {
    ...

    return (
      ...
    )
  }
}

export default BlogIndex
user3473628
  • 113
  • 9
  • 1
    Possible duplicate of [Javascript (ES6), export const vs export default](https://stackoverflow.com/questions/33611812/javascript-es6-export-const-vs-export-default) – Daksh Miglani Mar 06 '19 at 14:14
  • 2
    These are all React components, the first two are functional components and the last is a class component. – Davin Tryon Mar 06 '19 at 14:15
  • 2
    Possible duplicate of [react, differences between component create with extend class and simple const = function](https://stackoverflow.com/questions/39591277/react-differences-between-component-create-with-extend-class-and-simple-const) and [React: when to use ES6 class based components vs. functional ES6 components?](https://stackoverflow.com/questions/36097965) and [React functional stateless component, PureComponent, Component; what are the differences and when should we use what?](https://stackoverflow.com/questions/40703675) – adiga Mar 06 '19 at 14:17

1 Answers1

1

gatsby-starter-hello-world and gatsby-starter-default are stateless component, a quote from the React documentation:

These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. They are pure functional transforms of their input, with zero boilerplate. However, you may still specify .propTypes and .defaultProps by setting them as properties on the function, just as you would set them on an ES6 class.

gatsby-starter-blog is a stateful component It has a state, lifecycle hooks, a class component should be used whenever you need to work with state...

Hope this helps

Alcides A
  • 21
  • 5
  • 2
    gatsby-starter-hello-world is a stateless component, too. – Estus Flask Mar 06 '19 at 14:47
  • What is the difference then between **gatsby-starter-hello-world** and **gatsby-starter-default**? When do I've to use the one over another? – user3473628 Mar 06 '19 at 14:50
  • And another question: I couldn't find that state in the **gatsby-starter-blog** (https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/src/pages/index.js) Perhaps that is the reason why I'm wondering about this. – user3473628 Mar 06 '19 at 14:52