HTML Como fazer um site assim com ReactJs ou HTML puro

[thefill]

Olá pessoal, venho aqui para pedir ajuda, gostaria de fazer um site para mostrar dados vindos de uma API externa mas não sei como fazer nem por onde começar, o template que eu gostaria de fazer seria mais ou menos assim:

 

[GabrielSennaMs]

@thefill Bom presumindo que você já tenha algum conhecimento com React, você pode começar tentando consumir essa API.

[thefill]

@GabrielSennaMs Isso eu já fiz, o que eu estou tendo mais dificuldade é em fazer o layout pois da forma que as informações estão sendo apresentadas estão na forma de uma lista (imagem logo abaixo) e eu gostaria que fosse na forma de blocos como na imagem acima.

 

 

 

[Rui Guilherme]

Assumindo que seja ReactJS você só vai precisar aprender algumas coisas.

useState:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

https://reactjs.org/docs/hooks-intro.html

 

Axios:

https://www.npmjs.com/package/axios (Para consumir a API)

 

FlexBox/Grid:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://material-ui.com/components/grid/#grid eu gosto bastante do material ui, então acredito que seja legal para você também.

 

Fiz esse demo para te mostrar como usar uma grid de 4 (3+3+3+3): https://codesandbox.io/s/material-demo-forked-0nls6 basta abrir o demo.js e colocar as imagens que você vai pegar pelo Axios no lugar de Paper. (Caso o projeto não carregue você pode abrir ele aqui: https://0nls6.csb.app/ )

 

[thefill]

Oi @Rui Guilherme obrigado por me responder, como eu já havia dito anteriormente, pelo menos o básico eu já tinha conhecimento, o layout era a parte mais complicada de se fazer da forma que eu gostaria de fazer, desculpem pois não fui muito claro quando fiz minha pergunta.

Eu acessei os links que você havia deixado como referencia do que estudar, mas ainda sim não resolviam o meu problema, pesquisei um pouco mais na internet e então achei algo que fosse mais no caminho que eu estava procurando.

 

 

Esses dois comandos foram o que me ajudaram a fazer o que eu queria:

 

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 15px;

 

Fiz um projeto bem simples feito em ReactJS no site do Stackblitz para caso vocês queiram testar:

Link para o código

Link para a demo do site

 

Bem, então era isso, mais uma vez muito obrigado ao @Rui Guilherme e ao @GabrielSennaMs que me responderam.