Responsive Github search app using Reactjs and styled components

Community feedback

• 

  Matt Seidel•570

  @mseidel819Posted over 2 years ago

  I like your solution for light/dark themes! I'm going to study up on how you implemented that.

  Something you can do to organize your components is to put all of your styled components in their own folder, and export them out. so, instead of one SearchApp.js, you would have SearchApp.component.js, and SearchApp.styles.js.

  Some of your .styles.js folder might then look like :

  export const Container = styled.div display: flex; flex-wrap: wrap; margin: 0 auto; export const Header = styled.header width: 100%; `

  export const Wrap = styled.div`
      display: flex;
      justify-content: space-between;
      width: 100%;
  `
  
  export const Title = styled.h1`
      color: ${Props => Props.theme.titleColor};
      font-size: xx-large;
      transition: all 0.5s ease;
      
  ``
  

  and then in your SearchApp.component.js, you would import it all:

  import {Container, Header, Wrap, Title} from "./SearchApp.styles";

  Marked as helpful

  0

  ---

  

  Keytron•270

  @Dev-TronPosted over 2 years ago

  @mseidel819 Thank you I will start implementing this.

  0