This is an MDX file Showing you What you Can Do Totally Awesome, right?

H1 text uses a single #

h2 uses two ##

h3 uses three ###

up to h6 where you use six ######

this is a value statement. How does it look?

note: use a \ to use a command like # that you want to see, but not render

italics uses * at the beginning and the end of what you are italicizing

italics also uses an _ underscore

strong gives you bolded text. Use ** double asterik strong also gives you bolded text using double underscore __

~~ strikethrough uses the double tilde (on top of the back tick) ~~

create a horizontal line to seperate sections with a triple ___ underscore or triple --- dash

This is a quote. Use it by starting out with a >

This is the text inside the blockquote. Use >> double if the blockquote doesn't work -- that's fine. Create a styled react component that takes two props. One prop is the quote, the next is the person who said it. call the component, add the props.

[text](https://link) this is the anatomy of a markdown link. [] in brackets go the text. () parenthesis for the link. inside the parenthesis, after the link use "" quotes for the title text

example: [GatsbyJS Home Page](https://www.gatsbyjs.com/ "the gatsbyjs home page")

GatsbyJS Home Page

blockquote

unordered lists

• item 1
• item 2
• item 3

that's all. just put one * in front of every list item.

* item 1 * item 2

if you want to nest lists inside lists, put the * indented

* item 1 \ [tab indent] * nested item

• item 1
  • nested item

ordered list: replace the * with 1.

\1. item 1 \1. item 2 \1. item 3

1. item 1
2. item 2
3. item 3

code blocks ```js use three back ticks FOLLOWED BY the language you want to show. You can use "js" for JavaScript. For instructions on what to install "npx install ..." - don't use a language indicator

images are the same as links, just with an ! in front. The alt text goes at the end of the () with the image link. You should be able to call images from graphql queries inside of MDX.

!A Gatsby Logo

task lists -- checklists

• task 1
• task 2
• task 3 returns checks and boxes -- pretty cool

* [x] task 1 * [x] task 2 * [ ] task 3

In MDX, you can import components:

then, you can call them

In MDX, you can import components:

You can also use any type of html in html code

Here is another component you made. It's important to realize that you can create React components with props, then render them in a page going to gatsby. This is one of the ways you can use react in a gatsby app.

You should also be able to call graphql query results. Next class.

{props.pageContext.frontmatter.title}