[Dúvida] Erro

Oii Pedro, tudo bem?

Analisando o seu código, identifiquei alguns erros que podem estar causando as mensagens de erro.

1. Na linha do return, você usou chaves {} em vez de parênteses (). Em componentes de classe do React, o conteúdo JSX deve ser retornado dentro de parênteses. Então, substitua as chaves por parênteses.

2. No seu <input type="text" />, você colocou o / antes do name="tarefa", o que está causando um erro de sintaxe. O correto seria <input type="text" name="tarefa" />.

3. Há um erro de digitação no id do seu <input type="text" />. Você escreveu "tarfea" em vez de "tarefa".

Com as correções, o seu código completo ficará assim no final da aula:

import React from 'react';
import Botao from '../Botao';

class Formulario extends React.Component {
  render() {
    return (
      <form>
        <div>
          <label htmlFor="tarefa">
            Adicione um novo estudo
          </label>
          <input
            type="text"
            name="tarefa"
            id="tarefa"
            placeholder="O que você quer estudar"
            required
          />
        </div>
        <div>
          <label htmlFor="tempo">
            Tempo
          </label>
          <input
            type="time"
            step="1"
            name="tempo"
            id="tempo"
            min="00:00:00"
            max="01:30:00"
            required
          />
        </div>
        <Botao />
      </form>
    )
  }
}

export default Formulario;

Não esqueça de exportar no final.

Também verifique se o componente do Botao está correto, dessa forma:

import React from 'react';

class Botao extends React.Component {
  render() {
    return (
      <button>
        Botão
      </button>
    )
  }
}

export default Botao;

Um abraço e bons estudos.

import Botao from '../Botao';

Os outros erros foram solucionados, menos esse import do Botao. O que está errado?

Oi Pedro,

O erro tá parecendo de caminho, você precisa ter certeza de que o caminho do arquivo Botao.js está correto.

A organização das pastas tá assim na aula e para o caminho funcionar a sua também precisa tá assim:

Você também pode verificar se o nome do arquivo do componente Botao está correto e se ele está exportando corretamente o componente utilizando export default Botao;.

Você pode conferir o código completo aqui. Se não funcionar, por favor, peço que mande o código completo no GitHub.

Um abraço e bons estudos.

Desse modo?

Pedro, está faltando a pasta do componente botão.

Dentro da pasta components você precisa criar a pasta de Botao e colocar o código lá dentro. Assim:

Está dando esse erro porque não tem a pasta de Botao criada e ele não encontra o caminho que você indicou. Se não funcionar, por favor, peço que mande o código completo no GitHub.

Código dos components da aula 02 completo.

Abraços.

Assim? Deu mais um erro agora...

Não, não é no App.tsx que você importa o Botao e sim no index.tsx do Formulario. Assim:

import React from 'react';
import Botao from '../Botao';

class Formulario extends React.Component {
  render() {
    return (
      <form>
        <div>
          <label htmlFor="tarefa">
            Adicione um novo estudo
          </label>
          <input
            type="text"
            name="tarefa"
            id="tarefa"
            placeholder="O que você quer estudar"
            required
          />
        </div>
        <div>
          <label htmlFor="tempo">
            Tempo
          </label>
          <input
            type="time"
            step="1"
            name="tempo"
            id="tempo"
            min="00:00:00"
            max="01:30:00"
            required
          />
        </div>
        <Botao />
      </form>
    )
  }
}

export default Formulario;

No app.tsx você renderiza o Formulario:

import React from 'react';
import Formulario from './components/Formulario';

function App() {
  return (
     <div className="App">
       <Formulario />
     </div>
  );
 }

 export default App;

Mas indico que você veja toda a aula para entender os motivos com detalhes sobre as importações.

Se não funcionar, por favor, peço que mande o código completo no GitHub.

Estou fazendo conforme você disse e revendo a aula. Mas, o meu App.tsx, na hora de importar o botao, não reconhece a pasta Botao, só a pasta formulário. Estou organizando errado as pastas?

É porque o Botao não é para ser importado no app.tsx como você tá fazendo. Você precisa importar o Botao no arquivo index.tsx do Formulario. Assim:

import React from 'react';
import Botao from '../Botao';

class Formulario extends React.Component {
  render() {
    return (
      <form>
        <div>
          <label htmlFor="tarefa">
            Adicione um novo estudo
          </label>
          <input
            type="text"
            name="tarefa"
            id="tarefa"
            placeholder="O que você quer estudar"
            required
          />
        </div>
        <div>
          <label htmlFor="tempo">
            Tempo
          </label>
          <input
            type="time"
            step="1"
            name="tempo"
            id="tempo"
            min="00:00:00"
            max="01:30:00"
            required
          />
        </div>
        <Botao />
      </form>
    )
  }
}

export default Formulario;

E o Formulario precisa ser importado no app.tsx. Assim:

import React from 'react';
import Formulario from './components/Formulario';

function App() {
  return (
     <div className="App">
       <Formulario />
     </div>
  );
 }

 export default App;

Apague a importação do botão no app.tsx e use o código que mandei acima.

Se não funcionar, por favor, peço que mande o código completo no GitHub. Fico no aguardo :D

Mas, aqui ele não importou o Botao?

Se você continuar assistindo, verá que ele muda a importação no App.tsx:

amigo, é só ajustar seu código do app.tsx como a moça falou.

o instrutor vai mudando o código assim mesmo, se tu botar o botao no app vai dar esse erro, basta mudar o código do app.tsx

não tem segredo!