React Superhero (IV): Estructura de proyecto base

En el post anterior creamos un proyecto de React usando el CLI que nos proporcionan los creadores del mismo. Esta herramienta de linea de comandos nos crea un proyecto base desde el que partir y como vimos cuando usamos npm start para arrancar nuestro servidor de desarrollo, la herramienta nos muestra una página similar a esta:

Veamos un poco la estructura del proyecto y desde donde podemos empezar a trabajar.
Lo primero veamos lo que tenemos:

En lo primero que nos tenemos que fijar es en los index tanto el js, como el html, ya que son desde donde se empieza a llamar al resto. Si miramos el index.html tenemos una pagina html con varios tags pero lo que nos importa realmente es algo que ya hemos visto:

 <div id="root"></div>

Recordemos que es en ese punto donde se empieza a componer nuestra aplicación.

Lo siguiente miremos dentro de la carpeta src y veamos el index.js que aqui tenemos varias cosas interesantes:

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();

Tenemos varios imports, luego el típico ReactDOM.render y por último una llamada a un método registerServiceWorker(). Comencemos con los imports, los dos primeros ya los hemos visto antes, son los específicos para que React funcione, veamos los siguientes:

• "import './index.css';": No es muy especial solo importa el css, ni más ni menos.
• "import App from './App';" : Este import nos instancia el componente que está dentro del fichero App.js, un poco más abajo hablaremos como está creado esto, es algo parecido a node con los exports ;).
• "import registerServiceWorker from './registerServiceWorker';": Este import realemente es el que instancia el servidor local y anda pendiente de los cambios en el código, lo que hace es cargar el export por defecto. Si alguién tiene dudas con el código de este fichero que lo ponga en comentarios y lo vemos ;).

A continuación como ya hemos comentado, tenemos nuestro típico render de react que lo que hace es instanciar el componente App. Si miramos el código de App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Vemos que ya hemos visto muchas cosas, comentar que los imports de logo y de App.css los necesitamos para usarlos en nuestro código JSX, si os fijáis en la línea:

<img src={logo} className="App-logo" alt="logo" />

Tenemos las dos cosas, usamos el logo dentro de src y ya estamos usando tambien nombres de clases del fichero css.

En este punto faltaría solo comentar la última y casi la más importante del conjunto (en este punto jejeje):

export default App;

Esta línea lo que indica es que por defecto cuando se haga un import de este fichero se importe el componente App. Un detalle importante, sin export no importamos nada, si comentáramos esa línea tendríamos este resultado:

Creo que más o menos se entiende todo, solo comentar que si quisieramos cambiar el componente App por otro solo tendríamos que crear el componente como queramos ponerle la línea export y cambiar el dentro del ReactDOM.render como ya hemos visto en algún post anterior (de todas formas iremos trabajando con esto más de una vez ;) ).

Como vemos prácticamente todo lo haremos dentro de la carpeta src y sigue manteniendo el nivel de sencillez que hemos estado viendo.

Sin mucho más nos vemos en el siguiente. Un abrazoooooooo