Skip to content

Instantly share code, notes, and snippets.

@dianaberna

dianaberna/00-react-best-practice.jsx

Last active February 5, 2022 14:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dianaberna/8105879fc328430c1e1feff199f767a5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dianaberna/8105879fc328430c1e1feff199f767a5 to your computer and use it in GitHub Desktop.
Download ZIP
20 Best Practices for a Clean React Project
Raw
00-react-best-practice.jsx
// 20 Best Practices for a Clean React Project -> Enter on Gits 😎
Raw
01-shorthand.jsx
// Use JSX ShortHand
// Try to use JSX shorthand for passing boolean variables. Let’s say you want to control the title visibility of a Navbar component.
// Bad
return (
<Navbar showTitle={true} />
);
// Good
return(
<Navbar showTitle />
)
Raw
02-ternary-operators.jsx
// Use Ternary Operators
// Let’s say you want to show a particular user’s details based on role.
// Bad
const { role } = user;
if(role === ADMIN) {
return <AdminUser />
}else{
return <NormalUser />
}
// Good
const { role } = user;
return role === ADMIN ? <AdminUser /> : <NormalUser />
Raw
03-object-literals.jsx
// Take Advantage of Object Literals
// Object literals can help make our code more readable. Let’s say you want to show three types of users based on their role. You can’t use ternary because the number of options is greater than two.
// Bad
const {role} = user
switch(role){
case ADMIN:
return <AdminUser />
case EMPLOYEE:
return <EmployeeUser />
case USER:
return <NormalUser />
}
// Good
const {role} = user
const components = {
ADMIN: AdminUser,
EMPLOYEE: EmployeeUser,
USER: NormalUser
};
const Component = components[role];
return <Componenent />;
Raw
04-fragments.jsx
// Use Fragments
// Always use Fragment over Div. It keeps the code clean and is also beneficial for performance because one less node is created in the virtual DOM.
// Bad
return (
<div>
<Component1 />
<Component2 />
<Component3 />
</div>
)
//Good
return (
<>
<Component1 />
<Component2 />
<Component3 />
</>
)
Raw
05-function-inside-render.jsx
// Don't Define a Function Inside Render
// Don’t define a function inside render. Try to keep the logic inside render to an absolute minimum.
// Bad
return (
<button onClick={() => dispatch(ACTION_TO_SEND_DATA)}> // NOTICE HERE
This is a bad example
</button>
)
// Good
const submitData = () => dispatch(ACTION_TO_SEND_DATA)
return (
<button onClick={submitData}>
This is a good example
</button>
)
Raw
06-use-memo.jsx
// Use Memo
// React.PureComponent and Memo can significantly improve the performance of your application. They help us to avoid unnecessary rendering.
// Bad
import React, { useState } from "react";
export const TestMemo = () => {
const [userName, setUserName] = useState("faisal");
const [count, setCount] = useState(0);
const increment = () => setCount((count) => count + 1);
return (
<>
<ChildrenComponent userName={userName} />
<button onClick={increment}> Increment </button>
</>
);
};
const ChildrenComponent =({ userName }) => {
console.log("rendered", userName);
return <div> {userName} </div>;
};
// Good
import React ,{useState} from "react";
const ChildrenComponent = React.memo(({userName}) => {
console.log('rendered')
return <div> {userName}</div>
})
Raw
07-css-in-js.jsx
// Put CSS in JavaScript
// Try to avoid raw JavaScript when you are writing React applications because organizing CSS is far harder than organizing JS.
// Bad
// CSS FILE
.body {
height: 10px;
}
//JSX
return <div className='body'>
</div>
// Good
const bodyStyle = {
height: "10px"
}
return <div style={bodyStyle}>
</div>
Raw
08-object-destructuring.jsx
// Use Object Destructuring
// Use object destructuring to your advantage. Let’s say you need to show a user’s details.
// Bad
return (
<>
<div> {user.name} </div>
<div> {user.age} </div>
<div> {user.profession} </div>
</>
)
// Good
onst { name, age, profession } = user;
return (
<>
<div> {name} </div>
<div> {age} </div>
<div> {profession} </div>
</>
)
Raw
09-string-props.jsx
// String Props Don’t Need Curly Braces
// When passing string props to a children component.
// Bad
return(
<Navbar title={"My Special App"} />
)
// Good
return(
<Navbar title="My Special App" />
)
Raw
10-remove-js-from-jsx.jsx
// Remove JS Code From JSX
// Move any JS code out of JSX if that doesn’t serve any purpose of rendering or UI functionality.
// Bad
return (
<ul>
{posts.map((post) => (
<li onClick={event => {
console.log(event.target, 'clicked!'); // <- THIS IS BAD
}} key={post.id}>{post.title}
</li>
))}
</ul>
);
// Good
const onClickHandler = (event) => {
console.log(event.target, 'clicked!');
}
return (
<ul>
{posts.map((post) => (
<li onClick={onClickHandler} key={post.id}> {post.title} </li>
))}
</ul>
);
Raw
11-template-literal.jsx
// Use Template Literals
// Use template literals to build large strings. Avoid using string concatenation. It’s nice and clean.
// Bad
const userDetails = user.name + "'s profession is" + user.proffession
return (
<div> {userDetails} </div>
)
// Good
const userDetails = `${user.name}'s profession is ${user.proffession}`
return (
<div> {userDetails} </div>
)
Raw
12-import-in-order.jsx
// Import in Order
// The rule of thumb is to keep the import order like this:
// - Built-in
// - External
// - Internal
// Bad
import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';
// Good
import React from 'react';
import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';
import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';
Raw
13-implicit-return.jsx
// Use Implicit return
// Use the JavaScript feature of implicit return to write beautiful code. Let’s say your function does a simple calculation and returns the result.
// Bad
const add = (a, b) => {
return a + b;
}
// Good
const add = (a, b) => a + b;
Raw
14-component-naming.jsx
// Component Naming
// Always use PascalCase for components and camelCase for instances.
// Bad
import reservationCard from './ReservationCard';
const ReservationItem = <ReservationCard />;
// Good
import ReservationCard from './ReservationCard';
const reservationItem = <ReservationCard />;
Raw
15-reserver-prop-naming.jsx
// Reserved Prop Naming
// Don’t use DOM component prop names for passing props between components because others might not expect these names.
// Bad
<MyComponent style="dark" />
<MyComponent className="dark" />
// Good
<MyComponent variant="fancy" />
Raw
16-quotes.jsx
// Quotes
// Use double quotes for JSX attributes and single quotes for all other JS.
// Bad
<Foo bar='bar' />
<Foo style={{ left: "20px" }} />
// Good
<Foo bar="bar" />
<Foo style={{ left: '20px' }} />
Raw
17-prop-naming.jsx
// Prop Naming
// Always use camelCase for prop names or PascalCase if the prop value is a React component.
// Bad
<Component
UserName="hello"
phone_number={12345678}
/>
// Good
<MyComponent
userName="hello"
phoneNumber={12345678}
Component={SomeComponent}
/>
Raw
18-jsx-in-parentheses.jsx
// JSX in Parentheses
// If your component spans more than one line, always wrap it in parentheses.
// Bad
return <MyComponent variant="long">
<MyChild />
</MyComponent>;
// Good
return (
<MyComponent variant="long">
<MyChild />
</MyComponent>
);
Raw
19-self-closing-tag.jsx
// Self-Closing Tags
// If your component doesn’t have any children, then use self-closing tags. It improves readability.
// Bad
<SomeComponent variant="stuff"></SomeComponent>
// Good
<SomeComponent variant="stuff" />
Raw
20-underscore-in-methon-name.jsx
// Underscore in Method Name
// Do not use underscores in any internal React method.
// Bad
const _onClickHandler = () => {
// do stuff
}
// Good
const onClickHandler = () => {
// do stuff
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment