![El método Find
const numeros = [5, 12, 8, 130, 44];
const resultado = numeros.find(num => num > 10);
console.log(resultado); // 12](https://image.slidesharecdn.com/desarrolloconreact-250528133414-06b8559f/85/Desarrollo-Back-end-Con-React-y-node-pptx-23-320.jpg)
Desarrollo Back-end Con React y node.pptx
- 1. REACT JS
- 2. Que es REACT JS React es una biblioteca de JavaScript que se utiliza para construir interfaces de usuario, principalmente para aplicaciones web y móviles. Fue desarrollada por Facebook y se caracteriza por ser eficiente, flexible y fácil de usar. Su principal objetivo es facilitar la creación de aplicaciones interactivas, especialmente aquellas que requieren actualizar dinámicamente el contenido sin tener que recargar toda la página.
- 3. Instalación Paso 1. Instalar NodeJS en su ultima versión, para eso entraremos a su web oficial y descargaremos el instalador más actualizado https://nodejs.org/es/ Paso 2. Actualizar NPM, el gestor de paquetes de node, para bajarnos las dependencias más actuales: npm install -g npm@latest Paso 3. Borrar la cache de NPM: npm cache clean --force
- 4. Instalación Paso 4. Instalar Create React App, que es un interprete de consola(CLI) que nos va a permitir instalar React facilmente e incluirá webpack para la compilación y minificación del proyecto, un live reload, una estructura básica para los proyectos de ReactJS, etc, veamos como instalar este paquete: npm install -g create-react-app Paso 5.Ahora ya tenemos instalado «create react app» y ya podemos generar un nuevo proyecto de React.js Para generar un nuevo proyecto de React.js y finalmente instalarlo, entraremos al directorio donde queramos generar el proyecto de reactjs y ejecutamos este comando: create-react-app NombreDeMiProyecto O también con el comndo Npx créate-react-app nombreapp
- 5. Instalación Paso 6.Ahora entraremos al directorio de nuestro proyecto y lanzaremos el servidor local de pruebas para React: cd NombreDeMiProyecto npm start Puedes comprobar la versión de React que tienes dentro del fichero package.json. Ahora tendremos disponible la webapp de React 16 en http://localhost:3000/ y veremos nuestro proyecto corriendo, con la página de bienvenida por defecto. Con esto ya sabemos como instalar React desde cero y como generar un proyecto base.
- 6. Descargar proyecto backend node y ejecutarlo Este comando reinicia el backend para poder ejecutarlo desde cualquier parte: npm i nodemon --save-dev
- 7. Descargar proyecto react y ejecutarlo este comando inicia react en un proyecto descargado npm i react-scripts
- 8. Estructura de un proyecto REACT • public/: Contiene archivos estáticos como el index.html, donde se inyecta la aplicación React. También contiene íconos y otros archivos accesibles desde el navegador • .src/: Es la carpeta principal que contiene todo el código fuente de la aplicación React. Dentro de esta, tienes subcarpetas como: • Gitignore: se utiliza para evitar que ciertos archivos y directorios (como dependencias y archivos temporales) sean rastreados por Git.
- 9. Archivos de proyecto REACT • App.js: En una aplicación React, App.js es típicamente el componente principal donde se estructura la base de la aplicación. Es el primer componente que se monta en el DOM cuando se inicia la aplicación y se utiliza como punto de entrada para los componentes secundarios. A continuación, te explico en detalle qué hace App.js:
- 10. Archivos de proyecto REACT • Package-lock-json: contiene las dependencias instaladas. • Package-json:package.json es un archivo de configuración que se encuentra en la raíz de tu proyecto. Contiene información sobre el proyecto, las dependencias que utiliza, los scripts para ejecutar tareas y otras configuraciones relacionadas con el manejo de dependencias y el entorno de desarrollo. • Dependencias: bibliotecas o paquetes externos que tu proyecto necesita para funcionar correctamente.
- 12. Hook En React, los hooks son una característica que permite a los componentes funcionales tener estado y otras funcionalidades de React que antes solo estaban disponibles en los componentes de clase. Los hooks fueron introducidos en React 16.8 y han transformado la forma en que escribimos componentes en React, ofreciendo una manera más sencilla y poderosa de manejar el estado, los efectos secundarios y otras funcionalidades sin necesidad de usar clases. Son funciones que permiten manipular, modificar el estado de un componente o un objeto en react.
- 13. Estados Es un objeto que almacena datos internos de componentes y permite que la interfaz de usuario se actualice cuando estos datos cambian, es similar a una variable pero cuando cambia react vuelve a renderizar el componente automáticamente.
- 14. Es una extensión de javascript que permite escribir HTML dentro de código javascript. .
- 15. Variables En React, puedes crear variables de diferentes maneras dependiendo del contexto en el que las necesites. A continuación te explico cómo se pueden crear:
- 16. Variables Variables en componentes funcionales con useState En componentes funcionales, si necesitas variables cuyo valor pueda cambiar a lo largo del tiempo (como cuando un usuario interactúa con la interfaz), debes utilizar el hook useState.
- 17. Variables en componentes funcionales con useState
- 18. Variables locales en componentes (sin estado) Si solo necesitas variables locales dentro de un componente y no te importa que su valor no se actualice dinámicamente (es decir, que no sea un estado), puedes crear variables de la manera habitual en JavaScript:
- 19. Variables locales en componentes (sin estado)
- 20. Variables con useRef (para almacenar valores persistentes) Si deseas almacenar valores que persisten a través de renderizados pero que no disparan una re-renderización cuando se modifican, puedes usar el hook useRef. Este es útil cuando quieres mantener un valor, como una referencia a un DOM o un contador que no afecta el renderizado.
- 21. Variables con useRef (para almacenar valores persistentes)
- 22. El método Find El método find() en JavaScript se utiliza para encontrar el primer elemento en un array que cumpla con una condición específica. Este método devuelve el primer elemento que cumple con el test especificado en la función de callback, o undefined si no se encuentra ningún elemento que coincida.
- 23. El método Find const numeros = [5, 12, 8, 130, 44]; const resultado = numeros.find(num => num > 10); console.log(resultado); // 12
- 24. SetTimeout El método setTimeout() en JavaScript se utiliza para ejecutar una función o un bloque de código después de un cierto tiempo de espera (en milisegundos). Es una forma de retrasar la ejecución de una función.
- 26. SetTimeout console.log("Inicio"); setTimeout(() => { console.log("Este mensaje se muestra después de 2 segundos"); }, 2000); console.log("Fin");
- 27. Archivos de proyecto REACT • Package-lock-json: contiene las dependencias instaladas. • Package-json:package.json es un archivo de configuración que se encuentra en la raíz de tu proyecto. Contiene información sobre el proyecto, las dependencias que utiliza, los scripts para ejecutar tareas y otras configuraciones relacionadas con el manejo de dependencias y el entorno de desarrollo. • Dependencias: bibliotecas o paquetes externos que tu proyecto necesita para funcionar correctamente.