);
8 |
9 | const about = container.querySelector("#about");
10 | expect(about).toBeInTheDocument();
11 | });
12 |
13 | test("the
has three child elements", () => {
14 | const { container } = render(
);
15 |
16 | const about = container.querySelector("#about");
17 | expect(about.children).toHaveLength(3);
18 | });
19 |
20 | test("renders a
with the text 'About Me'", () => {
21 | render();
22 |
23 | // find an element with the text content "About Me"
24 | const h2 = screen.queryByText("About Me");
25 |
26 | // check that it's a element
27 | expect(h2.tagName).toBe("H2");
28 | });
29 |
30 | test("renders a
element", () => {
31 | const { container } = render();
32 |
33 | const p = container.querySelector("p");
34 | expect(p).toBeInTheDocument();
35 | });
36 |
37 | test("renders a ![]()
element with the correct attributes", () => {
38 | render();
39 |
40 | // Find an element with the "alt" attribute set to "I made this"
41 | const img = screen.queryByAltText("I made this");
42 |
43 | expect(img).toBeInTheDocument();
44 | expect(img).toHaveAttribute("src", image);
45 | });
46 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Learn.co Curriculum
2 |
3 | We're really excited that you're about to contribute to the [open
4 | curriculum](https://learn.co/content-license) on [Learn.co](https://learn.co).
5 | If this is your first time contributing, please continue reading to learn how to
6 | make the most meaningful and useful impact possible.
7 |
8 | ## Raising an Issue to Encourage a Contribution
9 |
10 | If you notice a problem with the curriculum that you believe needs improvement
11 | but you're unable to make the change yourself, you should raise a Github issue
12 | containing a clear description of the problem. Include relevant snippets of the
13 | content and/or screenshots if applicable. Curriculum owners regularly review
14 | issue lists and your issue will be prioritized and addressed as appropriate.
15 |
16 | ## Submitting a Pull Request to Suggest an Improvement
17 |
18 | If you see an opportunity for improvement and can make the change yourself go
19 | ahead and use a typical git workflow to make it happen:
20 |
21 | - Fork this curriculum repository
22 | - Make the change on your fork, with descriptive commits in the standard format
23 | - Open a Pull Request against this repo
24 |
25 | A curriculum owner will review your change and approve or comment on it in due
26 | course.
27 |
28 | # Why Contribute?
29 |
30 | Curriculum on Learn is publicly and freely available under Learn's
31 | [Educational Content License](https://learn.co/content-license). By embracing an
32 | open-source contribution model, our goal is for the curriculum on Learn to
33 | become, in time, the best educational content the world has ever seen.
34 |
35 | We need help from the community of Learners to maintain and improve the
36 | educational content. Everything from fixing typos, to correcting out-dated
37 | information, to improving exposition, to adding better examples, to fixing
38 | tests—all contributions to making the curriculum more effective are welcome.
39 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
19 |
23 |
24 |
33 |
React App
34 |
35 |
36 |
37 |
38 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JSX Lab
2 |
3 | ## Learning Goals
4 |
5 | - Use JSX syntax to create DOM elements
6 |
7 | ## Instructions
8 |
9 | In this lab, we will be rendering a few children components in our top-most
10 | component: `App`. The components are set up, but we need to update the JSX they
11 | return. We'll be writing all our code in the `NavBar.js`, `Home.js`, and
12 | `About.js` files. These files are all located in the `src/components` directory.
13 |
14 | Begin with `npm install`. Examine what is rendering in the browser with
15 | `npm start`.
16 |
17 | Our goal will be to make our page look like this:
18 |
19 |
20 | Once your app matches the demo image, run `npm test` to check your work.
21 |
22 | ## Deliverables
23 |
24 | ### NavBar
25 |
26 | The `
` component should return the following JSX elements:
27 |
28 | - a `