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.   <div id="medium_blog_container">      </div>  Paso 2: agregue las etiquetas de secuencia de comandos o las etiquetas de reacción  A continuación, debe agregar tres etiquetas <script> a la página HTML justo antes de la etiqueta de cierre </body>. 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 <div> 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:   <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <h2>Add React in One Minute</h2> <p>This page demonstrates using React with no build tooling.</p> <p>React is loaded as a script tag.</p> <p> This is the first comment.  <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment.  <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment.  <div class="like_button_container" data-commentid="3"></div> </p>   <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>  <script src="like_button.js"></script> </body> </html>  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.   <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>  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 <script> a su página:   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  Ahora, puede comenzar a usar JSX en cualquier etiqueta <script>. Solo necesita agregarle el atributo type=”text/babel”.  Aquí hay un ejemplo de un archivo HTML con JSX:   <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function MyApp() { return <h1>Hello, world!</h1>; } const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(<MyApp />); </script>  </body> </html>  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'; <PickerOverlay apikey={YOUR_API_KEY} onSuccess={(res) => 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:   <PickerDropPane apikey='YOUR_APIKEY'/>  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.

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Este audio es producido en el idioma original de la historia!

¿Debe agregar React a proyectos o sitios web existentes?

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Telegram: el puente de Crypto Island hacia el continente

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Telegram: el puente de Crypto Island hacia el continente

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps