Add quickstart example

Author: kostasx

docs/react-testing-library/example-intro.mdx

@@ -4,6 +4,65 @@ title: Example
 sidebar_label: Example
 ---
 
+## Quickstart
+
+This is a very simple setup to get you started. 
+If you want to see a description of what each line does, 
+scroll down to the [annotated version](#quickstart-annotated).
+Scroll down to [Full Example](#full-example) to see a more advanced test setup.
+
+```jsx
+import {render, fireEvent, waitFor, screen} from '@testing-library/react'
+import '@testing-library/jest-dom'
+import Fetch from '../fetch'
+
+test('loads and displays greeting', async () => {
+
+  // ARRANGE
+  render(<Fetch url="/greeting" />)
+  
+  // ACT
+  fireEvent.click(screen.getByText('Load Greeting'))
+  await waitFor(() => screen.getByRole('heading'))
+  
+  // ASSERT
+  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
+  expect(screen.getByRole('button')).toBeDisabled()
+
+})
+```
+
+<details id="quickstart-annotated">
+  <summary>Quickstart (Annotated Example)</summary>
+
+  ```jsx
+  // import react-testing methods
+  import {render, fireEvent, waitFor, screen} from '@testing-library/react'
+  // add custom jest matchers from jest-dom
+  import '@testing-library/jest-dom'
+  // the component to test
+  import Fetch from '../fetch'
+
+  test('loads and displays greeting', async () => {
+
+    // Render a React element into the DOM
+    render(<Fetch url="/greeting" />)
+    
+    fireEvent.click(screen.getByText('Load Greeting'))
+    // getByRole throws an error if it cannot find an element
+    await waitFor(() => screen.getByRole('heading'))
+    
+    // assert that the alert message is correct using
+    // toHaveTextContent, a custom matcher from jest-dom.
+    expect(screen.getByRole('heading')).toHaveTextContent('hello there')
+    expect(screen.getByRole('button')).toBeDisabled()
+
+  })
+  ```
+
+</details>
+
+
 ## Full Example
 
 See the following sections for a detailed breakdown of the test