Boas práticas ao escrever código em React js

Ver planos

// evite
import modalCompra from './ModalCompra'
// prefira
import ModalCompra from './ModalCompra'
// evite
const ModalCompra = < ModalCompra />
// prefira 
const modalCompra = < ModalCompra />

// use assim se você quiser executar tarefas mais completas ou lógica que não é possível em componentes funcionais
class Contador extends React.Component{
	   state = {
	     contador:0
	   }
	   constructor(props){
	      super(props)
	      this.handleClick = this.handleClick.bind(this)
	   }
	   handleClick(){
	      this.setState({contador: this.state.contador + 1})
	   }
	   render(){
	      return (
	         <div>
	             
		      contador: {this.state.contador}
	             
	             
	                  Incrementar
	             
	        
	      )
	   }
}

// use assim sempre que seu componente for simples, não requer lidar com lógica mais complicada
function Contador(){
    const [contador, setContador] = useState(0)
    const handleClick = ()=>setContador(contador +1)
    return (
        <div>
            <p>
                contador: {contador}
            </p>
            <button onClick={handleClick}>
                Incrementar
            </button>
        </div>
    )
}

// prefira usar assim
function Button(props){
    const {onClick, text} = props
    return (
        <button onClick={onClick}>
            {text}
        </button>
    )
}
// ou melhor, utilize assim
function Button({onClick, text}){
     return (
        <button onClick={onClick}>
            {text}
        </button>
    )
}

// evite usar assim
export default function Artigo {
    const props = {
      texto: '',
      estaPublicado: false
    }
    return (<div texto={props.texto} estaPublicado={props.estaPublicado} />);
  }

// prefira usar assim  
export default function Artigo {
    const props = {
      texto: '',
      estaPublicado: false
    }
    return (<div {props} />);
}
// ou, utilize assim
export default function Artigo {
    const props = {
      texto: '',
      estaPublicado: false
    }
    return (<div {...props} />);
}

// evite escrever assim
function ComponenteTexto(props){
    function toText(value){
        return String(value)
    }
    return (
        <div>
            {toText(props.data)}
        </div>
    )
}

// prefira usar assim
function useText(){
    function toText(value){
        return Number(value)
    }
    return {toText}
}
function ComponenteTexto(props){
    const {toText} = useText()
    return (
        <div>
            {toText(props.data)}
        </div>
    )
}

const UserList = ({ isLoading, result }) => (
   <div>
     {isLoading && <span>Loading...</span>}
     {!isLoading && (
       <ul>
         {result.map((user) => (
           <li key={user.id}>{user.name}</li>
         ))}
       </ul>
     )}
   </div>
);

const UserList = ({ isLoading, result }) => (
   <div>
     {isLoading ? (
         <span>Loading...</span>
     ) : (
         <ul>
             {result.map((user) => (
                  <li key={user.id}>{user.name}</li>
             ))}
          </ul>
     )}
   </div>
);

// evite escrever assim
function List(){
    const {data} = useList()
    return data ? (
        data.length === 0 ? (
            <p>Nenhum elemento disponível</p>
        ) : (
            <>
                {data.map(({ nome }, indice) => (
                    <p key={indice}>{nome}</p>
                ))}
            </>
        )
    ) : (
        < Loading />
    );
}

// prefira escrever assim
function Callback({data, render}){
    if(data){
        if(data.length === 0){
            return <p>"Nenhum elemento disponível"</p>
        }
        return render(data)
    }
    return < Loading />
}
function List(){
    const {data} = useList()
    <Callback 
        data={data}
        render={(data)=>(
            <>
                {data.map(({ nome }, indice) => (
                    <p key={indice}>{nome}</p>
                ))}
            </>
        )}
    />
}

// se possível, evite
function List(){
    const {data} = useList()
    <Callback 
        data={data}
        render={(data)=>(
            <>
                {data.map(({ nome }, indice) => (
                    <p key={indice}>{nome}</p>
                ))}
            </>
        )}
    />
}

// se possível, faça
function List(){
    const {data} = useList()
    <Callback 
        data={data}
        render={(data)=>(
            < User data={data}/> 
        )}
    />
}
function User(){
    return (
        <>
            {data.map(({ nome }, indice) => (
                <p key={indice}>{nome}</p>
            ))}
        </>
    )
}

// paginas/Inicio/Inicio.jsx
import React from 'react';
import Cabecalho from 'componentes/Cabecalho';
import Menu from 'componentes/Menu';
import Cartao from 'componentes/Cartao';
import Botao from 'componentes/Botao';
import Rodape from 'componentes/Rodape';
import Modal from 'componentes/Modal';

// componentes/index.js
import Cabecalho from 'componentes/Cabecalho';
import Menu from 'componentes/Menu';
import Cartao from 'componentes/Cartao';
import Botao from 'componentes/Botao';
import Rodape from 'componentes/Rodape';
import Modal from 'componentes/Modal';
export { Cabecalho, Menu, Cartao, Botao, Rodape, Modal };

Boas práticas ao escrever código em React js | Alura Cursos Online

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Boas práticas ao escrever código em React js

Introdução

Neilton Seguins

Guia, não regra

Práticas recomendadas

Arquivos JSX

Nomenclaturas

Class Components x Function Components

Fragments

Props

Funções auxiliares

Renderização condicional

Ternários aninhados

Mapeando listas em componentes

Organização de importações

Conclusão

Explore por tópico

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Introdução

Neilton Seguins

Inscreva-se em nossa Newsletter

Guia, não regra

Práticas recomendadas

Arquivos JSX

Nomenclaturas

Class Components x Function Components

Fragments

Props

Funções auxiliares

Renderização condicional

Ternários aninhados

Mapeando listas em componentes

Organização de importações

Conclusão

Explore por tópico

Leia também