Cómo instalar React

Cómo instalar React en tu computadora de desarrollo

¿Cómo se instala React?

React es una biblioteca, por lo que decir “instalar” puede sonar un poco raro. Tal vez “configurar” sea una palabra más adecuada, pero ya entiendes el concepto.

Hay varias formas de configurar React para que pueda usarse en su aplicación o sitio.

Cargar React directamente en la página web

La forma más sencilla es agregar el archivo JavaScript de React directamente a la página. Esto es mejor cuando la aplicación de React interactuará con los elementos presentes en una sola página y no controlará todo el aspecto de navegación.

En este caso, agregue 2 etiquetas de script al final de la bodyetiqueta:

html ... body ... script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js" crossorigin /script script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js" crossorigin /script /body/html

La 16.7.0-alpha.2versión que aparece en los enlaces apunta a la última versión Alpha 16.7 (al momento de escribir este artículo), que tiene Hooks disponibles. Cámbiela a la última versión de React que esté disponible.

Aquí cargamos tanto React como React DOM. ¿Por qué 2 bibliotecas? Porque React es 100% independiente del navegador y se puede usar fuera de él (por ejemplo, en dispositivos móviles con React Native). De ahí la necesidad de React DOM, para agregar los wrappers para el navegador.

Después de esas etiquetas, puedes cargar tus archivos JavaScript que usan React, o incluso JavaScript en línea en una scriptetiqueta:

script src="app.js"/script!-- or --script //my app/script

Para utilizar JSX necesitas un paso extra: cargar Babel

script src="https://unpkg.com/babel-standalone@6/babel.min.js"/script

y cargue sus scripts con el text/babeltipo MIME especial:

script src="app.js" type="text/babel"/script

Ahora puedes agregar JSX en tu archivo app.js:

const Button = () = { return buttonClick me!/button}ReactDOM.render(Button /, document.getElementById('root'))

Mira este sencillo ejemplo de Glitch: https://glitch.com/edit/#!/react-example-inline-jsx?path=script.js

Comenzar de esta manera con etiquetas de script es bueno para crear prototipos y permite un inicio rápido sin tener que configurar un flujo de trabajo complejo.

Utilice create-react-app

create-react-appes un proyecto que tiene como objetivo ayudarlo a familiarizarse con React en poco tiempo, y cualquier aplicación React que necesite superar una sola página encontrará que create-react-appsatisface esa necesidad.

Comienza usando npx, que es una forma sencilla de descargar y ejecutar comandos Node.js sin instalarlos. npxviene con npm(desde la versión 5.2) y si aún no tienes npm instalado, hazlo ahora desde https://nodejs.org (npm se instala con Node).

Si no está seguro de qué versión de npm tiene, ejecute npm -vpara verificar si necesita actualizar.

Consejo: consulta mi tutorial de terminal OSX en https://flaviocopes.com/macos-terminal/ si no estás familiarizado con el uso de la terminal, también se aplica a Linux. Lo siento, pero no tengo un tutorial para Windows en este momento, pero Google es tu amigo.

Cuando ejecutes npx create-react-app app-name, npxdescargará la versión más reciente , la ejecutará y luego la eliminará de tu sistema. Esto es genial porque nunca tendrás una versión desactualizada en tu sistema y cada vez que lo ejecutes, obtendrás el código más reciente y mejor disponible .create-react-app

Empecemos entonces:

npx create-react-app todolist

Así es cuando terminó de ejecutarse:

create-react-appcreó una estructura de archivos en la carpeta que usted indicó ( todolisten este caso) e inicializó un repositorio Git .

También agregó algunos comandos en el package.jsonarchivo, por lo que puede iniciar la aplicación inmediatamente yendo a la carpeta y ejecutando npm start.

Además de npm start, create-react-appse agregaron algunos otros comandos:

• npm run build:para crear los archivos de la aplicación React en la buildcarpeta, listos para ser implementados en un servidor
• npm test:para ejecutar el conjunto de pruebas usando Jest
• npm eject:expulsar decreate-react-app

Expulsar es el acto de decidir que create-react-appya has hecho suficiente por ti, pero quieres hacer más de lo que eso te permite.

Dado que create-react-appes un conjunto de convenciones de denominador común y una cantidad limitada de opciones, es probable que en algún momento sus necesidades demanden algo único que supere las capacidades de create-react-app.

Al expulsar, se pierde la capacidad de actualizaciones automáticas pero se gana más flexibilidad en la configuración de Babel y Webpack .

Cuando expulses la acción será irreversible. Obtendrás 2 carpetas nuevas en el directorio de tu aplicación, configy scripts. Estas contienen las configuraciones y ahora puedes comenzar a editarlas.

Si ya tienes una aplicación React instalada con una versión anterior de React, primero verifica la versión agregándola console.log(React.version)a tu aplicación, luego puedes actualizar ejecutando yarn add [email protected], y yarn te solicitará que actualices (elige la última versión disponible). Repite el proceso para yarn add [email protected](cambia “16.7” por la versión más nueva de React en ese momento)

Código Sandbox

Una forma fácil de tener la create-react-appestructura, sin instalarla, es ir a https://codesandbox.io/s y elegir “React”.

CodeSandbox es una excelente manera de iniciar un proyecto React sin tener que instalarlo localmente.

Código de Pen

Otra gran solución es Codepen .

Puedes utilizar este proyecto de inicio de Codepen que ya viene preconfigurado con React, con soporte para Hooks: https://codepen.io/flaviocopes/pen/VqeaxB

Los “bolígrafos” de Codepen son ideales para proyectos rápidos con un solo archivo JavaScript, mientras que los “proyectos” son ideales para proyectos con múltiples archivos, como los que usaremos más al crear aplicaciones React.

Una cosa a tener en cuenta es que en Codepen, debido a cómo funciona internamente, no se utiliza la importsintaxis regular de Módulos ES, sino que para importar, por ejemplo useState, se utiliza

const { useState } = React

y no

import { useState } from 'react'

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cómo instalar React

Cómo instalar React en tu computadora de desarrollo Cargar React directamente en la página webUtilice create-react-appCódigo SandboxCódigo de Pen Cargar Re

programar

es

2025-01-16

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente