React JS

🖥 5 вещей, которые сделают ваш React проект лучше

*️⃣Используйте JSX-сокращения
Допустим, вам нужно управлять видимостью компонента Navbar с помощью пропса showTitle:
Плохо

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

Хорошо

return(
  <Navbar showTitle />  
);  

*️⃣Используйте тернарные операторы
Отличный способ для выбора между двумя компонентами по некоторому условию
Плохо

const { role } = user;

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

Хорошо

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />   

*️⃣Используйте преимущества объектных литералов
Если у вас выбор между тремя и более компонентами, литералы объектов могут сделать код более читаемым – используйте их вместо сложных условий.
Плохо

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}  

Хорошо

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Component />;  

*️⃣Используйте фрагменты
Нет никакого преимущества в использовании div вместо Fragment. Зачем нам лишний элемент в DOM?
Плохо

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)   

Хорошо

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)    

*️⃣Не определяйте функцию внутри рендера
Лучше не смешивать логику и рендер внутри компонента.
Плохо

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // NOTICE HERE
      This is a bad example 
    </button>  
)  

Хорошо

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)   

📎 Ещё больше полезных советов

@react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

👍48❤12🔥3🥱2

www.tgoop.com/react_tg/438

4.1K viewsMar 9, 2024 at 09:01

🖥 5 вещей, которые сделают ваш React проект лучше

*️⃣Используйте JSX-сокращения
Допустим, вам нужно управлять видимостью компонента Navbar с помощью пропса showTitle:
Плохо

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

return(
  <Navbar showTitle />  
);  

const { role } = user;

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

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />   

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}  

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Component />;  

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)   

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)    

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // NOTICE HERE
      This is a bad example 
    </button>  
)  

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)