5 Tips for React.js ⚛️ Newbies
I make dumb mistakes so you don’t have to, but you will anyways! ¯\_(ツ)_/¯
Before even getting started with learning React, it’s recommended that you have a good understanding of vanilla javascript and the concepts of OOJS. React is an intuitive javascript framework created by Facebook, used mostly for the frontend to create dynamic web pages. React makes up the “V” in MVC aka “Views”. Here are some errors I frequently came across when starting my React journey.
1. Make your keys unique: key={}
You will most definitely be asked to render an array of objects in a class component. Make sure wherever you are mapping that array, to include *unique* keys.
In the map method above, the stock array of stock objects are being mapped over to create <Stock /> components with stock being passed as props, and key being passed as a prop as well as the stock.id. If you didn’t pass unique keys, you will run into an error like
2. Use Arrow functions () => {}
Arrow functions allow you to keep the state of this properly bound. Arrow functions are bound to where they’re created. Otherwise, if you console.log(this) , it will return undefined.
3. Make sure you’re passing down props correctly
When it comes to mapping out arrays, you need to make sure you’re passing down the correct prop array or else your console will tell you it’s undefined. Also, when using functional components vs. classes, be sure to pass props as an argument like so in line 3. Because you’re already passing down props in the argument, there’s no need to call this on props, i.e. this.props.pizza
4. When Fetching, use the Lifecycle Method: componentDidMount() and this.setState()
There will be a time where you might want to grab data from an API or local server. Your fetch function should live inside the componentDidMount() function. The last .then chain promise is an appropriate place to take the response and wrap it with the setState() function. Your state should be related to the response object of your fetch. Therefore, it is recommended to make your initial state and empty array. i.e state ={pizzas: []}
5. Take breaks! React is hard.
The React documentation is quite helpful but it’s better to learn by getting your reps in. You will come across tons of debugs and they will definitely frustrate you. It’s helpful to draw data trees to see which components are parents, children and/or grandparents. Best of luck!
