Tecnologías‎ > ‎

ReactJS


Material

Instalación del entorno

Pasos previos

Si ya estuviste trabajando con Angular estos pasos no son necesarios, pero conviene verificar que ya estén instalados.
  1. Si estás en entorno Windows te recomendamos instalarte Git Bash
  2. Seguimos con NodeJS, preferentemente la última versión.
  3. Luego NPM (Node Package Manager), con el que vamos a hacer los builds de nuestras aplicaciones.
  4. El editor de texto que vamos a soportar en la cursada es Visual Studio Code (hay una versión portable si estás en una máquina sin privilegios de administrador).

Específicos de React

Dentro de Visual Studio Code, los plugins que recomendamos para trabajar con React son:
  • ESLintdbaeumer.vscode-eslint. En todos los proyectos deberías tener en el directorio raíz el archivo .eslintrc.json con la siguiente configuración

{
    "extends": "",
    "plugins": [
        "react"
    ],
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}

  • VS Code ES7 React/Redux/React-Native/JS snippets, o cualquier conjunto de comandos rápidos para Visualt Studio Code

Para crear los proyectos desde cero vamos a trabajar con CRA (Create React Application), para lo cual instalaremos npx desde una consola:

$ npm install -g npx

Crear un proyecto React

Para crear un proyecto React desde la consola Git Bash o bien desde una terminal Linux escribimos:

$ npx create-react-app nombre-de-tu-app
$ cd nombre-de-tu-app
$ npm start

Por defecto la aplicación cliente levantará en el puerto 3000. Como suele quedarse levantada aun cuando canceles la línea de comando y el navegador, te dejamos este link que te dice cómo bajar el proceso del sistema operativo para correr otro ejemplo.

Ejemplos nuestros

  • Hola-mundo: el primer ejemplo en React, contiene dos componentes
    • un contador al que podemos sumarle o restarle uno
    • un label que permite saludar a una persona (muestra cómo pasarle parámetros a un componente)
    • explica los conceptos componente, propsestado, y da una introducción al testeo unitario de componentes con Jest + Enzyme
  • Conversor: el tradicional conversor de millas a kilómetros.
    • Hay un branch conversor-inmutable que define un conversor con estado, más parecido a los ejemplos vistos anteriormente.
    • Explica el ciclo de vida mutación de estado y posterior render, testing y la arquitectura de ambas soluciones
  • Mundial 2018 - Rusia: es una serie de ejemplos que permite ir conociendo diferentes conceptos de la tecnología
  • Y por último tenés un tutorial paso a paso que desarrolla una aplicación en React, NodeJS y Firebase para mostrar charlas de una conferencia

En Internet

Comments