Tip calculator app using React, CSS flexbox

Community feedback

• 

  Gillian Akpeki•445

  @akpekigPosted over 1 year ago

  Difficulties:

  • Fastest, quickest, no-installation method: import your SVG as a component directly. Create React App lets you do this.

  import { ReactComponent as DollarSign } from 'dollar-sign.svg'
  

  Longer method is configuring CRA to undo a lot of its beginner limitations. At that point, you might as well just not use CRA, but also it will allow you to write code specifically telling your application how to handle SVGs, whether you want them automatically imported, treated like images, etc.

  • Personally, I would use a row flexbox/inline/inline flexbox display and instead of wrapping the dollar sign, put the "Tip Amount / person" in one element and have that wrap on itself either with a width limit or line break. Less code and definitely easier to deal with.

  • (Addressing this in second section)

  Best practices:

  I don't think there's any one way to program, but React is quite opinionated. I'd recommend reading this: https://legacy.reactjs.org/docs/design-principles.html . Composition + common abstraction means that when using React, you should undertake a secondary task that's not just writing code and segregating it by relevance, but also segregating it by repetition. Buttons that all have a className and clickHandler? That's one component. Containers taking similar props? That's another. Think of each component less like a specific thing (CircleWithLionInIt, CircleWithHorse, RedSquareWithFruit) that used once or twice with little modification and more like a generic thing (Circle, Shape) that gets used repeatedly with lots of modification (Circle animal=horse, Circle animal=Lion, Shape type=red).

  • In terms of folder organisation, best practice is usually segregation by feature. So in the case of a button, Button.js and Button.module.css would go in the same folder, Button. Button, Input, Container, these would all go in another folder, components. In the end, you'll have something like this: src -> components -> Button, Input, Container.

  Marked as helpful

  0