Documentación

# 7 React

Podemos entrar a la web oficial de Pagina de React en Español (React) (opens new window)
Podemos entrar a la web oficial de Pagina de React en Español (Legacy React) (opens new window)
Podemos entrar a la web oficial de Pagina de Vite (opens new window)
Podemos entrar a la web oficial de Pagina de Create React App (opens new window)
Podemos entrar a la web oficial de Node (opens new window)
Podemos entrar a la web oficial de NPM (opens new window)

Podemos entrar a la web oficial de GIPHY (opens new window)
Podemos entrar a la web oficial de GIPHY Developers (opens new window)
Podemos entrar a la web oficial de Netlify (opens new window)
Podemos entrar a la web oficial de Pagina de React Testing Library (opens new window)
Podemos entrar a la web oficial de Pagina de Jest (opens new window)

# ¿Qué es React?

Aviso

Master en Frameworks JavaScript: Aprende Angular, React, Vue

Master en React: Aprender ReactJS, Hooks, MERN, NodeJS, JWT+

# Enlaces utiles

En esta seccion pondremos enlaces utiles:

Notas de los proyectos

#

Importante: "Two" significa que lo hice yo mismo

# Apuntes varios

En esta seccion pondremos apuntes varios:

# Instalamos Node

Instalamos Node (opens new window) desde su web
También podemos ver las Versiones de Node (opens new window) y las Versiones de React (opens new window)

node -v
npm -v

# Instalamos React

  1. Instalamos NPM, borramos cache y desactivamos auditorias
npm install -g npm@latest  # NO USAR ESTE COMANDO, sino usar el ejecutable de la web e instalar la versión que necesites o la version LTS (El ejecutable instala Node y la version de NPM con la que viene)
npm cache clean --force
npm cache verify & npm cache clear --force
npm set audit false
  1. Se usara npx create-react-app por lo que no es necesario instalar dependencias globalmente

# aprendiendo-react-two (master-frameworks-javascript)

Notas de la instalación

  • Cuando cree este proyecto lo hice con Node 18.14.0 instala NPM 9.3.1
npx create-react-app aprendiendo-react-two  # Crear el proyecto de React sin instalar "create-react-app"

# Aparecera lo siguiente
    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template...

# Luego lo siguiente
    cd aprendiendo-react-two
    npm start  # Levantamos el proyecto

# Dependencias
    Las dependencias siempre estan instaladas en packgage.json del proyecto

    npm install  # Puedes recuperar node_modules y package-lock.json con el archivo package.json
    npm update   # Actualizar las dependencias que ya tenga, pero ademas instalara las dependencias que faltan

    npm i react-router-dom        # Instalamos react-router-dom
    npm i axios                   # Instalamos axios
    npm i react-moment            # Instalamos react-moment
    npm i simple-react-validator  # Instalamos simple-react-validator
    npm i sweetalert              # Instalamos sweetalert

# Componentes
    # Se crean manualmente

# 02-intro-javascript-cra (react-cero-experto)

Notas de la instalación

  • Cuando cree este proyecto lo hice con Node 18.14.0 instala NPM 9.3.1
  • Revisar version de React en proyecto 02-intro-javascript-cra
    • Revisar package.json -> dependencies -> react
npx create-react-app 02-intro-javascript-cra  # Crear el proyecto de React sin instalar "create-react-app"

# Aparecera lo siguiente
    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template...

# Luego lo siguiente
    cd 02-intro-javascript-cra
    npm start  # Levantamos el proyecto

# Dependencias
    Las dependencias siempre estan instaladas en packgage.json del proyecto

    npm install  # Puedes recuperar node_modules y package-lock.json con el archivo package.json
    npm update   # Actualizar las dependencias que ya tenga, pero ademas instalara las dependencias que faltan

# Componentes
    # Se crean manualmente

# 03a-counter-app-vite-pruebas-unitarias (react-cero-experto)

Notas de la instalación

  • Cuando cree este proyecto lo hice con Node 18.14.0 instala NPM 9.3.1
npm create vite  # Crear el proyecto de React sin instalar "vite"

# Aparecera lo siguiente
    √ Project name: ... 03a-counter-app-vite-pruebas-unitarias
    √ Select a framework: » React
    √ Select a variant: » JavaScript

# Luego lo siguiente
    cd 03a-counter-app-vite-pruebas-unitarias
    npm install  # Instalamos dependencias del proyecto
    npm run dev  # Levantamos el proyecto

# Dependencias
    Las dependencias siempre estan instaladas en packgage.json del proyecto

    npm install  # Puedes recuperar node_modules y package-lock.json con el archivo package.json
    npm update   # Actualizar las dependencias que ya tenga, pero ademas instalara las dependencias que faltan

# Componentes
    # Se crean manualmente

# 03b-counter-app-cra-pruebas-unitarias (react-cero-experto)

Notas de la instalación

  • Cuando cree este proyecto lo hice con Node 18.14.0 instala NPM 9.3.1
npx create-react-app 03b-counter-app-cra-pruebas-unitarias  # Crear el proyecto de React sin instalar "create-react-app"

# Aparecera lo siguiente
    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template...

# Luego lo siguiente
    cd 03b-counter-app-cra-pruebas-unitarias
    npm start  # Levantamos el proyecto

# Dependencias
    Las dependencias siempre estan instaladas en packgage.json del proyecto

    npm install  # Puedes recuperar node_modules y package-lock.json con el archivo package.json
    npm update   # Actualizar las dependencias que ya tenga, pero ademas instalara las dependencias que faltan

# Componentes
    # Se crean manualmente

# 04-gif-expert-app (react-cero-experto)

Notas de la instalación

  • Cuando cree este proyecto lo hice con Node 18.14.0 instala NPM 9.3.1

Documentación

Aprende: (opens new window)

Referencia: (opens new window)

Otros:

  • Snippets en Visual Studio Code
    • rafc
    • imr
    • imp
  • CSS en Visual Studio Code
    • Se puede ordenar las lineas alfabeticamente CTRL + SHIFT + P ----> Ordenar líneas en orden ascendente
npm create vite  # Crear el proyecto de React sin instalar "vite"

# Aparecera lo siguiente
    √ Project name: ... 04-gif-expert-app-vite
    √ Select a framework: » React
    √ Select a variant: » JavaScript

# Luego lo siguiente
    cd 04-gif-expert-app-vite
    npm install  # Instalamos dependencias del proyecto
    npm run dev  # Levantamos el proyecto

    # Otros comandos
        npm run build  # Compilamos el proyecto

    # Despliegue a producción rápido
        cd build
        http-server
        http-server -o

# Dependencias
    Las dependencias siempre estan instaladas en packgage.json del proyecto

    npm install  # Puedes recuperar node_modules y package-lock.json con el archivo package.json
    npm update   # Actualizar las dependencias que ya tenga, pero ademas instalara las dependencias que faltan

    npm install -g http-server  # Instalamos http-server ----> Despliegue a producción rápido

# Componentes
    # Se crean manualmente

← 8 Angular →