Stefany porras #29
Stefany porras #29
Conversation
| "lint-staged": { | ||
| "*.{js, jsx, css, json}": [ | ||
| "yarn run lint:fix", | ||
| "pretty-quick --staged", | ||
| "git add" | ||
| ] | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
| } |
There was a problem hiding this comment.
What were the problems with husky?, I might be able to help you with that.
| import styled from 'styled-components'; | ||
|
|
||
|
|
||
| const CardContainer = styled.div` |
There was a problem hiding this comment.
I suggest to put your styled components into its styled.js file, this way you'll have a more cleaner component. You could do something like:
// styled.js
export const CardContainer = styled.div`
...
`
// CardVideo.component.jsx
import { CardContainer } from './styled';| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
| import { faBars, faUser } from '@fortawesome/free-solid-svg-icons' |
There was a problem hiding this comment.
I recommend to import the fontawesome icons using the Icon Library approach, this way your bundle get smaller. This is what fontawesome suggests:
https://fontawesome.com/how-to-use/javascript-api/setup/importing-icons
Once imported, you can use FontAwesomeIcon with the prop icon='name' to actually use it.
| function Navbar() { | ||
|
|
||
| return ( | ||
| <> |
There was a problem hiding this comment.
Since Header is your root component here, you don't need to use fragments. Also check the comment about moving your styled components outside your main component.
| <> | ||
| <Navbar/> | ||
| <CardsContainer> | ||
| {listVideos.items.map((item)=>{return <CardVideo key={item.etag} item={{item}}/>})} |
There was a problem hiding this comment.
You could omit the return if you do:
{listVideos.items.map((item) => <CardVideo key={item.etag} item={{item}} />)}Also, I think you added extra {} to your item prop. That's why you are doing props.item.item in your CardVideo component.
| `; | ||
|
|
||
|
|
||
| function CardVideo(props){ |
There was a problem hiding this comment.
You can extract the props using destructuring, so it is cleaner in your component, like so:
function CardVideo({ item }) {Check the comment about the extra {} cause I think it wasn't intended.
There was a problem hiding this comment.
Now that you are using props, it could be useful to put in place a set of rules for those props, so that the component expects exactly what you meant. Check the documentation for these and let me know if you have any questions:
2 participants
Cambios correspondientes a "Mini-Challenge 1: Core Concepts and Styling"