https://github.com/mosnad-web01/abdulaziz--react-hooks-components-basics-lab

https://github.com/mosnad-web01/abdulaziz--react-hooks-components-basics-lab

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/mosnad-web01/abdulaziz--react-hooks-components-basics-lab
• Owner: Mosnad-Web01
• License: other
• Created: 2024-09-03T03:12:28.000Z (5 months ago)
• Default Branch: master
• Last Pushed: 2024-09-03T03:18:38.000Z (5 months ago)
• Last Synced: 2024-11-14T16:47:57.416Z (2 months ago)
• Language: HTML
• Size: 179 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# React Components Basics Lab

## Learning Goals

- Write basic React components

- Return one React component from another component

## Instructions

In the labs throughout this section, we'll be working on building a small

portfolio site in React.

Our goal for the first lesson is to get the basic components for our app — the

``, ``, and `` components — to be returned from the ``

component.

Once we're done, we should get something like this:

![app demo](https://curriculum-content.s3.amazonaws.com/react/demo.png)

For this lab, we will be rendering a few children components in our top-most

component: `App`. All of our work will be done in `src/components/App.js`. The

rest of the files shouldn't need any changes.

To set up the app and run it in the browser, run:

```console

$ npm install

$ npm start

```

To start, work on getting the app to match the screenshot above. Then, open up a

second terminal (open to the same directory), and run`npm test` to check your

work.

## Deliverables

- Two components, `` and ``, are already defined in the `App.js`

  file. Add both of these components as _child_ components of `` by

  including them in the return statement for the `App` function.

- Create a third component, ``. The `` component should also be a

  _child_ component of ``.

  - The `` component should return a `
` with an id of `about`. To

    match the screenshot, the div should contain an `
` element with the text

    "About." However, as long as it has an id of `about`, it will pass the test!


**Hint**: If you're stuck, try using the `screen.debug` method in the test file

to see what DOM elements are being returned by your `` component. If you

still need help, this lab (and others) have a [solution branch][] on GitHub

where you can see one possible solution to this lesson.

## Resources

- [React Components](https://reactjs.org/docs/components-and-props.html)

[solution branch]:

  https://github.com/learn-co-curriculum/react-hooks-running-tests/tree/solution