Empecé a aprender React y ahora estoy tratando de entender cuál es el propósito de index.js y App.js que se crean ejecutando create-react-app .
¿Por qué no podemos simplemente usar, por ejemplo. App.js ?
He leído que App.js generalmente se usa como punto de entrada principal a la aplicación, pero el código generado automáticamente de index.js parece ser parte del punto de entrada principal:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker();Vi preguntas similares para reaccionar nativo, pero quiero saber sobre esto en reaccionar en general.
index.js es el punto de entrada tradicional y real para todas las aplicaciones de nodo. Aquí en React solo tiene código de qué renderizar y dónde renderizar.
App.js , por otro lado, tiene el componente raíz de la aplicación de reacción porque cada vista y componente se manejan con jerarquía en React, donde <App /> es el componente más alto en la jerarquía. Esto le da la sensación de que mantiene la jerarquía en su código a partir de App.js
Aparte de eso, puede tener la lógica de la aplicación en el propio archivo index.js . Pero es algo relacionado con las convenciones seguidas por la comunidad que usa la biblioteca o el marco. Siempre se siente bien ir a lo largo de la comunidad.
Gran pregunta. La respuesta es que App.js no es necesario y personalmente lo elimino y solo uso Index.js como raíz.
La gente "dice" que hace que se vea mejor / más fácil, pero solo agrega un paso adicional que no es necesario. Espero que eventualmente eliminen App.js de npx create-react-app y solo usen index.js.
Editar: no voy a alterar mi comentario original, sin embargo, dejé de eliminar App.js. Ahora canalizo todo a través de App.js y uso Index.js. Lo bueno de index.js es que puedes hacer todas tus importaciones allí y canalizarlas a través de App.js
Sí, App.js no es necesario. Puede tener solo index.js de la siguiente manera.
// Import React and ReactDOM Libraries. import React from 'react'; import ReactDOM from 'react-dom'; import CommmentDetail from './CommentDetail'; function getLabelText() { return 'Enter Name: '; } // Create React Components const App = () => { const buttonText = {text: 'Submit'}; const buttonStyle = {backgroundColor: 'blue', color: 'white'}; return ( <div> <label className="label" htmlFor="name">{getLabelText()}</label> <input id="name" type="text" /> <button style={buttonStyle} >{buttonText.text}</button> // You can have other components here as follows. // CommmentDetail is someOther component defined in another file. // See the import statement for the same, 4th line from top <CommmentDetail author='Nivesh' timeAgo='3 months ago at 4.45 PM' commentText='Good Point' } /> </div> ) } // Take the react component and show it on the screen // ReactDOM.render(<App />, document.getElementById('root')); // You can use the following as well. ReactDOM.render(<App />, document.querySelector('#root'));