Introducción a React, instalación y creación de primera app

Resumen

Vimos los básico de JS, ya sabemos que son los condicionales, bucles, tipos de variables, consumimos una API y otras cositas más. Ahora, vamos a introducirnos en una librería que utiliza mucho JS: React.js.
Vamos a ver mínimamente los conceptos que hay que tener en cuenta sobre React, instalamos Node.js y crearemos nuestra primera aplicación en esta librería.

Podrás ver la lista de los 100 días en este enlace.

Introducción a React

React es una libreria open source diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de SPAs. Una libreria es un conjunto de herramientas que nos van a ayudar en nuestra experiencia de desarrollo. Librería no es lo mismo que framework! Cuando hablen sobre frameworks, no mencionen React o los van a asesinar jaj.
Vamos a estar desarrollando una single page application (SPA) o aplicación de página única, que es una aplicación web que cabe en una sola página con el proposito de dar una experienca mas fluida a los usuarios.
SPA nos da una impresión de que vamos a tener una página única con una sola URL, pero no es así. Vamos a poder crear varias página en una sola. Un ejemplo de web que utiliza React es en donde estoy aprendiendo esto: CourseIt.io.

Instalación

Antes poder iniciar algún proyecto en React, debemos si o si instalarnos Node.js. La versión LTS es suficiente para nosotros.

Cuando instalamos Node, también estamos instalando npm. npm significa Node Packet Manager y es una gran librería o biblioteca , que nos dá la opcion de instalar paquetes o librerías en sí. Uno de esos paquetes va a ser create-react-app.

Crear app

En alguna carpeta que queramos trabajar (recomiendo el escritorio para acceder fácil), ejecutando en consola:

npx create-react-app first-app

first-app es el nombre de nuestro proyecto y creará una carpeta con este nombre. Ahora debemos esperar a que nos genere todos los archivos necesarios.

Conceptos y ventajas

Pilares de React

• Componentes: Son bloques de códigos reutilizables
• Estado interno: Es la forma en la que manejaremos la información en el componente.
• Propiedades inmutables: Información compartida entre componentes por medio de llamados.

Ventajas de React

• Virtual DOM: React virtualiza el árbol de nodos del DOM y lo pasa JS en formato de objeto. Este es de más rápido acceso que el DOM común.
• Componentización: A partir de la creación de componentes, es mucho más fácil reutilizar código y nos dá la posibilidad de escalar nuestro proyecto.
• Templating dentro de JavaScript: El templating se escribe dentro de JS. O sea, podemos meter lógico dentro de JS.
• Hay una gran comunidad

Nuestro app por dentro:

Veremos nuestra app de React creada con los siguientes archivos y carpetas:

Trabajaremos principalmente dentro de la carpeta src.

App.js

Veremos estas primeras 3 líneas:

import React from 'react';
import logo from './logo.svg';
import './App.css';

Es MUY posible, que no tengas la primera línea. No te preocupes. Para lo que vamos a hacer no lo vamos a necesitar por ahora.
La primera línea importa React desde la librería react. En la segunda importamos una imágen (vamos a user mucho esto). Y la tercera es para importar nuestro archivo CSS.

Ahora nos toca analizar esta función:

function App() {
  return (
    ...
  );
}

Esto ya lo conocemos. Es una función que es llamada por el nombre App() y realiza acciones dentro. Lo que hay que sabes es que hay varias formas de armar los componentes (por cierto, App.js es un componente): existen los componentes funcionales y los componentes de clases. Como ya se darán una idea, los componentes están hechos con funciones como nuestro ejemplo, o con clases. Aprenderemos a crearlas con funciones por ahora.

Dentro del return, deberíamos tener esto:

<div className="App">
    <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
        Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
    >
        Learn React
    </a>
    </header>
</div>

Acá vemos lo que mencioné antes: vamos a poder meter lógica en HTML. Esto se conoce como JSX.

Por último, tendremos esta línea:

export default App;

Con esto exportaremos nuestros componentes para que puedan usarlo otros componentes.

index.js

Acá es donde vamos a mezclar React con JS. Por ahora no lo tocaremos hasta que necesitemos ver las rutas.

Resto de archivos

Vamos a observar que tenemos archivos CSS, otros que son para soporte y otros para testing.
Junto con React, vamos a poder realizar testing con una extensión llamada Jest. No sé si en este desafio de cien días pero voy a realizar posteos sobre Testing exclusivamente.

Ejercicio?

Por hoy, por falta de tiempo, no hay ejercicio. Pero, pueden ir modificando el componente App.js para ver si rompemos algo o si logramos algo copado. Mañana veremos algo más de práctica.

Día 7/100