Doubt about the correct way to structure components - REACT

Asked

Viewed 87 times

2

I’m new to React and I always get a flea behind my ear when I’m creating some components. After all, the right way to structure is like this

<label>alo {nome}</label>

or creating a const or Function that returns me a label with the values, I’m talking about when we have many repetitive components... a friend told me that the code became smaller and more readable using functions, But on the other hand, it decayed in performance because it called several times the same function. But I have a hard time believing anything that speaks to me without having a concrete basis... So I ask you, what is the right way? if someone can give the answer together an explanation, I am very grateful.

javascript react

  • Let me see if I understood, this same label format would be used several times in the same component?

  • Here is an explanation of the difference between making the component as a class or as a function https://medium.com/rocketseat/um-guia-para-beginners-no-react-js-80e1ac357649

  • That, too, G. Bittencout... sorry it took me so long to answer is why these days I was camping and there was no internet. Thank you so much for the article Bins, I took a look and this is exactly what I’m learning about life cycle components and such, but it’s not quite about that my doubt(At least I think not).

  • Your question was very confusing, but I believe the reading of the section Thinking the React Way available in official documentation can help you assimilate various basic concepts.

1 answer

0

Good friend several factors can influence this... First when we know the right time to create an React component? Simple, a component is made for reuse so if you use a particular piece of code in more than one place, for example the label then it’s time to abstract it.

Now referring to creating a function like you said or directly writing the code, let’s use a simple example:

We have the following situation a list of tasks:

const todoList = ["fazer café", "lavar as mãos", "guardar a louca"]

Now we have to ask... What would be easier? I’ll give you two solutions, the first is the following: 

function List(props) {
  const todoList = ["fazer café", "lavar as mãos", "guardar a louca"]

  return (
    <ul>
      <li>{todoList[0]}</li>
      <li>{todoList[1]}</li>
      <li>{todoList[2]}</li>
    </ul>
  );
}

export default list;

We can also do: 

 import React from 'react';

  function List(props) {
    const todoList = ["fazer café", "lavar as mãos", "guardar a louca"]

    return (
      <ul>
        { todoList.map(value => <li>{value}</li>) }
      </ul>
    );
  }

  export default list;

In this case it is quite feasible to create a component because it can be reused in other places besides that you are not attached to the static code... The key is to think because every case is a case.

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.