Some tips for working with React

  • .map is your friend. .forEach is not; it always returns ‘undefined’, and there’s nothing you can do about it. If you’re sending information to a React component, do not use .forEach, your components won’t render and you won’t have any relevant error messages because your code is doing *exactly what it’s supposed to*.
  • .map, however, does not like mapping an entire data object, so you have to deconstruct your data as you send it to your component, otherwise you get a lot of useless error messaging about React children components (thanks, React).
  • Using states and React-Bootstrap in combination leads to a lot of screaming at your computer when components don’t get the state before they’re attempting to use data. Think long and hard about where your data is coming from, when and where it’s being set, and how you can get around managing data that a page needs to load. (More specifics on this in another post, later, when I stop screaming and get all of my pages to reliably load).
  • Ternary statements are a great thing for DRYing out your code, especially for component renders and working with “is this user logged in or not, dammit”.
  • Reusable components are excellent, sure. What’s not excellent is reusing them in five separate and unrelated modals, and making sure, each time, that the appropriate data is passed down to the component. Don’t do what I did and wing it; keep careful track of components, what they need, and where they’re rendered.
  • Save yourself grief and just build single-page apps. Routing is a pain. States with routing are a pain (though I’m not using Redux, because I haven’t had time to learn, which I do suspect might have been helpful). SPA-s are better practice for mobile applications anyway, and we all know everyone lives on their phones nowadays.
  • Most of your mistakes are going to be *stupid*. You’re going to forget to invoke a function. You’re going to forget a comma. You’re going to capitalize something that’s meant to be lowercase. Pay attention to the details. If something’s not working, it’s likely because of something small and stupid. Review your data. Trace it through your components. Note the earlier point about reusable components in multiple unrelated places. Scream a bit. Fix it. Lather, rinse, repeat.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store