{"componentChunkName":"component---src-templates-single-blogpost-js","path":"/blog/default-props-in-react-and-gatsby","result":{"data":{"contentfulBlogPost":{"title":"Default props in React and Gatsby","slug":"default-props-in-react-and-gatsby","id":"dd733cf4-96d4-5258-8465-8424a9245301","createdAt":"16. April 2020","category":[{"title":"Gatsby","slug":"gatsby","id":"8d653418-2491-59d6-a2ef-367d1a6d0a28","blog_post":[{"title":"Gatsby blog with Contentful","slug":"gatsby-blog-with-contentful","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/4Joi19CFYut4ELjuW2IWWh/15747b57ff62334f588f562983070117/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg?w=800&q=50"}},"id":"4913bd1f-e26f-5532-b413-537104c7b156","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Install dependencies In order to use Contentful as a CMS, the first step is to install the…"}}},{"title":"Protected Routes in Gatsby with @reach router","slug":"protected-routes-in-gatsby-with-reach-router","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/1u4g6T8nqZJVOpuBQzLPYD/fe986d21e63c2d4554a3f3d3686475d5/apple-laptop-notebook-office-39284.jpg?w=800&q=50"}},"id":"c78e7029-9bbc-5638-9bd0-24e10ccb3b0b","createdAt":"16. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":""}}},{"title":"Default props in React and Gatsby","slug":"default-props-in-react-and-gatsby","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5HHB28bEpN5I34ZZdu3T6r/ae699ca12a82905b64591a552b071664/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg?w=800&q=50"}},"id":"dd733cf4-96d4-5258-8465-8424a9245301","createdAt":"16. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"props.children\nprops.data\nprops.pageContext (props)\n({data})\n(children)"}}},{"title":"Pagination in Gatsby","slug":"pagination-in-gatsby","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/2l0S9S1tN4bZ6yNpESrHJp/4ee2c2d0852bdf66ec52fa211b2f8ecc/office-freelancer-computer-business-38547.jpeg_cs_srgb_dl_coffee-apple-iphone-smartphone-38547.jpg_fm_jpg?w=800&q=50"}},"id":"47c94369-be89-585d-957a-717b74b9bc27","createdAt":"16. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":""}}},{"title":"Design and Create a Website Using Adobe XD / JAMStack / CSS / React / Gatsby / Contentful / Netlify","slug":"design-and-create-a-website-using-adobe-xd-jamstack-css-react-gatsby-contentful-netlify","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/2K2zDzcVRSEKQJgKhcWRMm/08bcaae5aab53a1d68b3ddd02ea7eb96/fashion-art-coffee-macbook-pro-57690.jpg?w=800&q=50"}},"id":"9467e107-a0bb-55de-8264-508ab99e0a30","createdAt":"23. Februar 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"This web development course offers detailed step-by-step instructions on how to design and build a…"}}},{"title":"Gatsby .env variables","slug":"gatsby-env-variables","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/6qDqC1LGYCDammzZ04iofw/d9964648daeed720f472c470ea025ae8/macbook-laptop-smartphone-apple-7358.jpg?w=800&q=50"}},"id":"d7a55f61-1fcd-5775-a255-d35ec2bfd36c","createdAt":"13. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"create 2 files in root folder .env.development\n.env.production Gatsby automatically detects in which…"}}},{"title":"Gatsby with Material UI and styled-components","slug":"gatsby-with-material-ui-and-styled-components","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5HHB28bEpN5I34ZZdu3T6r/ae699ca12a82905b64591a552b071664/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg?w=800&q=50"}},"id":"1946258b-09cc-532f-a795-41d0f0ced3c1","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Install dependencies 2. Update gatsby-config.js"}}},{"title":"Edit the default Theme in Material UI","slug":"edit-the-default-theme-in-material-ui","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/3aWpunSqJ3zvCKn5Jw74bX/f9798361bc96ba1011ba2473b6520ca1/working-macbook-computer-keyboard-34577.jpg?w=800&q=50"}},"id":"c3f5d0b2-3680-5bdf-8c40-4e8955faffc8","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Create a Theme object 2. Pass Theme object to the ThemeProvider 3. Create Layout Component and…"}}}]},{"title":"React","slug":"react","id":"0bdfb3a0-b67b-5b9a-802a-7182aa70702b","blog_post":[{"title":"Default props in React and Gatsby","slug":"default-props-in-react-and-gatsby","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5HHB28bEpN5I34ZZdu3T6r/ae699ca12a82905b64591a552b071664/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg?w=800&q=50"}},"id":"dd733cf4-96d4-5258-8465-8424a9245301","createdAt":"16. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"props.children\nprops.data\nprops.pageContext (props)\n({data})\n(children)"}}},{"title":"React Redux State Management","slug":"react-redux-state-management","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5vpI7eNBrlMWq9mc0ucW19/cc541144d5c6b22fed96aa516cd691ad/photo-of-imac-near-macbook-1029757.jpg?w=800&q=50"}},"id":"afcac439-cfd8-5c86-8f05-5158d1217de8","createdAt":"07. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"import {createStore} from 'redux'\nimport {useSelector, useDispatch} from 'redux' Store…"}}},{"title":"React Context","slug":"react-context","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/6qDqC1LGYCDammzZ04iofw/d9964648daeed720f472c470ea025ae8/macbook-laptop-smartphone-apple-7358.jpg?w=800&q=50"}},"id":"1bdbcd35-c152-524d-bdb0-0edddf5737c9","createdAt":"13. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"createContext\nuseContext"}}},{"title":"Axios - Fetching data from remote API on the client-side with React ","slug":"axios-fetching-data-from-remote-api-on-the-client-side-with-react","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/7AufkdJD8sNK4UOWWVPvb4/e93e260295fbff5f94dba3a4ae1db98f/information-sign-on-shelf-251225.jpg?w=800&q=50"}},"id":"d64cdbd2-e4b9-5820-9065-ba3c305fdf56","createdAt":"13. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"npm i axios"}}},{"title":"React Hooks - useState, useEffect, useContext, useRef, useMemo, useReducer, useCallback","slug":"react-hooks-usestate-useeffect-usecontext-useref-usememo-usereducer","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/3aWpunSqJ3zvCKn5Jw74bX/f9798361bc96ba1011ba2473b6520ca1/working-macbook-computer-keyboard-34577.jpg?w=800&q=50"}},"id":"3017584a-53a4-5553-ae0c-e4bf8e353dd4","createdAt":"03. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"useContext Create a Context Provider via createContext function Consum a Context via useContext…"}}},{"title":"Toggle elements in React using React Hooks","slug":"toggle-elements-in-react-using-react-hooks","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/1u4g6T8nqZJVOpuBQzLPYD/fe986d21e63c2d4554a3f3d3686475d5/apple-laptop-notebook-office-39284.jpg?w=800&q=50"}},"id":"8d50b6eb-b3e8-5467-87cc-cf77321eb8ca","createdAt":"03. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":""}}},{"title":"Swift Programming Tutorial for Beginners (Full Tutorial)","slug":"swift-programming-tutorial-for-beginners-full-tutorial","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5vpI7eNBrlMWq9mc0ucW19/cc541144d5c6b22fed96aa516cd691ad/photo-of-imac-near-macbook-1029757.jpg?w=800&q=50"}},"id":"1bcb2ea5-62d7-5de8-a4cd-36e13e78d368","createdAt":"23. Februar 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"Learn how to code with Swift in one single tutorial! We'll go through all the core concepts of Swift…"}}},{"title":"IIFE","slug":"iife","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/7AufkdJD8sNK4UOWWVPvb4/e93e260295fbff5f94dba3a4ae1db98f/information-sign-on-shelf-251225.jpg?w=800&q=50"}},"id":"1f739d21-547b-5815-9549-ab94da356434","createdAt":"28. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":""}}},{"title":"Edit the default Theme in Material UI","slug":"edit-the-default-theme-in-material-ui","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/3aWpunSqJ3zvCKn5Jw74bX/f9798361bc96ba1011ba2473b6520ca1/working-macbook-computer-keyboard-34577.jpg?w=800&q=50"}},"id":"c3f5d0b2-3680-5bdf-8c40-4e8955faffc8","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Create a Theme object 2. Pass Theme object to the ThemeProvider 3. Create Layout Component and…"}}}]}],"content":{"childMarkdownRemark":{"html":"<p>props.children\nprops.data\nprops.pageContext</p>\n<p>(props)\n({data})\n(children)</p>","timeToRead":1}}},"allContentfulCategory":{"nodes":[{"title":"Google Tag Manager","slug":"google-tag-manager","id":"d0a285b4-b818-5612-8fdc-5f325aa48eb4"},{"title":"Axios","slug":"axios","id":"36071d22-d950-5e0e-8832-52a4f31016bf"},{"title":"Redux","slug":"redux","id":"89dcb61e-1b22-5795-9618-daa15e889512"},{"title":"Express","slug":"express","id":"eff898c7-be39-553c-a199-a8b67af03038"},{"title":"Node.js","slug":"node-js","id":"0c5ec24f-7db8-5e3c-bf01-d8dc8b8c4273"},{"title":"Git","slug":"git","id":"995d33c2-1a26-52b1-81b1-a7c5dfefbb4c"},{"title":"HTML","slug":"html","id":"368ff1b9-f81e-5748-8ea5-5c257ed913f9"},{"title":"GraphQL","slug":"graphql","id":"8101a2c8-2d15-5297-bfd1-d213d77b9ce8"},{"title":"Javascript","slug":"javascript","id":"c5c3bf5b-ef37-5b26-af84-dfb083fecabf"},{"title":"styled-components","slug":"styled-components","id":"f8aeb8c8-4780-5b97-a787-f278af851268"},{"title":"Material UI","slug":"material-ui","id":"9002ca9c-ae85-58b1-abd4-d467f490bec8"},{"title":"CSS","slug":"css","id":"334376eb-4c45-5412-8b19-80f1a16d19e5"},{"title":"Gatsby","slug":"gatsby","id":"8d653418-2491-59d6-a2ef-367d1a6d0a28"},{"title":"React","slug":"react","id":"0bdfb3a0-b67b-5b9a-802a-7182aa70702b"}]}},"pageContext":{"slug":"default-props-in-react-and-gatsby","title":"Default props in React and Gatsby"}}}