Não consigo importar componente no Reactjs

Front-end
,
#1

Estou fazendo um curso de React e não consigo importar um componente olhei tutoriais mas não consigo, no React não aparece erro, mas a pagina fica em branco.
Abaixo esta o código:

Header.js

import React from 'react'

import Logo from './imgs/HTML5_Logo_256.png'

export default function Header(){

  const cnn = ()=>{

    return "ok";

  }

  const canal = "ok1";

  const cursos= "ok2";

  return(

    <section align="center">

      <p>{cnn()}</p>

      <p><strong>Canal:</strong> {canal}</p>

      <br/>

      <p>{"<strong>Cursos:</strong> " + cursos}</p>

      <img src={Logo} width='150' height="150" />

      <img src="/img/eu.png" width='150' height="150" border="1" />

    </section>

  )

}

App.js

import React from 'react'

import topo from "./componentes/topo2"

export default function App(){

  return(

    <>

      <topo />

    </>

  )

}

OBS: toda a linha (import topo from “./componentes/topo2”) aparece sublinhada no vs code

#2

O import não deveria ser do componente Header?

import Header from "./componentes/Header"
#3

Lucas meu amigo descobrir o erro.
Quando importamos componente no react ele tem que ter letra maiúscula
assim:
import Topo from “./componentes/topo2”
e nao assim:
import topo from “./componentes/topo2”
descobrir através do console do navegador que deu erro

react-dom.development.js:67 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

muito obrigado pelo sua ajuda e pelo seu tempo

1 curtida