From 09c82adc9fedc24765113e2800428fb79f474379 Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Wed, 22 Jan 2020 17:23:39 -0500 Subject: [PATCH 1/5] Add challenge 4 --- docs/blog/100days/react-component/index.md | 37 ++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 docs/blog/100days/react-component/index.md diff --git a/docs/blog/100days/react-component/index.md b/docs/blog/100days/react-component/index.md new file mode 100644 index 0000000000000..59f031d0dfec1 --- /dev/null +++ b/docs/blog/100days/react-component/index.md @@ -0,0 +1,37 @@ +--- +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. + +### 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. From 904a4c4e55067f56e511fea786b83efa6e9f610c Mon Sep 17 00:00:00 2001 From: gatsbybot Date: Wed, 22 Jan 2020 22:28:39 +0000 Subject: [PATCH 2/5] chore: format --- docs/blog/100days/react-component/index.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/blog/100days/react-component/index.md b/docs/blog/100days/react-component/index.md index 59f031d0dfec1..b0661d2eca690 100644 --- a/docs/blog/100days/react-component/index.md +++ b/docs/blog/100days/react-component/index.md @@ -15,15 +15,14 @@ _Learn more about [#100DaysOfGatsby here](/blog/100days)!_ 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! +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). +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 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). From 5ac9ed19615af27219acf39af2c66ce5cf06f122 Mon Sep 17 00:00:00 2001 From: Aisha Blake Date: Thu, 23 Jan 2020 11:31:36 -0500 Subject: [PATCH 3/5] Fix capitalization --- docs/blog/100days/react-component/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/blog/100days/react-component/index.md b/docs/blog/100days/react-component/index.md index b0661d2eca690..1ad59b168b61c 100644 --- a/docs/blog/100days/react-component/index.md +++ b/docs/blog/100days/react-component/index.md @@ -17,7 +17,7 @@ The Gatsby framework is [based on React](/docs/glossary/react/). So, a Gatsby pr 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). +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. @@ -31,6 +31,6 @@ Next, follow [Formik’s step-by-step tutorial](https://jaredpalmer.com/formik/d ### 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). +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. From c1ea8d0ed8873232a54566603fc88ee1966db53c Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Thu, 23 Jan 2020 14:02:59 -0500 Subject: [PATCH 4/5] Update docs/blog/100days/react-component/index.md Co-Authored-By: Marcy Sutton --- docs/blog/100days/react-component/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blog/100days/react-component/index.md b/docs/blog/100days/react-component/index.md index 1ad59b168b61c..ee2270ef80c43 100644 --- a/docs/blog/100days/react-component/index.md +++ b/docs/blog/100days/react-component/index.md @@ -21,7 +21,7 @@ For example, you can hide/show your site header with [React headroom](https://ky 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.) +(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 From 6d0dc5049194f33cbd730985b7a98eb89fdc1c6e Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Thu, 23 Jan 2020 14:11:09 -0500 Subject: [PATCH 5/5] Add link to accessibility resource --- docs/blog/100days/react-component/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/blog/100days/react-component/index.md b/docs/blog/100days/react-component/index.md index ee2270ef80c43..ba6435bac025f 100644 --- a/docs/blog/100days/react-component/index.md +++ b/docs/blog/100days/react-component/index.md @@ -29,6 +29,8 @@ Learn how to [import and use almost any React component](/docs/adding-react-comp 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).