ReactJS es una biblioteca JavaScript de código abierto potente y definitiva para diseñar interfaces de usuario increíbles para aplicaciones grandes, medianas y pequeñas de una sola página, superando todos los posibles errores y desafíos durante el desarrollo.
ReactJS es mantenido por la plataforma de redes sociales más grande del mundo, Facebook, y su subsidiaria, Instagram, y un grupo de corporaciones y desarrolladores de código abierto.
En React, la interfaz de usuario se divide en componentes reutilizables, que son piezas independientes de código que representan partes específicas de la interfaz. Estos componentes pueden contener lógica y estado propios, lo que permite crear aplicaciones escalables y fáciles de mantener.
React proporciona un DOM virtual que en realidad es falso y hace que los usuarios permanezcan dentro del "navegador falso" de React, lo que sin duda resulta en un mejor rendimiento. React no está conectado directamente al DOM para acciones rápidas. Mantiene una rápida representación en memoria del DOM que también mejora la velocidad.
React es extremadamente eficiente para la manipulación de DOM. El enfoque de ReactJS de crear su propio DOM virtual mejora la flexibilidad y el rendimiento y se ayuda a sí mismo a actualizar el árbol DOM de vez en cuando, lo que realiza actualizaciones de una manera muy eficiente.
React mejora el ranking SEO de un sitio web Uno de los principales fallos de JavaScript es que no es compatible con SEO. La razón es simple: es difícil leer aplicaciones con mucho JavaScript. Sin embargo, ReactJS soluciona este problema ya que se puede ejecutar en el servidor. Por otro lado, el DOM virtual se representará y devolverá al navegador como una página web normal.
React permite escribir JavaScript más fácilmente Ahora parece muy sencillo escribir JavaScript. Usando la sintaxis JSX se podría mezclar HTML con JavaScript. Se recomienda encarecidamente trabajar en la nueva sintaxis en lugar de escribir el código en JavaScript simple. La otra ventaja interesante de React es que no es necesario vincular bits HTML con cadenas para funcionar. Y se siente muy realista con un JSXTransformer especial.
React ofrece herramientas de desarrollo para Chrome. Es imprescindible instalar la extensión oficial de Chrome de ReactJS mientras comienzas a codificar en React.js, lo que te ayuda a inspeccionar y depurar códigos fácilmente. Una vez instalada la extensión de Chrome, puede echar un vistazo directo al DOM virtual tal como navega por un árbol DOM normal en el panel de elementos.
Instalar una app de react con node
- Asegúrate de tener Node.js instalado en tu computadora. Puedes descargarlo desde el sitio web oficial de Node.js y seguir las instrucciones de instalación para tu sistema operativo.
- Abre una terminal o línea de comandos y navega hasta la carpeta donde deseas crear tu aplicación de React.
- Ejecuta el siguiente comando para crear una nueva aplicación de React utilizando Create React App:
- Una vez que la instalación se complete, navega a la carpeta de tu aplicación:
- Ahora puedes ejecutar tu aplicación de React con el siguiente comando:
Para instalar una aplicación de React con Node, puedes seguir los siguientes pasos:
npx create-react-app nombre-de-tu-app
Reemplaza "nombre-de-tu-app" con el nombre que desees para tu aplicación.
cd nombre-de-tu-app
Reemplaza "nombre-de-tu-app" con el nombre que desees para tu aplicación.
npm start
Esto iniciará un servidor de desarrollo y abrirá tu aplicación en tu navegador predeterminado. Cualquier cambio que realices en los archivos de tu aplicación se reflejará automáticamente en el navegador.
¡Y eso es todo! Ahora tienes una aplicación de React instalada y lista para ser desarrollada. Puedes comenzar a editar los archivos en la carpeta "src" para construir tu interfaz de usuario y agregar la lógica necesaria.
Recuerda que también puedes utilizar herramientas como npm o yarn para instalar paquetes adicionales y ampliar las capacidades de tu aplicación de React.
VITE
https://vitejs.dev/ Vite es una herramienta de desarrollo de frontend de próxima generación.
Es un entorno de desarrollo rápido que se centra en la velocidad y la eficiencia durante el proceso de desarrollo.
Vite se utiliza principalmente para crear aplicaciones web modernas utilizando tecnologías como JavaScript, TypeScript, React, Vue.js y más.
Instalar una app de react con Vite
- Abre una terminal o línea de comandos y navega hasta la carpeta donde deseas crear tu aplicación de React.
- Ejecuta el siguiente comando para crear un nuevo proyecto de Vite con una plantilla de React:
- Durante el proceso de creación, se te harán algunas preguntas, como si deseas utilizar TypeScript o no. Puedes elegir las opciones que mejor se adapten a tus necesidades.
- Una vez que se haya completado la creación del proyecto, navega a la carpeta del proyecto utilizando el siguiente comando:
- A continuación, instala las dependencias del proyecto ejecutando el siguiente comando:
- Ahora puedes iniciar el servidor de desarrollo ejecutando el siguiente comando:
Para instalar una aplicación de React con Vite, puedes seguir los siguientes pasos:
npm create vite@latest nombre-de-mi-proyecto .
Reemplaza "nombre-de-tu-app" con el nombre que desees para tu aplicación.
cd nombre-de-mi-proyecto
Reemplaza "nombre-de-tu-app" con el nombre que desees para tu aplicación.
npm install
Esto instalará todas las dependencias necesarias para tu aplicación de React.
npm run dev
Esto iniciará el servidor de desarrollo de Vite y podrás ver tu aplicación de React en el navegador.
¡Y eso es todo! Ahora tienes una aplicación de React configurada con Vite. Puedes comenzar a desarrollar tu aplicación, agregar componentes, estilos y funcionalidades según tus necesidades.
Pasos para la instalación de un proyecto base
Instalar las siguientes extensiones:
- ES7+ React/Redux/React-Native snippets
- Reactjs code snippets
- HTML to JSX
1) npm create vite@latest . Inicializa un nuevo proyecto Vite en el directorio actual
- npm install Instala todas las dependencias listadas en package.json
- npm run dev Inicia el servidor de desarrollo para recarga en vivo
- npm run build Compila el proyecto para producción
- npm run preview Sirve el proyecto construido localmente para pruebas antes del despliegue
2) npm install react-router-dom Instala React Router para gestionar la navegación en la aplicación
3) npm install bootstrap@5.3.3 Instala Bootstrap versión 5.3.3
4) npm install react-icons Instala una biblioteca de íconos
en index.html agregar estas lineas despues del </title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> andes del </body> <script type="module" src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
limpiar app.css, index.css limpiar el archivo app.jsx y aplicar el rafce agregar las clases text-center py-4 y verificar si tenemos todo bien agregar el tema oscuro <body data-bs-theme="dark"> si no agregaron la clase en index.html
5) crear las carpetas pages y components dentro de src
6) crear los componentes Header.jsx, Footer.jsx y "aplicar el rafce"
- importar el navbar y un footer de bootstrap
- configurar el tema de la barra de navegacion bg-black
- adaptar el menu utilizando Link en el Header
Inicio
Nosotros
Servicios
Productos
Producto I
Producto II
Producto III
Contactos
La Diferencia entre npx create-react-app nombre-de-tu-app y npm create vite@latest nombre-de-mi-proyecto
Create React App es una herramienta oficialmente respaldada por el equipo de React que proporciona una configuración predefinida y lista para usar para crear aplicaciones de React . Proporciona una estructura de proyecto y un conjunto de scripts preconfigurados para facilitar el desarrollo de aplicaciones de React.
Por otro lado, Vite es una herramienta de desarrollo de frontend de próxima generación que se enfoca en la velocidad y la eficiencia durante el proceso de desarrollo. Vite utiliza el sistema de módulos de ES6 para servir los archivos de forma dinámica según sea necesario, lo que permite un tiempo de inicio rápido y un proceso de desarrollo ágil.
Ambas herramientas son populares y ampliamente utilizadas en la comunidad de desarrollo de React. La elección entre ellas depende de tus necesidades y preferencias personales. Si estás buscando una configuración predefinida y lista para usar, Create React App puede ser la opción adecuada. Si valoras la velocidad y la eficiencia durante el desarrollo, Vite puede ser una excelente opción.
Cuando creas una aplicación con Vite y React, la estructura de carpetas y archivos generada puede ser la siguiente:
node_modules: Carpeta que contiene las dependencias del proyecto instaladas a través de npm.
public: Carpeta que contiene archivos estáticos accesibles directamente desde la URL, como el archivo index.html y otros recursos como imágenes, fuentes, etc.
src:Carpeta principal donde se encuentra el código fuente de la aplicación.
index.html: Archivo HTML principal que sirve como punto de entrada de la aplicación.
main.jsx o index.jsx: Archivo JavaScript o JSX principal que importa y renderiza el componente raíz de la aplicación.
components: Carpeta que contiene los componentes de React utilizados en la aplicación. Debe ir dentro de la carpeta src
styles: Carpeta que contiene los archivos de estilos CSS o SCSS utilizados en la aplicación.
assets: Carpeta opcional que puede contener archivos estáticos utilizados en la aplicación, como imágenes, iconos, etc.
utils: Carpeta opcional que puede contener archivos con funciones de utilidad o lógica compartida.
package.json: Archivo de configuración de npm que contiene información sobre el proyecto y las dependencias utilizadas.
vite.config.js: Archivo de configuración de Vite que permite personalizar el comportamiento del entorno de desarrollo.
JSX es una extensión de sintaxis en JavaScript que permite mezclar código JavaScript y HTML (XML).
Es una característica clave de React, es una biblioteca de JavaScript utilizada para construir interfaces de usuario interactivas. JSX permite escribir componentes de React de una manera más intuitiva y declarativa, combinando la lógica de JavaScript con la estructura y presentación del HTML.
En JSX, puedes escribir código HTML directamente dentro de tu código JavaScript, lo que facilita la creación y manipulación de elementos de la interfaz de usuario. JSX se compila en llamadas a la función React.createElement, que crea elementos de React que se renderizan en el navegador.
Este código JSX renderiza un componente App que contiene un elemento div con varios elementos hijos. Aquí hay una explicación de cada elemento:
< h1 className='titulo'>Bienvenido al curso de</h1>: Renderiza un encabezado <h1> con el texto "Bienvenido al curso de". El atributo className se utiliza para asignar una clase CSS llamada "titulo" al elemento.
<h2>React - Vite</h2>: Renderiza un encabezado <h2> con el texto "React - Vite".
<p>Este es un ejemplo de código JSX</p>: Renderiza un párrafo <p> con el texto "Este es un ejemplo de código JSX".
<button onClick={() => console.log("Haz clic en el botón")}>Haz clic aquí</button>: Renderiza un botón <button> con el texto "Haz clic aquí". El atributo onClick se utiliza para asignar una función de manejo de eventos que imprimirá un mensaje en la consola cuando se haga clic en el botón.
En resumen, este código JSX renderiza un componente App que muestra un encabezado
