¿Cómo agregar React a un sitio web existente?

Reaccionar, creado originalmente por Facebook, es un popular interfaz de usuario JavaScript marco que se utiliza para crear aplicaciones front-end. Es uno de los marcos más populares utilizados por los desarrolladores para crear aplicaciones escalables rápidas utilizando un enfoque declarativo que vincula JavaScript con una sintaxis similar a HTML conocida como JSX.

Construyendo o configurando Reaccionar aplicaciones requiere muchas dependencias, como usar un compilador o configurar el nodo y el control de versiones, etc.Para deshacerse de lo anterior complicaciones y configuración SPA (aplicaciones de una sola página) en pasos simples, una herramienta CLI llamada crear-reaccionar-aplicación se hizo.

En este artículo aprenderemos cómo configurar su aplicación React en poco tiempo, con un enfoque más fácil y sin entrar en ninguna complicaciones. Y lo que es más, hantes de, nosotros no necesitará para configurar o instalar herramientas como webpack o Babel.

Crear-Reaccionar-APP se encargará de esas cosas con su esquema preconfigurado, de modo que solo pueda centrarse en el código y lógica empresarial.

¡Entonces empecemos!

Prerrequisitos

Línea de comando primero

Para utilizar el Reaccionar CLI (create-react-app), es bueno comprender primero la línea de comando. Se usa de muchas maneras, como iniciar la aplicación con create-react-app o usar scripts de desarrollo o proyectos de construcción.

Instalación de Node

Usaremos el administrador de paquetes de Node (npm) para iniciar o crear una aplicación, por lo que necesitaremos tener Node instalado en nuestra computadora.

Para comprobar si tienes Nodo instalado en su computadora, ejecute el siguiente comando en su terminal:

node -v

Si ya tiene Node instalado en su sistema, este comando devuelve un número de versión, como v12.18.2y si aún no está instalado, siga los pasos mencionados en Configuración de nodo localmente antes de continuar con el siguiente paso.

¿Qué surge con create-react-app?

Muchos desarrolladores usan create-react-app como un kit de inicio fácil para crear su aplicación React. Pero, sorprendentemente, muchos de ellos no saben qué viene en el kit de inicio, ni cómo podemos utilizarlo, ni por qué está ahí.!

Let’s Tomar un sumergirse profundamente y ver qué hay debajo del capó

  • Nos proporciona una estructura de carpetas de inicio recomendada.

 my-app/  //Dummy App Name 
  README.md 
  node_modules/ 
  package.json 
  public/ 
    index.html 
    favicon.ico 
  src/ 
    App.css 
    App.js 
    App.test.js 
    index.css 
    index.js 
    Logo.svg
  • Scripts para ejecutar nuestra aplicación React

Estos scripts se utilizan normalmente para iniciar, ejecutar o probar la aplicación React.

(Aprenderemos sobre estos scripts más adelante en nuestro artículo)

Posibilidad de ampliar con Sass, TypeScript, Charts y más bibliotecas.

  • Una configuración de construcción sólida con webpack y Babel
  • Scripts para empaquetar para producción
  • …un¡nd mucho más!

Pasos para ejecutar la aplicación:

Ahora que tenemos algo de contexto sobre la aplicación Create React y su uso, no perdamos más tiempo y comencemos por instalarla.

Solo hay 3 pasos para crear y ejecutar la aplicación:

  1. npm init react-app mi-nueva-aplicación
  2. npm inicio
  3. npm ejecutar compilación

Analicemos cada uno de ellos en detalle.

Paso 1: Instalar y crear una aplicación create-react

Aunque también es muy posible crear manualmente una nueva aplicación React, la comunidad de Facebook ya había creado una Paquete de nodo para create-react-app para generar una versión estándar de una aplicación React para hacernos la vida más fácil.

Hay muchas formas de instalar create-react-app. Podemos utilizar cualquiera de ellos según nos guste.

# usando npm (npm 6+)

# usando npx (npm 5.2+) o,

# usando hilo (hilo 0.25+)

Instalación de create-react-app

Que estas esperando…? Abramos la terminal y ejecutemos el siguiente comando:

// Using npm 
npm init react-app my-new-app   // my-new-app is the app name 

Podemos elegir cualquier nombre en lugar de “mi-nueva-aplicación”, con solo letras minúsculas.

