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