Jan 01, 1970
3,146 lecturas
¿Debe agregar React a proyectos o sitios web existentes?
Demasiado Largo; Para Leer
React es el marco de JavaScript más popular del planeta. Puede usarlo para crear rápidamente aplicaciones web ricas en funciones. Le permite agregar fácilmente nuevas características a su proyecto existente. En esta publicación, encontrará la forma de agregar un componente React a una página HTML existente.
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 cargador de imágenes React que creamos en nuestro sitio.
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 nodejs.org . Debe tener al menos la versión 10 de Node.
- 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">
<!-- Here we will mount our component -->
</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
Sugerencia: ¿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.
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. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="3"></div> </p> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <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> <!-- Load our React component. --> <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> <!-- Don't use this in production: --> <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> <!-- Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React. Read this section for a production-ready setup with JSX: https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project In a larger project, you can use an integrated toolchain that includes JSX instead: https://reactjs.org/docs/create-a-new-react-app.html You can also use React without JSX, in which case you can remove Babel: https://reactjs.org/docs/react-without-jsx.html --> </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".
L O A D I N G
. . . comments & more!
. . . comments & more!