Nota: Si ya ha instalado create-react-app globalmente a través de npm install -g create-react-app, se recomienda que desinstale el paquete primero. Ejecute el siguiente comando para desinstalar el mismo.

npm uninstall -g create-react-app  

Una vez que haya completado el paso anterior, obtendrá algunos consejos genéricos rápidos sobre cómo utilizar esta aplicación:

# npm start

# npm ejecutar compilación

# prueba npm

# npm ejecutar eject

Exploremos ahora todo lo que podemos hacer con nuestra nueva aplicación.

Paso 2: Ejecutar la aplicación usando React Scripts

En nuestro proyecto React podemos ejecutar algunos scripts que son útiles para las siguientes tareas:

  • Ejecutando nuestra aplicación para desarrollo
  • Construyendo nuestra aplicación para producción
  • Probando nuestra aplicación si hemos creado alguna prueba en nuestro proyecto

Los scripts se encuentran dentro del package.json, que puede ver dentro de la carpeta del proyecto.

//package.json file showing scripts block 
"scripts":  
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test", 
    "eject": "react-scripts eject" 
  ,

Todos los scripts anteriores se pueden ejecutar mediante los siguientes comandos.

// To start our app for development 
npm start 
npm run start 
yarn start 
  
// To build our app for production 
npm run production 
yarn production 
  
// To test our application 
npm run test 
  
// To Eject our application 
npm run eject

Iniciar la aplicación React

Podemos usar el “comienzo” comando para iniciar nuestra aplicación para el desarrollo. Utilice el siguiente comando para ejecutar la aplicación.

npm run start  

Este comando iniciará un servidor local (http: // localhost: 3000) y abrirá nuestra aplicación para el desarrollo en el navegador, como se muestra a continuación:

Di hola mundo

Modifiquemos un poco este texto y muestre hola mundo. Abra el archivo “App.js” de la carpeta src en su editor.

¡Elimine el div llamado App-header! Y en su lugar agregue un nuevo elemento como Hola mundo en App.js y guarde el archivo.

Debe tener un aspecto como este.

Y eso es. usted tener acaba de crear su primera aplicación React.

Sin configuración de construcción

Para transpilar nuestro código ES6 a algo que todos los navegadores puedan leer, se requiere un paquete web o un compilador.

Afortunadamente, la aplicación Create React está configurada con webpack y Babel, por lo que no tiene que configurar nada manualmente.

  • Agrupación para producción

Ahora alojemos nuestra aplicación para los usuarios. Para hacerlo, necesitamos agrupar todo nuestro código en unos pocos archivos JavaScript que el navegador puede cargar y los usuarios pueden ver la aplicación en ejecución. De nuevo hay un script conveniente proporcionado por Create-react-App.

Ejecutemos el siguiente comando y veamos cómo se crean los archivos de compilación.

// (Bundling this app for production for external servers) 
npm run build 

Una vez finalizada la compilación, tenemos un nuevo directorio llamado construir/ dentro de nuestro proyecto.

Dentro de la carpeta de compilación, hay un archivo llamado index, html, y podemos usar el mismo archivo para alojarlo en el servidor.

Para ser notado: Para construir el proyecto, estos archivos deben existir con los mismos nombres de archivo:

  • public / index.html es la plantilla de página;
  • src / index.js es el punto de entrada de JavaScript.

Es bueno saber acerca de su carpeta de compilación

>> Dentro del directorio de compilación, usted encontrará todo el código compilado y minimizado que se coloca en el estado utilizable más pequeño.

>> No importa si es legible o no, ya que no es un fragmento de código para el público.

>> Dentro del directorio build / static están todos la Archivos JavaScript y CSS.

>> En cada archivo dentro de build / static hay un hash único del contenido del archivo.

Conclusión

Create React App es un conjunto de herramientas increíble para los desarrolladores de React. Espero que ahora comprenda mejor el poder de la aplicación Create React.

Como tu han visto, hay muchas ventajas que vienen con este kit de herramientas. Podemos configurar fácilmente nuestro propio paquete web y configuraciones de Babel según nuestros requisitos. Y si queremos más soporte en términos de UI o a Cumplir con algunos requisitos comerciales, podemos agregar fácilmente soporte para cosas como Sass o TypeScript.

¿Que estas esperando? ¡Encienda ese terminal, instale la aplicación create-react-app y comience a construir sus increíbles ideas con esta base sólida!

¡Feliz aprendizaje!

  • Add Your Comment