search

da2k / curso-reactjs-ninja

915 stars 322 forks source link

css e shape #574

Closed marisbispo closed 2 years ago

marisbispo commented 2 years ago

Bom dia, @fdaciuk! Tudo bem?

Estou com um problema que não estou conseguindo chamar o meu css dentro do index.html

Ja verifiquei o caminho várias vezes. O arquivo está em outra pasta, e da o seguinte erro:

A folha de estilo http://localhost:3000/src/dist/css/style.css não foi carregada porque seu tipo MIME, “text/html”, não é “text/css”.

Segue o codigo inteiro da index:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

    <link rel="stylesheet" type="text/html" href="/src/dist/css/style.css"/>
    <title>Git!</title>

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Porém, quando o arquivo está no mesmo diretorio é carregado normalmente e sem nenhum erro. Sabe me dizer o por que?

Outra dúvida, na aula você colocou o codigo assim:

UserInfo.propTypes={
    userinfo: PropTypes.shape({
        username: PropTypes.string.isRequired,
        photo: PropTypes.string.isRequired,
        login: PropTypes.string.isRequired,
        repos: PropTypes.array.isRequired,
        followers: PropTypes.number.isRequired,
        following: PropTypes.number.isRequired
    })
}

Poderia me explicar melhor o uso do shape? não sei se entendi bem...

Obrigada!

@fdaciuk

fdaciuk commented 2 years ago

Oi @marisbispo! Você está usando Create React App, certo? Nesse caso, tem duas formas de adicionar CSS ao seu app:

1) fazer o import direto no JavaScript (quando você tem o arquivo CSS dentro do seu diretório src).

2) fazer o import pelo HTML, como você fez. Mas, nesse caso, o caminho precisa ser público, ou seja: você precisa conseguir acessar à partir da barra de endereços do navegador. Arquivos públicos no CRA ficam no diretório public. Então, se você colocar seu style.css dentro de public/css/style.css, você consegue acessar esse arquivo publicamente, via barra de endereços do seu navegador, usando: http://localhost:3000/css/style.css.

E se você consegue acessar dessa forma, aí sim você pode usar a tag <link> no HTML, passando o caminho %PUBLIC_URL%/css/style.css no href da tag link =)

Esse %PUBLIC_URL%, ao gerar o build do seu projeto, será convertido pelo react-scripts para o caminho do seu projeto. Se o caminho público for http://localhost:3000, no final esse %PUBLIC_URL% vai virar esse http://localhost:3000.

Ficou claro? =)

Sobre o shape

O shape do PropTypes é para, literalmente, definir um "shape", um "formato" para o objeto das props.

Isso ajuda o PropTypes a saber qual é o formato do objeto que você irá receber via props, e quais os tipos de todas as propriedades desse objeto. É basicamente isso =)

marisbispo commented 2 years ago

mto obrigada, @fdaciuk!

fdaciuk commented 2 years ago

Qualquer dúvida, só avisar :D