Cómo instalar React

Cómo instalar React en su computadora de desarrollo

¿Cómo instalas React?

React es una biblioteca, por esoInstalar en pcpuede sonar un poco extraño. Quizásconfiguraciónes una palabra mejor, pero entiendes el concepto.

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

Cargue React directamente en la página web

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

En este caso, agrega 2 etiquetas de secuencia de comandos al final de labodyetiqueta:

<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>

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

Aquí cargamos React y 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 contenedores para el navegador.

Después de esas etiquetas, puede cargar sus archivos JavaScript que usan React, o incluso JavaScript en línea en unscriptetiqueta:

<script src="app.js"></script>

<!-- or -->


<script>
//my app
</script>

UsarJSXnecesitas un paso adicional: cargarBabel

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

y cargue sus scripts con el especialtext/babelTipo de Mimica:

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

Ahora puede agregar JSX en su archivo app.js:

const Button = () => {
  return <button>Click me!</button>
}

ReactDOM.render(<Button />, document.getElementById(‘root’))

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

Comenzar de esta manera con etiquetas de secuencia de comandos 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 destinado a ponerte al día con React en poco tiempo, y cualquier aplicación React que necesite superar una sola página encontrará quecreate-react-appsatisface esa necesidad.

Empiezas por usarnpx, que es una forma fácil de descargar y ejecutar comandos de Node.js sin instalarlos.npxviene connpm(desde la versión 5.2) y si aún no tiene npm instalado, hágalo ahora desdehttps://nodejs.org(npm se instala con Node).

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

Sugerencia: consulte mi tutorial de terminal OSX enhttps://flaviocopes.com/macos-terminal/Si no está 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 su amigo.

Cuando corresnpx create-react-app <app-name>,npxva adescargarel más recientecreate-react-appsuelte, ejecútelo y luego elimínelo de su sistema. Esto es genial porque nunca tendrá una versión desactualizada en su sistema, y cada vez que lo ejecute, obtendrá el último y mejor código disponible.

Empecemos entonces:

npx create-react-app todolist

Aquí es cuando terminó de ejecutarse:

create-react-appcreó una estructura de archivos en la carpeta que le dijo (todolisten este caso), e inicializó unGitrepositorio.

También agregó algunos comandos en elpackage.jsonarchivo, para que pueda iniciar la aplicación inmediatamente yendo a la carpeta y ejecutandonpm start.

Además denpm start,create-react-appagregó algunos otros comandos:

  • npm run build: para construir los archivos de la aplicación React en elbuildcarpeta, lista para ser implementada en un servidor
  • npm test: para ejecutar la suite de pruebas usandoBroma
  • npm eject: para expulsar decreate-react-app

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

Ya quecreate-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 decreate-react-app.

Cuando expulsa, pierde la capacidad de las actualizaciones automáticas, pero gana más flexibilidad en laBabelyWebpackconfiguración.

Cuando expulsa la acción es irreversible. Obtendrá 2 carpetas nuevas en el directorio de su aplicación,configyscripts. Estos contienen las configuraciones, y ahora puede comenzar a editarlas.

Si ya tiene una aplicación React instalada con una versión anterior de React, primero verifique la versión agregandoconsole.log(React.version)en su aplicación, luego puede actualizar ejecutandoyarn add [email protected], y el hilo le pedirá que actualice (elija la última versión disponible). Repita parayarn add [email protected](cambie "16.7" por la versión más reciente de React en este momento)

Código Caja de arena

Una forma sencilla de tenercreate-react-appestructura, sin instalarla, es ir ahttps://codesandbox.io/sy elija "Reaccionar".

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

Codepen

Otra gran solucion esCodepen.

Puede usar 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 excelentes para proyectos rápidos con un archivo JavaScript, mientras que los "proyectos" son excelentes para proyectos con varios 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 usa los módulos ES normalesimportsintaxis, sino más bien para importar, por ejemplouseState, tu usas

const { useState } = React

y no

import { useState } from 'react'

Descarga mi gratisReact Handbook


Más tutoriales de react:


Tech Wiki en línea!