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

TIOBE index 2024

De Beta
El índice TIOBE (o índice de la comunidad de programación TIOBE) mide la popularidad de los lenguajes de programación. Su índice no se basa en qué lenguaje de programación es mejor, si tiene mejor perfomance, si posee escalabilidad, si es más sencillo de aprender, de usar, de implementar, etc. Sólo se basa en la popularidad. En el número de referencias ya sea en blogs, foros de consulta, etc. No necesariamente si las empresas lo están usando en alguno de sus desarrollos. Este índice es útil para darse una idea qué lenguaje está cobrando más popularidad y prestigio. Enseguida una tabla con los primeros 5 lenguajes más populares. Índice de Noviembre 2024   Nov 2024  Nov 2023  Change  Programming Language  Ratings  Change  1  1    Python  22.85%  +8.69%  2  3  +  C++  10.64%  +0.29%  3  4  +  Java  9.60%  +1.26%  4 ...
Publicar un comentario
Leer más

Programación Windows Batch (CMD)

De Dr. Lang
En esta serie de post aprenderemos cómo crear nuestros propios archivos Windows Batch. 1. ¿Por qué aprender Batch en Windows? Una de las razones es que, queramos o no, algún día tendremos que trabajar usando sistemas operativos Windows. Crear scripts nos puede servir para realizar tareas que parecen sencillas en un principio, pero que pueden llegar a ser tediosas (ej. crear múltiples carpetas, comprobar la existencia de un archivo, realizar respaldos, etc.). 2. ¿Cómo puedo crear un archivo Batch en Windows? Los archivos batch en Windows pueden ser escritos con las extensiones *.bat o *.cmd. Pueden contener una serie de comandos y secuencias de instrucciones para realizar diversas tareas. Ejemplo 1. Conocer  el nombre del usuario. usuario.bat @ echo off echo Hola %USERNAME% pause GOTO Comentario -- esto es un comentario multi línea que no se interpretará en MS-DOS -- :Comentario En el anterior ejemplo podemos ver que la variable USERNAME conti...
Publicar un comentario
Leer más