Skip to content

JavaScript and JSX

Clean Code

Writing clean and readable code will in the end benefit also the end user by having better UX, because you as a developer can focus on what matters, the UI, and not spending unnecessary time on unclean code. Therefore we strongly recommend:

NB: Even they list moment as a date formatting tool, consider date-fns because it has a couple of advantages over moment.

Dates

Please prefer date-fns over moment to handle your date calculations and formatting, because date-fns:

  • functional approach
  • immutable structure
  • uses the browses native Date object as the basis
  • strong and consistent API
  • very modular
  • good and flexible locales support
  • supports three shaking

React

Handling of React State

Kent C. Dodds has a good article on when and where to put React State with this chart.

Please avoid having logic in your JSX syntax. Even it is possible to have a lot of logic in JSX because of the functional architecture, rather enforce using React Context to hide logic.

Readable JSX

Small components are readable regardless. But once a Component gets large, things changes. Therefore I (Tobias Høegh) thought a lot about how to make larger components readable. So here is my approach:

Think of laying out your markup like reading a book. Yes, reading a book. You have your;

  • intro
  • content
  • summary

So, what if you put your main markup on top? following by the content, and as a settlement to the content, we follow up with the logic? Then we get these three topics.

  • Main component
  • Sub components
  • Logic

The good thing about this is, we get quickly an overview what the component contains. Here is an example using a form as our basis:

// 1. Readable markup
const App = () => (
<FormLogic>
<FormOne />
<FormTwo />
...
</FormLogic>
)
// 2. One of the forms
const FormOne = () => {
// using the extendable Context
const { clickHandler } = React.useContext(FormContext)
return <Button on_click={clickHandler} />
}
// 3. And the logic, providing the Context
const FormLogic = (props) => {
// Here we have our logic
function clickHandler() {}
// Our context we use for state handling etc.
const formContext = {
clickHandler
}
return <FormContext.Provider value={formContext} {...props} />
}
const FormContext = React.createContext({})