Lección 04. Estructura de proyecto.

Una vez creado nuestro proyecto, entendamos que contiene:

¿Qué incluye create-react-app?_

Un proyecto creado con create-react-app, además de React, incluye otras librerías como:

• Webpack: Se encarga de procesar y empaquetar nuestro código JavaScript (con sus dependencias), archivos CSS y otros archivos estáticos como imágenes, vectores, fuentes, etc.

• Babel: Permite usar nuevas características de ECMAScript.

• PostCSS: Es una librería para el procesamiento de CSS.

• Jest: Es una librería para testing.

• etc.

Uno podría configurar un proyecto de React manualmente e incluir cada una de estas librerías, pero es bastante engorroso, create-react-app nos hace la vida más fácil.

Estructura de Proyecto._

create-react-app crea la siguiente estructura de archivos y carpetas:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Los dos archivos más importantes son:

• public/index.html - la plantilla HTML de la aplicación.

• src/index.js - el punto de entrada JavaScript de la aplicación.

Puedes eliminar o renombrar otros archivos según tus necesidades.

Dentro de src se incluyen todos los archivos JavaScript y CSS de tu aplicación.

También es recomendable incluir otros archivos estáticos como imágenes y fuentes en esta carpeta. Puedes crear subcarpetas para organizar mejor los archivos.

En public van todos los archivos estáticos que necesites incluir en la plantilla public/index.html.

Puedes crear otras carpetas además de src y public. Estas carpetas no van a ser incluídas en el paquete de distribución.

Scripts y Comandos._

En la carpeta del proyecto puedes ejecutar los siguientes comandos:

• npm start - inicia el servidor de desarrollo y abre un navegador con la aplicación.

• npm test - ejecuta las pruebas.

• npm run build - empaqueta la aplicación para producción en la carpeta build.

• npm run eject - permite cambiar manualmente las librerías y configuración que utiliza create-react-app por defecto. Ten cuidado con este comando, una vez que se expulsa la configuración inicial no hay vuelta atrás.

Hot reloading._

Una de las funcionalidades más importantes de los proyectos creados con create-react-app es la capacidad de hacer cambios en vivo sin necesidad de reiniciar el servidor. Si haces un cambio en algún archivo en src o public el navegador se refresca automáticamente.

JSX._

JSX es una extensión de la sintaxis de JavaScript que produce elementos de React.

Se puede usar:

• Dentro de estructuras de control como if y for.

• Asignarlo a variables.

• Aceptarlo como argumento o retorno en funciones.

• Expresiones JavaScript.

Veamos un ejemplo tomado del código que genera create-react-app:

<div className="App">
  <header className="App-header">
    <img src="{logo}" className="App-logo" alt="logo" />
    <h1 className="App-title">Welcome to React</h1>
  </header>
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload.
  </p>
</div>

JSX es similar a HTML pero con algunas diferencias importantes:

Algunas reglas importantes:

• Toda etiqueta debe cerrarse por ejemplo: <br> debera cerrarse <br/>.

• Los componentes deben devolver un sólo elemento padre.

• Algunos atributos HTML cambian como:

  • class por className.

  • for por htmlFor.

• Los atributos de un elemento JSX pueden aceptar valores de tipo String entrecomillados o expresiones JavaScript entre llaves, por ejemplo:

  

  <img alt="Avatar" src={user.avatarURL} />