Loop Studios Landing Page using React and Styled Components

Community feedback

• 

  P

  Axseinga•430

  @axseingaPosted almost 3 years ago

  Hi William! Congrats on finishing this challenge and learning React!

  My hints for this and your future projects:

  • you can definitely make not only styled-components but separate components from e.g. <Links/>, this way you can write functions inside components.
  • try to be more descriptive in naming your components e.g. your <Links/> can become <Navigation/>,
  • thanks to React we don't have to repeat our code and can use loops and jsx to create repeatable components e.g. your Links component could look like this

    const linksFields = [{label: "About", href: "#"}, {label: "Careers", href: "#"} ... etc];
    return (
    <ul>
    {linksFields.map((link) => ( 
        <li> <a href={link.href}>{link.label}</a> </li> ))}
    </ul> )
  } 
  

  read about map function

  • decide if you want to use arrow functions or function declarations and be consistent.
  • you can use export declaration in one like as export const MyComponent :) when you use arrow functions.

  That's all from me, I hope it will help to improve your coding in React :) Happy coding!

  Marked as helpful

  1

  ---

  

  William Firmino•300

  @WillwfPosted almost 3 years ago

  @axseinga Thank you very much for this comment. I'm still learning so all these tips are so much welcomed. I had the feel that I was repeating too much my code, also in the creations container. I will use all that you have mentioned and start searching better ways to code. There are still a lot of things that I don't understand.

  0

  

  P

  Axseinga•430

  @axseingaPosted almost 3 years ago

  @Willwf don't beat yourself over this, React is not easy to understand. To be honest, the more I learn it, the more I am confused by it. But it is a very powerful tool. Check out this guy. I think he is great in explaining React :)

  Marked as helpful

  1
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted almost 3 years ago

  So use object fit cover on the image Or overflow hidden on the image container

  And also you wanna learn how the images will change learn about the <picture> tag and the srcset attribute its gonna help

  Besides good job keep coding👍

  Marked as helpful

  1

  ---

  

  William Firmino•300

  @WillwfPosted almost 3 years ago

  @Kamasah-Dickson Thanks for the tip about the picture tag. I intend to learn about it and implement it, but can elaborate more on why should I use object fit cover or overflow hidden? Cause I've tried using but I didn't see any apparent change.

  0
• 

  Li-Hammed Jafar•90

  @JafarscriptPosted almost 3 years ago

  Give the creation image a background-size: cover; property in your CSS style.

  0

  ---

  

  William Firmino•300

  @WillwfPosted almost 3 years ago

  @Jafarscript Could you explain what will change? I've tried to use, but I didn't realize what changed.

  0

  

  Li-Hammed Jafar•90

  @JafarscriptPosted almost 3 years ago

  @Willwf You can't see the changes because you have given the image width and height. But you can just remove the CreationImg tag, then set the images as background image for the Creation tag. You can now try the background-size property.

  0

  

  Li-Hammed Jafar•90

  @JafarscriptPosted almost 3 years ago

  @Willwf You can't see the changes because you have given the image width and height. But you can just remove the CreationImg tag, then set the images as background image for the Creation tag. You can now try the background-size property.

  0

  

  Li-Hammed Jafar•90

  @JafarscriptPosted almost 3 years ago

  @Willwf You can't see the changes because you have given the image width and height. But you can just remove the CreationImg tag, then set the images as background image for the Creation tag. You can now try the background-size property.

  0