Ir al contenido principal

React JS en un vistazo

Imagen
De Dr. Lang

 

React JS es una librería desarrollada por Facebook para aplicaciones web reactivas. Existen dos formas para desarrollar con React JS:
    1. Incluyendo un archivo *.js en tus páginas HTML o
    2. Desde la terminal con la aplicación create-react-app (de manera a similar a Angular Cli y/o Vue JS Cli). Para eso requieres tener Node JS (y por ende, NPM).

index.html 
<!DOCTYPE html>
<html>
    <head>
        <title>Aprendiendo React JS</title>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        <script>
            function inicio(){
                alert("Iniciando con React JS");
                console.log("React: ",JSON.stringify(React));
                console.log("ReactDOM: ",JSON.stringify(ReactDOM));
            }
        </script>
        <style>
            .fondo-colorido{
                background-color:black;
            }
            .texto-colorido{
                color:magenta;
            }
        </style>
    </head>
     <body onload="inicio();">
        <div id="app"></div>
      <script type="text/babel">
      const texto = "Esto es un texto colorido.";
      function Saludar(){
          return (
              <div className="fondo-colorido">
              <p className="texto-colorido">Texto: {texto}</p>
              </div>
          );
      }

        const h1 = <h1>Aprendiendo y descubriendo React <font color ='red'>JS</font></h1>;
        const lista = <ul>
            <li>React JS</li>
            <li>Vue JS</li>
            <li>Angular</li>
            </ul>;
        const titulo = "Desarrollando como un Full Stack";
        const h2 =  <h2>{titulo}</h2>;
        ReactDOM.render(h1, document.getElementById('app'));
        ReactDOM.render(lista, document.getElementById('root'));
        ReactDOM.render(h2, document.getElementById('root'));
        ReactDOM.render(React.createElement("h3",{style:{color:"cyan"}},"Para quienes odian Angular."),document.getElementById('secundario'));
        ReactDOM.render(<Saludar/>, document.getElementById('terciario'));
      </script>
        <div id="root"></div>
        <div id="secundario"></div>
        <section id="terciario"></section>
        <section>
            <a href="uno.html" title="Página 1">Uno</a>
        </section>
</body>
</html>

También podemos usar React JS instalando la herramienta CREATE-REACT-APP. Instalando create-react-app 
$ npm -v
$ npm install -g create-react-app
Creando proyecto:
$ npx create-react-app proyecto
$ cd proyecto
$ npm start
Abrimos navegador http://localhost:3000/
En próximos post hablaremos más de React JS.

Enlaces:
https://es.reactjs.org/

https://create-react-app.dev/
Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Programación Windows Batch (CMD) parte 3

De Dr. Lang
Crear ciclos para efectuar operaciones tediosas nos ahorrará tiempo para realizar otras tareas. En está ocasión veremos ciclos con FOR . ¿Cuál es la síntaxis de bucle FOR en Windows Batch? Si está dentro de un archivo *.bat : FOR %%variable IN (seq) DO operaciones Si lo ejecutamos en una terminal: FOR %variable IN (seq) DO operaciones Ejemplo 1 . Recorrer una secuencia de números del 0 al 5: recorrer.bat @ echo off FOR %%i in ( 0 1 2 3 4 5 ) DO echo Hola no. %%i pause Nos imprimirá en pantalla: Hola no. 0 Hola no. 1 Hola no. 2 Hola no. 3 Hola no. 4 Hola no. 5 ¿Puedo usar contadores? Si, se pueden usar. Ejemplo 2 . Uso de contadores: contador.bat @ echo off set numeros = 1 2 3 4 5 6 7 8 9 10 set cont = 0 for %%a in ( %numeros% ) do ( echo Hola no. %%a :: Contador set /a cont+ = 1 ) echo Total: %cont% Este código nos imprimirá, además de los mensajes Hola no. 0 ..., el total de valores conta
3 comentarios
Leer más

Programación Windows Batch (CMD) parte 4

De Dr. Lang
Siguiendo con la serie de post sobre programación ( 1 , 2 , y 3 ) batch ahora veremos algunas cosas como operaciones aritméticas, operadores lógicos  y uso de ficheros. Cuando somos administradores de servidores o desarrolladores muchas veces tenemos que realizar tareas que nos quitan, relativamente, tiempo valioso que podríamos ocupar para otras cosas (como ver nuestro Facebook, jeje, broma).  Aprender a escribir scripts que nos faciliten algunas tareas siempre es útil. Por ejemplo, conocer todas las características técnicas de nuestro equipo de cómputo nos servirá cuando se realiza peritajes informáticos y soporte al equipo. Realizar respaldos automáticos a nuestras carpetas , archivos y directorios será más sencillo gracias a un script. Pero antes debemos aprender lo básico de la programación en batch. Ejemplo 1. Operaciones aritméticas básicas. aritmetica.bat @ echo off ::Nombre del archivo, imprimirá: aritmetica.bat echo %0 :: Set nos servirá para asignar va
Publicar un comentario
Leer más

COBOL para principiantes #1

De Dr. Lang
COBOL es un lenguaje de programación que sigue dando de que hablar. Los programadores Java, C#, Python, etc. saben que aún existen aplicaciones hechas en COBOL y es difícil que éstas migren a un lenguaje más actual. Es por esa y otras razones que muchos han pensado en aprender este lenguaje 'obsoleto'. ¡COBOL is the king, no ha muerto! ¡A desempolvar los libros de nuestros abuelos, tíos o maestros! ¿Qué debemos hacer para aprender COBOL y no morir en el intento? Para empezar necesitas: Tener bases de programación (obvio). Conseguir un compilador dependiendo del sistema operativo que uses (si usas Windows puedes usar Visual Studio e instalar un compilador; si usas Linux puedes usar Gnu OpenCOBOL, nosotros usaremos éste último en el blog ). Saber qué extensión se usa para crear un programa COBOL (.cb, cbl, .cb). Nosotros usaremos .cbl  Comprender la estructura de un programa COBOL.  Conocer las estructuras de control y estructuras de datos en COBOL. Practicar.
2 comentarios
Leer más