This content originally appeared on DEV Community and was authored by Ezell Frazier
Landed a new role? New to a React project? Just want to see if there's anything new here?
Here are a few ways to hit the ground running with minimal cost to existing codebases. Free of any package installations.
Default Props
It is not uncommon to discover legacy or current React codebases with components containing no default values for the props it consumes. Which implies the value undefined is part of expected behavior, which is risky business.
// What should we see if the message prop isn't provided?
const Greeting = (props) => <h1>{props.message}</h1>;
Leveraging React's defaultProps component property
const Greeting = (props) => <h1>{props.message}</h1>;
Greeting.defaultProps = {
message: 'No message prop provided!'
}
Using Object Destructuring Assignment
const Greeting = ({ message = 'No message prop provided!' }) =>
<h1>{message}</h1>;
Adding TypeScript Types via JSDoc
It's safe to assume numerous React developers are using Visual Studio Code as their text editor. Why not enhance the development experience by leveraging VSCode's Intellisense?
Adding types via React Prop Types or TypeScript may face some resistance, but it doesn't mean we can't use types with comments.
/**
* @description defaults to "No message prop provided!"
* @param {{ message: string }} { message }
* @returns {JSX.Element} Greeting component
*/
const Greeting = ({ message = 'No message prop provided!' }) => (
<h1>{message}</h1>
)
Explanatory Comments
I admit, this is a piece of advice for myself as much as it is for anyone else. Also, this is a general good habit for any project.
Ideally, we want to write comments explaining why we're adding a component or a highly re-used module.
If we can't explain it in a line, try to include a reference to the ticket.
Received a hard-to-understand piece of code from the internet? Include a link to where it was found.
Your teammates and future-self will greatly appreciate this.
// Wanted a concise way to compose the props for a hairy view
// See ticket #4207 for details
export const pipe = (input, ...fns) =>
fns.reduce((output, fn) => fn(output), input);
Have any more tips? I'd love to know more!
This content originally appeared on DEV Community and was authored by Ezell Frazier
Ezell Frazier | Sciencx (2022-02-07T15:03:56+00:00) Low Cost Value-Adds for Any React Project. Retrieved from https://www.scien.cx/2022/02/07/low-cost-value-adds-for-any-react-project/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.