28 de agosto de 2024 • 1 min de leitura

6 React Tips & Tricks for beginners.

You will learn some important tips and best practices when developing your apps with react.js

React

1 - Use self-closing tags

keep your code clan by using self-closing tags.

❌ Bad: too verbose

<MyComponent></MyComponent>

✅ Good

<MyComponent />

2 - Prefer fragments

Avoid unnecessary <div> tags. Use <> fragment to keep the DOM clean.

❌ Bad

<div>
  <Header />
  <Main />
</div>

✅ Good

<>
  <Header />
  <Main />
</>

3 - Spread props

Destructure props for more readable and concise components.

❌ Bad

function TodoList(props) {
  return (
    <p>{props.item}</p>
  );
}

✅ Good

function TodoList({item}) {
  return (
    <p>{item}</p>
  );
}

4 - Setting default props

Define default values directly within props for easy management

❌ Bad

function Card({ text, small }) {
  let btnText = text || "Click here";
  let isSmall = small || false;
  ...
}

✅ Good

function Card({
  text = "Click here",
  small = false,
 }) {
  ...
}

5 - Simplify String Props

Pass string props without curly braces for cleaner syntax.

❌ Bad

<Button text={"Submit"} />

✅ Good

<Button text="Submit" />

6 - Move static data out

Keep components efficient by moving static data outside.

❌ Bad

function LevelSelectorComponent() {
  const LEVELS = ["Easy", "Medium", "Hard"];

  return (...)
}

✅ Good

const LEVELS = ["Easy", "Medium", "Hard"];

function LevelSelectorComponent() {
  return (...)
}