Q:

What is the difference between props and children in Gatsby?

I am confused, both children and props seemed like they are used the same. What is the difference between them?

A:

Props and children are not the same thing. They accomplish different things. Here is an example:
const Layout = ({ children, newsletter}) => (
  <div>
    <Header />
      {children}
    <Footer newsletter={newsletter} />
  </div>
);

By defining children you can wrap JSX elements in a component. This is useful if you want to define your own custom components that may have child components. 
You can now use the layout component for wrapping other components in a index page. This way you have a reusable layout that defines a header and footer for each page component.
const index = () => (
  <Layout newsletter>
    <h1>My child components</h1> {/* Define your child components here */}
  </Layout>
);

props on the other hand let's you pass data, information or settings to a subcomponent. In this example, only if you supply the newsletter props in your index page will it be rendered in the footer component. 

