¿Debe agregar React a proyectos o sitios web existentes?

React es el marco de JavaScript más popular del planeta. Puede usarlo para crear rápidamente aplicaciones web ricas en funciones. Además, le permite agregar fácilmente nuevas funciones a su proyecto existente, como nuestro que creamos en nuestro sitio. cargador de imágenes React Solo necesita escribir unas pocas líneas de código. Puede hacer tu vida mucho más fácil. Pero, ¿cómo puede agregar React a un proyecto existente? ¿Cuáles son los pasos? En este post encontrarás todos los detalles. ¿Es realmente fácil agregar React a un proyecto existente? Sí, puede agregar fácilmente React a su aplicación existente. El proceso es muy simple. En esta publicación, encontrará la forma de agregar un componente React a una página HTML existente. Puede seguir el mismo método para agregarlo a su propio sitio web. Alternativamente, puede crear un archivo HTML vacío para practicar. Agregar Reaccionar al Proyecto Existente: Equipo Necesario Primero, necesita tener Node instalado en su PC. Puede obtenerlo de . Debe tener al menos la versión 10 de Node. nodejs.org A continuación, debe tener el administrador de paquetes de nodos (npm). Se instala automáticamente en su PC con Node. La versión de npm debe ser 5.2 o superior. Finalmente, necesitas tener un buen editor de código. Hay muchas soluciones disponibles en el mercado. Por ejemplo, Visual Studio Code es un editor intuitivo. Es enormemente popular entre los desarrolladores. Puedes descargarlo desde . aquí Agregue React a un proyecto o sitio web existente En esta sección, agregará un componente React para modificar una página HTML existente de su sitio web. Aquí están los pasos: Paso 1: agregar un contenedor DOM al HTML Primero, abra la página HTML que desea cambiar. Cree un elemento div vacío. Esta es el área donde usará React para mostrar los cambios. Paso 2: agregue las etiquetas de secuencia de comandos o las etiquetas de reacción A continuación, debe agregar tres etiquetas a la página HTML justo antes de la etiqueta de cierre . Las dos primeras etiquetas cargan React. El tercero carga el código de su componente. Paso 3: Crear un componente React Ahora, debe crear un archivo JS, llamado medium_post_component.js, al lado de su página HTML. Puede escribir React con JSX o sin JSX. El ejemplo que se muestra arriba no tiene JSX. Puede ejecutarse directamente en el navegador. Fíjate en estas dos líneas: Con estas dos líneas, está buscando el que agregó en el primer paso. Luego, muestra el componente React del botón "Me gusta" dentro de él. Agregue React a un proyecto existente: agregue JSX a un proyecto No necesita usar herramientas complicadas, como un paquete o un servidor de desarrollo, para agregar JSX a un proyecto. De hecho, es bastante similar a agregar un preprocesador CSS. Sin embargo, debe tener instalado Node.js en su PC. Es el único requisito. El proceso de agregar JSX es muy simple. Solo necesitas seguir estos pasos: Primero, vaya a la carpeta de su proyecto en la terminal. Ahora, ejecute el siguiente comando npm init -y Si el comando anterior falla, ejecute este comando: npm install babel-cli@6 babel-preset-react-app@3 ¡Eso es! Ha agregado con éxito una configuración JSX lista para producción a su proyecto. Agregue React a un proyecto existente: ejecute el preprocesador JSX Para ejecutar el preprocesador JSX, debe crear una carpeta, llamada "src". Luego ejecuta este comando en la terminal: npx babel --watch src --out-dir . --presets react-app/prod ¿Está viendo un mensaje de error que dice "Ha instalado por error el paquete babel"? Es posible que te hayas perdido el paso anterior. Intente realizarlo en la misma carpeta. Debería solucionar el problema. Sugerencia: No tienes que esperar a que termine el proceso. El comando mencionado anteriormente inicia un observador automatizado para JSX. Si crea un archivo llamado like_button.js en la carpeta src, el observador creará un archivo like_button.js preprocesado. Tendrá el código JavaScript simple adecuado para el navegador. Además, le permite utilizar funciones modernas de sintaxis de JavaScript. Por ejemplo, puede usar las clases sin preocuparse por dañar los navegadores más antiguos. Tenga en cuenta que npx no es un error tipográfico. Es una herramienta de ejecución de paquetes que viene con npm 5.2+. Agregue React al proyecto existente: AJAX y API Call-in React For Component Hay toneladas de bibliotecas para hacer llamadas a la API. Sin embargo, estos son los más populares: Ha podido recuperar Axios Reaccionar-Axios Use-Http React-request y más Agregue React a un proyecto existente: use Fetch para realizar llamadas HTTP en React Fetch() es una API basada en navegador. Puede usarlo para hacer llamadas HTTP. Echemos un vistazo a la sintaxis estándar de la API Fetch. let response = fetch( API_URL, .... (some more options) ); Aquí, está llamando a una función llamada getNames. Obtiene los datos. Además, obtiene otros parámetros. me gusta: Método: Te ayuda a determinar qué tipo de llamada HTTP hay Encabezado: Le permite definir encabezados de solicitud para autorización o contenido Modo: Modo define el tipo de modo, cors o no cors Cuerpo: puede usarlo para enviar datos adicionales al servidor como un cuerpo de solicitud Aquí hay un ejemplo del uso de Fetch en React: async getName(){ //With .then and .catch section let response = await fetch("https://jsonplaceholders.com/users") .then(resposne => { return response.json(); this.setState({ names:response })}) .catch(error => { console.log(error); }); } Consejos para agregar React a un proyecto existente Reutilizar un componente Es posible que desee mostrar los componentes de React en varios lugares de una página HTML. Para hacerlo, tienes que seguir estos pasos: Vaya a su archivo HTML. Luego agrega estas líneas: Add React in One Minute Add React in One Minute This page demonstrates using React with no build tooling.

React is loaded as a script tag.

This is the first comment.

This is the second comment.

This is the third comment.

Vaya a su archivo JavaScript. Inserta este código: 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked comment number ' + this.props.commentID; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } // Find all DOM containers, and render Like buttons into them. document.querySelectorAll('.like_button_container') .forEach(domContainer => { // Read the comment ID from a data-* attribute. const commentID = parseInt(domContainer.dataset.commentid, 10); const root = ReactDOM.createRoot(domContainer); root.render( e(LikeButton, { commentID: commentID }) ); }); Tenga en cuenta que el enfoque es útil cuando las partes de la página están aisladas entre sí. Pero dentro del código de React, debe usar la composición de componentes. Porque es más fácil de usar. Minificar JavaScript para producción JavaScript no minimizado puede afectar significativamente la velocidad de la página. Frustrará a los usuarios. Es por eso que necesita minimizar JavaScript antes de implementar aplicaciones React. Aumentará la velocidad de carga y la experiencia del usuario. ¿Ya ha minimizado los scripts de su aplicación? ¿Se ha asegurado de que el HTML implementado cargue las versiones de React que terminan en el archivo production.min.js? Si está listo, su sitio está listo para la producción. Si no tiene un paso de minificación para sus scripts, puede configurarlo siguiendo estos pasos: Primero, tienes que instalar Node.js Luego ejecute el siguiente comando en la carpeta de su proyecto: npm init -y A continuación, ejecute este comando: npm install terser Finalmente, es hora de minimizar un archivo. Si desea minimizar un archivo, llamado like_button.js, simplemente ejecute este comando en la terminal: npx terser -c -m -o like_button.min.js -- like_button.js Verá la creación de un nuevo archivo, llamado like_button.min.js. Contendrá todo el código minimizado. Pruebe rápidamente JSX Puede probar JSX rápidamente en su proyecto agregando la siguiente etiqueta a su página: Ahora, puede comenzar a usar JSX en cualquier etiqueta . Solo necesita agregarle el atributo type=”text/babel”. Aquí hay un ejemplo de un archivo HTML con JSX: Hello World function MyApp() { return Hello, world! ; } const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render( );  Presentamos el SDK React de Filestack filestack-react es un contenedor en filestack-js sdk. Le permite integrarse con el servicio Filestack en solo unas pocas líneas de código. Puede utilizarlo para mejorar significativamente el aspecto y el rendimiento de su cargador de archivos. ¿Cómo puedo usar React SDK de Filestack en mi aplicación? Primero, debe instalar React SDK de Filestack con este comando: npm install filestack-react A continuación, puede insertar filestack-react en su aplicación. import { PickerOverlay } from 'filestack-react'; console.log(res)} onUploadDone={(res) => console.log(res)} /> Puede usarlo para agregar sin esfuerzo varias funcionalidades. Por ejemplo, puede representar un selector de panel desplegable básico usando esta línea: Puede usar Filestack para habilitar fácilmente la carga de archivos en React. Puede encontrar los detalles aquí. Conclusión En este artículo, ha aprendido a agregar React a un proyecto existente. Además, ha conocido consejos útiles, como la reutilización de componentes y la minimización de JavaScript para la producción. Ahora, puede comenzar a aprovechar React y agregar fácilmente características sorprendentes a sus proyectos existentes. Añadir React a Proyecto Existente – Preguntas Frecuentes ¿Qué es un componente React? Los componentes son uno de los componentes básicos de React. Son bits de código independientes y reutilizables. Le permiten crear fácilmente interfaces de usuario para su aplicación. ¿Cómo puedo crear una aplicación de reacción con npx? Puede crear una aplicación de reacción con npx usando este comando: "npx crear aplicación de reacción". ¿Qué es React en la codificación? React es una biblioteca JavaScript eficiente y flexible. Le permite crear fácilmente interfaces de usuario complejas mediante el uso de piezas de código pequeñas y aisladas, denominadas "componentes". Regístrese gratis y experimente las mejores soluciones de carga de archivos para sus aplicaciones web hoy con Filestack.