Olá, estou tentando repetir o passo a passo, porém estou obtendo erro na renderização do componente: 'ListaDeNotas'. Alguém consegue da uma luz? rs
Main: App.js
import React from 'react'
import ListaDeNotas from './components/ListaDeNotas'
function App() {
return (
<section>
<form>
<input type="text" placeholder="Título"/>
<textarea placeholder="Escreva sua nota"></textarea>
<button>Cria Nota</button>
</form>
<ListaDeNotas/>
</section>
);
}
Componente : ListaDeNotas.js
import React, { Component } from "react";
export default class ListaDeNotas extends Component{
render()
{
return
(
<ul>
<li>
<section>
<header>
<h3>Título</h3>
</header>
<p>Escreva sua nota</p>
</section>
</li>
</ul>
);
}
}
Estrutura de pastas
Retorno console
PS C:\Users\jairm\Downloads\projeto-atual> npm start npm ERR! code ENOENT npm ERR! syscall open PS C:\Users\jairm\Downloads\projeto-atual> cd .\ceepCompiled with warnings. Compiled with warnings. Failed to compile.
./src/components/ListaDeNotas.js Failed to compile.
./src/components/ListaDeNotas.js Failed to compile.
./src/components/ListaDeNotas.js Compiled with warnings. Compiled with warnings. Compiled with warnings. Compiled with warnings.
src\components\ListaDeNotas.js Line 8:9: Unreachable code no-unreachable
Search for the keywords to learn more about each warning.To ignore, add // eslint-disable-next-line to the line before.
Erro no browser
× Error: ListaDeNotas(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. ▶ 19 stack frames were collapsed. Module. C:/Users/jairm/Downloads/projeto-atual/ceep/src/index.js:6 3 | import './index.css'; 4 | import App from './App'; 5 |
6 | ReactDOM.render( 7 | <React.StrictMode> 8 | 9 | </React.StrictMode>, View compiled Module../src/index.js http://localhost:3000/static/js/main.chunk.js:517:30 webpack_require C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:851 848 | 849 | webpack_require.$Refresh$.init(); 850 | try { 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | webpack_require.$Refresh$.cleanup(moduleId); 854 | } View compiled fn C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } 150 | return webpack_require(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled 1 http://localhost:3000/static/js/main.chunk.js:531:18 webpack_require C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:851 848 | 849 | webpack_require.$Refresh$.init(); 850 | try { 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | webpack_require.$Refresh$.cleanup(moduleId); 854 | } View compiled checkDeferredModules C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); 45 | result = webpack_require(webpack_require.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | View compiled Array.webpackJsonpCallback [as push] C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:61 This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.