Hola, esto parece algo que debería ser simple, pero no importa cuántas búsquedas haga, parece que no puedo encontrar una respuesta clara o simplemente estoy malinterpretando algo. Quiero agregar un componente simple.
Tengo una aplicación de reacción simple aquí es app.js
import logo from './logo.svg'; import './App.css'; import fortune from './fortune.js' ; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Wowsersssss </p> <button onclick="myFortune()">Fortune</button> </header> </div> ); } export default App;y un componente simple que estoy importando
import React from 'react'; import ReactDOM from 'react-dom'; function fortune() { const message = () => { alert("Hello"); } return ( <button onClick={message}>Click Here</button> ); } ReactDOM.render(<fortune />, document.getElementById('root'));¿Cómo inserto ahora eso en app.js?
Realmente agradecería si alguien pudiera mostrarme dónde agregarlo.
¡Gracias!
Parece que tienes el código al revés. La App debe ser el componente que se adjunta al elemento de reacción principal en el DOM (generalmente), y luego importa nuevos componentes. Además, los nuevos componentes deben tener nombres escritos en Pascal Case , de lo contrario obtendrá errores.
Así que aquí he creado un componente MyFortune y se importa a la App .
function MyFortune() { function message() { console.log('Hello'); } return ( <button onClick={message} >Click Here </button> ); } // export default MyFortune; // import MyFortune from './MyFortune'; function App() { return ( <div> <header> <p>Wowsersssss</p> <MyFortune /> </header> </div> ); } ReactDOM.render( <App />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>Debe exportar el componente en sí para poder importarlo. También debe poner en mayúscula el nombre de su función para el componente.
import React from 'react' function Fortune(){ function clicked(){ console.log('clicked') } return( <button onClick={clicked}>I am a button</button> ) } export default Fortune *//////////////* import Fortune from './Fortune' //Assuming they're in the same folder level //You can Display it by Declaring it inside the <> just like meta tags do <Fortune />Puede agregar una función onlick hacia el componente, pero la función debe estar por encima de la declaración de devolución si es compleja o puede ser un código de una sola línea en la sección de devolución de JSX. Tenga en cuenta que React usa pascal Case en estas funciones cuando se llama como onClick no onclick, className no className.