(blog) Add challenge 4 of #100DaysOfGatbsy

docs/blog/100days/react-component/index.md

@@ -0,0 +1,38 @@
+---
+title: Challenge 4 - Add Third-Party React Components to Your Gatsby Site
+date: 2020-01-23
+author: "Hashim Warren"
+tags: ["learning-to-code", "contest", "100-Days-of-Gatsby"]
+---
+
+_Gatsby was named the [#1 new technology to learn in 2020](https://www.cnbc.com/2019/12/02/10-hottest-tech-skills-that-could-pay-off-most-in-2020-says-new-report.html)!_
+
+_To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to [build your first Gatsby Theme](/docs/themes/building-themes/)._
+
+_Learn more about [#100DaysOfGatsby here](/blog/100days)!_
+
+## Challenge 4: Add a Form to Your Site (Using a Third-Party React Library)
+
+The Gatsby framework is [based on React](/docs/glossary/react/). So, a Gatsby project is a React project. And the Gatsby ecosystem is a subset of the React ecosystem.
+
+This is exciting! There are hundreds of [Gatsby plugins and themes](/plugins/) you can use on your site, with more being added every day. But there are already thousands of free, well-tested React projects that you can use on your site too!
+
+For example, you can hide/show your site header with [React headroom](https://kyleamathews.github.io/react-headroom/), organize your CSS with [Theme UI](https://theme-ui.com/), or control your HTML head with [React Helmet](https://github.com/nfl/react-helmet).
+
+In this prompt, we invite you to add forms to your Gatsby site using [Formik, a popular and powerful React library](https://jaredpalmer.com/formik). We suggest adding the form to the “About” page you created in a previous challenge.
+
+(In a future challenge we will show you how to add your form, or any React component to your Markdown-powered blog pages.)
+
+### Challenge Resources
+
+Learn how to [import and use almost any React component](/docs/adding-react-components/) in your Gatsby project. However, instead of using the example in our documentation, install [Formik from npm](https://www.npmjs.com/package/formik).
+
+Next, follow [Formik’s step-by-step tutorial](https://jaredpalmer.com/formik/docs/tutorial) for creating a newsletter signup form.
+
+Lastly, familiarize yourself with the [acessibility guidelines regarding forms](/docs/building-a-contact-form/#creating-an-accessible-form), and ensure your form meets those standards.
+
+### What to Do If You Need Help
+
+If you get stuck during the challenge, you can ask for help from the [Gatsby community](/contributing/community/) and the [ASKGatsbyJS](https://twitter.com/AskGatsbyJS) Twitter account. You can find fellow Gatsby Developers on [Discord](https://discordapp.com/invite/gatsby), [Reddit](https://www.reddit.com/r/gatsbyjs/), [Spectrum](https://spectrum.chat/gatsby-js), and [Dev](https://dev.to/t/gatsby).
+
+For this challenge, you can also ask the [Formik community](https://jaredpalmer.com/formik/help) for help.