Reactapp syntax error

Question

Good evening, I need to make a website for the web matter, but I came across the following syntax error, which I have no idea what it is, I’m still beginner.

Main component

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import Topo from './components/Topo';
  import './App.css';
  import './style.css'
  
 function App(){
   
    //constructor(props){
      //super(props);
    //  this.state = {nome:'AAA'};
   // }
  // O Erro acontece aqui em render
    render() {

      return(   
      <div className='App'>
        <Topo />
      </div>
      );
    }  

}
  

export default App;

Component that I imported

import React from 'react';



export default class Topo extends React.Component {
    render() {
        return (
            <div className='topo'>
                <header className = "header">
                    <div className="topo" role="menu">
                        <img src='img/asf_feather.png'/>
                            <p>
                                /Apache Cassandra
                                    </p>

                            <div className='dropdown'>
                                <img src='img/asf_feather.png'/>
                                    <button class="dropbtn">
                                        Apache Software Foundation

                                        </button>
                                    <div className="dropdown-content">

                                        <a href='#'>Apache Homepage</a>
                                        <a href='#'>License</a>
                                        <a href='#'>Sponsorship</a>
                                        <a href='#'>Thanks</a>
                                        <a href='#'>Sercurity</a>
                                    </div>
                                <div/>
                            </div>
                            <div className='imgtopo'/>
                                <img src='img/cassandra_logo.png'/>
                            </div>
                                <nav>
                                    <div className='botaomediaquery' onclick='teste()'>
                                        <button type="button" form="teste1" onclick="alert('Sem Funcionalidade')">
                                        </button>
                                    </div>
                                    <ul className='links'>
                                        <li><a href='#'>Home </a></li>
                                        <li><a href='#'>Download  </a></li>
                                        <li><a href='#'>Documentation </a></li>
                                        <li><a href='#'>Comunity </a></li>
                                        <li><a href='#'>Blog</a></li>
                                    </ul>
                                    <div class='texto1'>
                                        <p>
                                            Manage massive amounts of data, fast, without losing sleep
                                            </p>
                                    </div>
                                    <div className='botao'>
                                        <button type='button' form='teste1' onclick='alert("Sem Funcionalidade")'>
                                            Download Cassandra
                                            </button>
                                    </div>
                                    <div className='CassadraDown'>
                                        <p>
                                            <a href='#'>Cassandra 4.0-beta1 Changelog</a>
                                        </p>
                                    </div>
                                </nav>
                            </header>
                        </div>
                        
                    );
                
            }       

}

Answer 1

Tbm I’m a beginner in React, but when you create a component in React that’s a function, you don’t have the "render" method, to return JSX you must do so:

function App(){
    return(
        <h1>Hello World</h1>
    )
}

Note: Render syntax is used only in components created from a class.