Fundamentos de React y Configuración del Entorno de Desarrollo

Instalación de Node.js y npm

• Node.js: Entorno de ejecución de JavaScript que permite desarrollar y ejecutar aplicaciones tanto en el servidor como en el cliente.
• npm: Gestor de paquetes de Node.js.
• Instalación: Descargar e instalar Node.js desde su página oficial. Verificar la instalación con los comandos node --version y npm --version.

Instalación de React y React-DOM

1. Inicializar proyecto npm: Ejecutar npm init -y.
2. Instalar React y React-DOM: Ejecutar npm install react react-dom.

Crear proyecto React con Create React App

1. Instalar Create React App: npm install -g create-react-app.
2. Crear aplicación:
   • Ejecutar create-react-app mi_app.
   • Navegar a la carpeta del proyecto con cd mi_app.
3. Ejecutar la aplicación:
   • Ejecutar npm start.
   • Ejecutar npm test.

Estructura del proyecto creado con Create React App

• node_modules/: Dependencias y librerías de terceros.
• public/: Archivos estáticos como index.html y favicon.ico.
• src/: Código fuente de la aplicación.
  • components/: Componentes de React.
  • App.js: Componente principal.
  • index.js: Punto de entrada de la aplicación.
• package.json: Manejo de dependencias del proyecto.

Características de React

• DOM Virtual: React utiliza un DOM virtual para optimizar las actualizaciones del DOM real.
• JSX: Sintaxis que permite escribir HTML dentro de JavaScript.
• Propagación de datos unidireccional: Los datos fluyen de los componentes padres a los hijos.
• Aplicaciones isomórficas: Capacidad de renderizar en el servidor y el cliente.

JSX

• Sintaxis: Mezcla de HTML y JavaScript.
• Transformación: JSX se compila a JavaScript usando herramientas como Babel.
• Normas básicas: Cierre de etiquetas, uso de key en listas y manejo de errores de sintaxis.

Componentes en React

Definición

• Clases: Heredan de React.Component y deben tener un método render().
• Funciones: Devuelven elementos React y reciben props.

Propiedades y Estado

• Props: Valores de solo lectura pasados al componente.
• Estado: Controla el comportamiento y apariencia del componente durante su ejecución; se modifica con setState().

Uso de Babel

Instalación

• Instalar babel-core y babel-cli.
• Instalar babel-preset-react.

Configuración

Crear un archivo .babelrc y definir los presets necesarios.

Plugins para Visual Studio Code

• Reactjs code snippets y ES7+React/Redux/React-Native snippets: Facilitan el desarrollo de aplicaciones React.