learn-co-curriculum / react-hooks-jsx-lab Goto Github PK

View Code? Open in Web Editor NEW

5.0 5.0 5.5K 649 KB

License: Other

HTML 26.98% JavaScript 61.63% CSS 11.39%

react-hooks-jsx-lab's Introduction

JSX Lab

Learning Goals

Use JSX syntax to create DOM elements

Instructions

In this lab, we will be rendering a few children components in our top-most component: App. The components are set up, but we need to update the JSX they return. We'll be writing all our code in the NavBar.js, Home.js, and About.js files. These files are all located in the src/components directory.

Begin with npm install. Examine what is rendering in the browser with npm start.

Our goal will be to make our page look like this:

Once your app matches the demo image, run npm test to check your work.

Deliverables

NavBar

The <NavBar> component should return the following JSX elements:

a <nav> element
inside the nav element, there should be two child elements:
- an <a> element, with the href attribute set to #home, and the content text set to "Home"
- an <a> element, with the href attribute set to #about, and the content text set to "About"

Home

Inside the <Home> component, there are a couple of variables defined that will allow you to insert your name and city into the portfolio page.

The <Home> component should return the following JSX elements:

a <div> element with an id of "home"
inside the div element, there should be one child element:
- an <h1> element, with the style attribute set to a color of "firebrick", and the content of "Your Name is a Web Developer from Your City"
- use JSX expression syntax to use the imported name and city variables inside your JSX elements

Hint: consult the React documentation the style property to see how to set the color correctly.

About

The <About> component should return the following JSX elements:

a <div> element with an id of "about"
inside the div element, there should be three child elements:
- an <h2> element with the content of "About Me"
- a <p> element with any content of your choosing
- an <img> element with the src attribute set to the imported image variable, and the alt attribute set to "I made this"

Resources

react-hooks-jsx-lab's People

Contributors

Stargazers

Watchers

Forkers

gooseisdead antrubbo brynknowles jcpleitez95 connormul j-armah jcastro506 jasonajordan nohaderf adnapp anberjam k-will22 saracemal thecodeplanner leemichalee gerardmi24 beka23 escohen115 kbotero201 cswilik arelton amodttech ashill99 bstizzle alfredwang0707 dddelavega14 tgarayua kelseamc dashdavid13 serkansahin55 jonathanx111 matthewogtong jyliu17 jmarthaller svthiery clairedeboer westsideori bmoclay jkang91 danielyankiver markghaida maifam cmur11 jpersons24 jkofler93 jasonnnz nanalau315 luistjr efeng732 alexandra-spencer julioaht gabechaz noraloch woodelin-florveus mahzmahzmahz kody-samaroo dsasse07 laurengifford josh-frank mcardona9015 boltvanderhuge menachemmargolis jtray86 shmuly11 elandi13 nrepasy lohengrin22 evaldman melissen-up samhall330 fangbalm maxbeneke maquino96 amuesing zacharydagnall jahaira-marrero gabriel-demes jaskomal1 daynedewar mzthomas961 samferebee jaimedavid01 pjhg14 dkfresh89 jsplatt yehudisr iaconom821 esellers25 beendra lindahendricks yushi1007 dannycosto bleakchandler jbrundagejr chrisread22 theomelette zachkaigler tammycwong willzembricki mcorrieri

react-hooks-jsx-lab's Issues

Instructions may lead to code not passing.

The readme says:

About

The <About> component should return the following JSX elements:

a <div> element with an id of "about"
inside the div element, there should be three child elements:
- an <h2> element with the content of "About Me"
  - a <p> element with any content of your choosing
- an <img> element with the src attribute set to the image variable, and
  the alt attribute set to "I made this"

Specifically this part:

a <p> element with any content of your choosing

I wrote:

Cool stuff about me!

That caused the error listed below. I could only fix that by removing the "about me" text from my

tag. So the text that passed was:

Cool stuff!

PASS src/tests/NavBar.test.js
FAIL src/tests/About.test.js
● renders a

with the text 'About Me'

TestingLibraryElementError: Found multiple elements with the text: /about me/i

Here are the matching elements:

<h2>
  About Me
</h2>

<p>
  Cool stuff about me!
</p>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

<body>
  <div>
    <div
      id="about"
    >
      <h2>
        About Me
      </h2>
      <p>
        Cool stuff about me!
      </p>
      <img
        alt="I made this"
        src="https://i.imgur.com/mV8PQxj.gif"
      />
    </div>
  </div>
</body>

  16 | test("renders a <h2> with the text 'About Me'", () => {
  17 |   render(<About />);
> 18 |   const h2 = screen.queryByText(/about me/i);
     |                     ^
  19 |   expect(h2).toBeInTheDocument();
  20 |   expect(h2.tagName).toEqual("H2");
  21 | });

  at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
  at getElementError (node_modules/@testing-library/dom/dist/query-helpers.js:25:35)
  at getMultipleElementsFoundError (node_modules/@testing-library/dom/dist/query-helpers.js:29:10)
  at node_modules/@testing-library/dom/dist/query-helpers.js:66:13
  at queryByText (node_modules/@testing-library/dom/dist/query-helpers.js:106:19)
  at Object.<anonymous> (src/__tests__/About.test.js:18:21)

RUNS src/tests/Home.test.js

RUNS src/tests/Home.test.js PASS src/tests/Home.test.js
RUNS src/tests/Home.test.js
Test Suites: 1 failed, 2 passed, 3 total
Tests: 1 failed, 10 passed, 11 total
Snapshots: 0 total
Time: 5.216 s
Ran all test suites.

Watch Usage: Press w to show more.

JSX Lab

Canvas Link

https://learning.flatironschool.com/courses/4986/assignments/165704?module_item_id=357553

Concern

These are confusingly written instructions (questionable grammar..):

_"The component should return the following JSX elements:

element
inside the nav element, there should be two child elements:
an element, with the href attribute set to #home, and the content of "Home"
an element, with the href attribute set to #about, and the content of "About""_

"The content of Home/About" suggests those are items with content (e.g., components), and not just literal strings.

Additional Context

No response

Suggested Changes

No response

learn-co-curriculum / react-hooks-jsx-lab Goto Github PK

react-hooks-jsx-lab's Introduction

JSX Lab

Learning Goals

Instructions

Deliverables

NavBar

Home

About

Resources

react-hooks-jsx-lab's People

Contributors

Stargazers

Watchers

Forkers

react-hooks-jsx-lab's Issues

About

Canvas Link

Concern

Additional Context

Suggested Changes

Recommend Projects

Recommend Topics

Recommend Org