Hola Mundo React Js

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Hola Mundo React Js

Post by xacarana » Thu Sep 08, 2016 7:11 am

Prueba las extensiones en paginas como, instagram, facebook, airbnb, uber, netflix, para visualizar los componentes que usan estas páginas.

Code: Select all

<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
	<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
	<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
	<script type="text/babel">
		var Componente = React.createClass({
			getInitialState:function()
			{
				return {bandera:false};
			},
			cambiarEstado:function(){
				
				this.setState({bandera:!this.state.bandera});
			},
			render:function()
			{
				var msg = "";
				if(this.state.bandera)
				{
					msg = "Seleccionado";
				}
				else
				{
					msg = "Sin selección";
				}
				return (
					<div>
					<div>
					{msg}
					</div>
					<input type="checkbox" onClick={this.cambiarEstado} />
					</div>
					);
			}
		});
		ReactDOM.render(<Componente/>,document.getElementById("app"));
	</script>
</head>
<body>
	<div id="app"></div>
</body>
</html>
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Re: Hola Mundo React Js

Post by xacarana » Thu Sep 08, 2016 7:31 am

Práctica de componentes, en este momento están los componentes creados por separado, la próxima clase los conectamos

Code: Select all

<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
	<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
	<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
	<script type="text/babel">
		var Contenedor = React.createClass({
			getInitialState:function()
			{
				return {datos:[]};
			},
			cambiarEstado:function(){
				
				this.setState({bandera:!this.state.bandera});
			},
			render:function()
			{				
				return (
					<div>
						<Formulario />
						<Lista/>
					</div>
					);
			}
		});
		var Formulario = React.createClass({
			render:function()
			{
				return (
					<div>
					<input type="text" ref="dato" />
					<button>Enviar</button>
					</div>
				);
			}
		});
		var Item = React.createClass({
			render:function()
			{
				return <li>{this.props.children}</li>;
			}
		}); 
		var Lista = React.createClass({

			render:function(){
				var datos = [];
				for(var i=0;i<100;i++)
					datos.push(<Item>{"dato "+ i}</Item>);
				return (<ul>
				{datos}				
				</ul>);
			}
		});
		ReactDOM.render(<Lista/>,document.getElementById("app"));
	</script>
</head>
<body>
	<div id="app"></div>
</body>
</html>
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Re: Hola Mundo React Js

Post by xacarana » Tue Sep 13, 2016 7:43 am

Ejemplo listo, recuerden revisar lo que pasa con:
  • this.state
  • this.props
  • this.refs
  • this.refs.variable.value
  • Encapsular un componente, con un componente padre (wrapper)

Code: Select all

<html>
<head>
   <title></title>
   <meta charset="utf-8">
   <script src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
   <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
   <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
   <script type="text/babel">
      var Contenedor = React.createClass({
         getInitialState:function()
         {
            return {datos:[]};
         },
         onActualizarLista:function(item){
            
            var temp = this.state.datos;
            temp.push(item);
            this.setState({datos:temp});
         },
         render:function()
         {            
            return (
               <div>
                  <Formulario onActualizarDatos={this.onActualizarLista} />
                  <Lista datos={this.state.datos} />
               </div>
               );
         }
      });
      var Formulario = React.createClass({
         enviarDatos:function()
         {    
            console.log(this.refs.nombre.value);        
            this.props.onActualizarDatos({nombre:this.refs.nombre.value});
            this.refs.nombre.value = "";
         },
         render:function()
         {
            return (
               <div>
               <input type="text" ref="nombre" />
               <button onClick={this.enviarDatos}>Enviar</button>
               </div>
            );
         }
      });
      var Item = React.createClass({
         render:function()
         {
            return <li>{this.props.children}</li>;
         }
      }); 
      var Lista = React.createClass({

         render:function(){
            var datos = [];
            for(var i=0;i<this.props.datos.length;i++)
            {
               datos.push(<Item key={i}>{this.props.datos[i].nombre}</Item>);
            }
            return (<ul>
            {datos}            
            </ul>);
         }
      });
      ReactDOM.render(<Contenedor/>,document.getElementById("app"));
   </script>
</head>
<body>
   <div id="app"></div>
</body>
</html>
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Re: Hola Mundo React Js

Post by xacarana » Tue Sep 13, 2016 7:45 am

Les recomiendo ver los siguientes videos para complementar este ejercicio

Introducción a react JS


Automatización de tareas introducción



Luego, consulte como se puede integrar con react js
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply