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

Odin language: el lenguaje de programación orientado a datos para un desarrollo de software sensato

De Dr. Lang
En esta serie sobre lenguajes de programación hablamos de Odin , un lenguaje orientado a datos. Un nuevo lenguaje de programación que nos podrá recordar a lenguajes como C++, Python, Golang o hasta Rust. Instalación (Windows): 1 2 3 4 $ git clone https://github.com/odin-lang/Odin $ cd Odin $ git pull $ build.bat release Debemos asegurarnos de crear la variable de entorno: Nombre: ODIN_HOME Valor: C:\Users\HP\Documents\pruebasOdin\Odin Ejemplo 1. Como primer programa tendremos al clásico "Hola, mundo". holamundo.odin package holamundo import " core:fmt " main : : proc ( ) { fmt . println ( " ¡Hola, mundo desde Odin! " ) } Construimos: $ odin build holamundo . odin - file Ejecutamos: $ holamundo .exe Recordar que si usamos Visual Studio Code podemos instalar el plugin de Odin Language: https://marketplace.visualstudio.com/items?itemName=DanielGavin.ols Ejemplo 2. Programa que muestre las variables que pod...
Publicar un comentario
Leer más

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

z/OS, ¿Qué es? y ¿Cuáles son sus herramientas?

De Beta
  En este post veremos las herramientas de z/OS de IBM. z/OS es un sistema operativo de mainframe desarrollado por IBM.  Es parte de la serie IBM z Systems (anteriormente conocida como System z), que se utiliza en los sistemas mainframe de IBM. z/OS es uno de los sistemas operativos más utilizados en el mundo empresarial para ejecutar aplicaciones críticas y procesar grandes volúmenes de datos. Características clave de z/OS: Escalabilidad : z/OS es conocido por su capacidad para manejar grandes cargas de trabajo y escalabilidad vertical, lo que permite agregar recursos de hardware para satisfacer las demandas de procesamiento. Confiabilidad y disponibilidad : z/OS está diseñado para ofrecer alta disponibilidad y confiabilidad. Incorpora características como redundancia y recuperación ante fallas para garantizar la continuidad de las operaciones. Seguridad : Proporciona una amplia gama de funciones de seguridad, como autenticación, autorización y auditoría, para proteger los...
Publicar un comentario
Leer más