reactjsmuperita

ReactJS mu Perita (VII). ¿Qué contiene la primera aplicación React?

En esta sección se analizará el contenido (ficheros) de la primera aplicación con React.

7.1 El fichero index.html

/public/index.html

No contiene nada concreto salvo la siguiente línea:

   <div id=”root”></div>

fichero index

7.2 El fichero src/App.js

Donde reside la lógica de la aplicación.fichero app

En este fichero App.js se puede adivinar lo que se ve en el navegador.

Importante destacar que App extiendo Component, luego la aplicación por así decirlo es un componente.

La estructura de la aplicación está en el método render(). El método render es el que devuelve el contenido html es el que dibuja el componente de la aplicación. Es uno de los más importantes puesto que va a definir o mostrar la funcionalidad del componente.

El componente App se exporta para poder luego ser utilizado por otras partes de la aplicación.

export default App;

7.3 Los elementos React

  • Las aplicaciones React están creadas en base a pequeñas porciones de código. Por ejemplo:

const element = <h1 className="App-title">Welcome to React</h1>;

Recuerda

Se utiliza className en vez de class para no confundirse con las clases.

  • Los objetos javascript que se utilizan tienen que ser fáciles de crear.

  • Los components o componentes están hechos en base a elements o elementos

class App extends Component { . . . }
 

7.4 El fichero index.js

Importa los distintos elementos de los que consta la aplicación y que serán necesarios para la misma.

Hace el enlace entre la aplicación y el elemento root definido en index.html mediante la siguiente línea:

ReactDOM.render(<App />, document.getElementById('root'));

Renderiza la aplicación en el elemento de index.html con el id root.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>