Categorías
Desarrollo Web y Programación

Como instalar React.js en menos de un minuto

Vamos a aprender como instalar react.js en cualquier página web en menos de un minuto.

Hola, soy porfidev desarrollador full stack y en esta ocasión vamos a agregar react.js a cualquier proyecto web ya sea uno nuevo o un proyecto ya construido.

En el momento que escribo esto estamos en la versión de React.js 17, así que dependiendo de la fecha de lectura la versión puede variar, revisa la documentación oficial en español en https://es.reactjs.org/

Primero vamos a agregar las librerías necesarias para React.js, estas etiquetas van antes del cierre del </body>

<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>

Ahora vamos a agregar una librería más, está es la de babel y nos va a servir para utilizar código JSX

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Vamos a agregar un <div id="root"></div> en nuestro body, donde vamos a incrustar nuestra app de react.js

Ahora podemos crear nuestra aplicación muy sencilla, es importante mencionar que ahora nuestro script tendrá el type="text/babel" no lo olviden o de lo contrario no va a funcionar.

<script type="text/babel">
  const { useState } = React;

  const App = () => {
    const [counter, setCounter] = useState(0);
    return (
      <div>
        <h1>Hola React.js</h1>
        <button onClick={() => setCounter(counter + 1)}>
          Presioname ?
        </button>
        <div>Contador de clicks: {counter}</div>
      </div>
    );
  };

  ReactDOM.render(<App />, document.getElementById("root"));
</script>

Puedes ver el resultado del código aquí.

Y listo con esto ya podemos empezar a desarrollar nuestra pruebas con la librería React.js

IMPORTANTE: Esto solo es para desarrollo, antes de pasar a producción debemos cambiar las librerías y compilar el JSX para poder ejecutarlo.

El código completo de nuestra página HTML lo puedes ver aquí debajo o en https://gist.github.com/porfidev/22f88b982d3f2b3862b9e43914aa8bd8

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React en 1 minuto</title>
</head>
<body>
<div id="root"></div>
<script
src="https://unpkg.com/[email protected]/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/[email protected]/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const App = () => {
const [counter, setCounter] = useState(0);
return (
<div>
<h1>Hola React.js</h1>
<button onClick={() => setCounter(counter + 1)}>
Presioname 😆
</button>
<div>Contador de clicks: {counter}</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
view raw react-simple.html hosted with ❤ by GitHub

Espero que les sea una referencia rápida y útil, nos vemos en el siguiente articulo. ?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *