Top Ten Things Not To Do When Building Your First React.js App
#1
For beginners I would highly discourage writing all of your code in one folder directory. This enforces bad development practices and results in tougher debugging mishaps. Adopt a design principle called “separation of concerns” which will help you more efficiently track down bugs but also aide in visualizing your data funnels.
if all of the code for a particular behaviour of the application is separated out, then you will only have to change code directly associated with your new feature. Which should be less code to change.
#2
DO NOT I REPEAT DO NOT copy and paste code without fully understanding it. A the absolute minimum aim to possess the capacity to communicate and explain your code to someone who is unfamiliar with code. I believe you can anoint yourself with some measure of expertise if others around come to you for help. This would demonstrate that you have the ability to communicate complex problems and present reasonable solutions.
#3
If using Redux, do not forget to add your reducer to your root reducer function and adding it to the store. Otherwise you’ll experience my 2 hour misfortune wondering why my reducer wasn’t in my store
#4
Before programming, write down your plan on paper and try to anticipate the nature of your app and its requirements as much as possible. For instance, what kind of data structure will your frontend be fetching and sending to your backend for persistence, should I use functional or class components, should I use local state or throw all state into redux or better yet use hooks! And thats only the frontend, you might need another piece of paper to take down notes if you are responsible for the backend.
#5
Do not engage in absurdly long programming sessions. Take breaks, go for a walk, avoid the dark despair that is burnout. Burnout is 100% real and can dampen your production prowess for days, at best.
#6
Don’t even bother with bind. Stick to ES6 syntax and save yourself the headache of bind. Arrow functions protect the scope of your class instance, aka this, and preserves when working inside an arrow function. So bind is almost useless, I mean I don’t think I have ever used it.
#7
Don’t not install Redux dev tools. This will change your life and help sharpen your understand of component lifecycle. Keep a watchful eye on state updates and which actions are firing in the redux dev tools and you might just find that one action that is unnecessarily updated your store thus rendering your component again unwillingly.
#8
Do not avoid reading React’s documentation. Learning how to read documentation can take you very far in developing your app and usually tends to help one understand documentation from other sources such as third party extensions, libraries, etc.
#9
Do not be afraid to ask for help. Everyone starts from zero and natural to reach out for help if a problem seems insurmountable. Reach out to dev communities on Stack Overflow and/or reddit and talk to your fellow programmers. You’ll be surprised at how giving the developer community can be.
#10
Do not commit less, commit often! Get into the habit of updating your repo often with clear and concise git commits. I have learned the hard way from several computer crashes that committing often is best.
