21 Best Practices for a Clean React Project清洁反应项目的21个最佳实践#react反应#javascriptJavaScript#programming编程#awsAWS

To read more articles like this, 阅读更多这样的文章 visit my blog访问我的博客

React is very unopinionated about how things should be structured. This is exactly why it’s our responsibility to keep our projects clean and maintainable.

React对事物应该如何结构化非常没有主见。这就是为什么我们有责任保持我们的项目干净和可维护。

Today, we will discuss some best practices to improve your React application’s health. These rules are widely accepted. As such, having this knowledge is imperative.

今天，我们将讨论一些改善React应用程序健康状况的最佳实践。这些规则被广泛接受。因此，掌握这些知识是必要的。

Everything will be shown with code, so buckle up!

一切都将显示与代码，所以扣起来！

1. Use JSX ShortHand 1.使用JSX速记

Try to use JSX shorthand for passing boolean variables. Let’s say you want to control the title visibility of a Navbar component.

尝试使用JSX简写来传递布尔变量。假设您想要控制导航栏组件的标题可见性。

Bad 坏

return (
  <Navbar showTitle={true} />
);

Good 好

return(
  <Navbar showTitle />
)

2. Use Ternary Operators 2.使用三进制运算符

Let’s say you want to show a user’s details based on role.

假设您希望基于角色显示用户的详细信息。

Bad 坏

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
}