Instalacion de ReactJS

Pasos previos

Si ya estuviste trabajando con Angular estos pasos no son necesarios, pero conviene verificar que ya estén instalados.

• Si estás en entorno Windows te recomendamos instalarte Git Bash
• Seguimos con NodeJS, preferentemente la última versión.
• Luego NPM (Node Package Manager), con el que vamos a hacer los builds de nuestras aplicaciones.
• 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

npx

npx permite ejecutar paquetes binarios de npm mediante un command-line interface, y se instala con npm

npm install -g npx

Plugins Visual Studio Code

Dentro de Visual Studio Code, los plugins que recomendamos para trabajar con React son:

• ESLint: dbaeumer.vscode-eslint. En todos los proyectos deberías tener en el directorio raíz el archivo .eslintrc.json con la siguiente configuración

{
    "parser": "babel-eslint",
    "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 Visual Studio Code

• JEST: que permite integrar en VSC los test unitarios que vamos a ejecutar con Jest.

• Jest Runner: para ejecutar o debuggear tests unitarios contra la terminal (cuando tengamos muchos tests y el primer plugin resulte engorroso).

Crear un proyecto React de cero

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.

Links relacionados

• Temario Algoritmos III