If you’re new to React, you could benefit from learning from the success—and failures—of React developers who’ve learned valuable lessons about the framework.
If you don’t need internal state or lifecycle methods on your component, use a functional component instead. A functional component is a pure JavaScript function that accept props
as its argument and returns a React element.
Benefits of functional components:
this
bindingSmall components are easier to:
Extracting components will make your app more organized, more modular, and more structurally sound. Keep Tip 1 in mind and extract blocks of code into functional components whenever possible.
this
The first way to handle this
is to not handle it at all and use a functional component instead (see why that’s Tip No. 1?).
But if you are using an ES6 class, you’ll need to bind this
manually since React doesn’t autobind the functions inside that component.
There are several methods for doing so.
Check out the video to see these methods in practice.
setState
, not an objectAccording to the React docs, React does not guarantee that state changes are applied immediately.
Therefore, reading this.state
right after calling setState()
is a potential pitfall because this.state
may not be what you think it is.
So instead of updating state with an object, update it with a function to avoid this potential pitfall.
prop-types
is a library for typechecking props and can help prevent bugs by ensuring you are using the right datatypes for your props. This is an external package that you can install through npm or otherwise. Simply import the package, then add propTypes to your component and typeset accordingly. If you want the prop to be required, just add .isRequired
.
With React Developer Tools, available as a Google Chrome and Firefox extension, as well as a standalone app for other environments, you can quickly view your component hierarchy, inspect and edit a component’s props and state, and invoke methods on a component within the DevTools.
Learn React Online
React, Redux, & Enzyme - Introducing Apps & Tests
Full-Stack Web Apps with Meteor and React
Create Web Apps with Meteor & React
React JS, Angular & Vue JS - Quickstart & Comparison
☞ JavaScript for React Developers | Mosh
☞ React Tutorial - Learn React - React Crash Course [2019]
☞ Learn React - Full Course for Beginners - React Tutorial 2019
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ Page Transitions In React - React Router V6 and Framer Motion Tutorial