reactjs/Ejercicio3.html at master · wcabrera/reactjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>

  <head>

    <script src="http://fb.me/react-with-addons-0.12.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.0.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  </head>

  <body>

   <div id="ejemplo"></div>

   <div class="container">
        <div id="formulario"></div>
   </div>

    <script type="text/jsx">

    var Componente = React.createClass({
          render:function(){
            return (<h1>Curso de {this.props.descripcion}</h1>);
          }
     });
    var ComponenteFormulario = React.createClass({
        render : function() {
          return React.DOM.div({
                    className:'form-group',
                    children : [

                      React.DOM.label({
                        htmlFor:'exampleInputEmail1',
                        children:this.props.etiqueta,
                        name:"Lbl"+this.props.nombre
                      }),
                      React.DOM.input({
                        type:"text",
                        className:"form-control",
                        name:"txt"+this.props.nombre,
                        placeholder:this.props.etiqueta
                        })
                    ]
                  });

        }
    });


    React.renderComponent(<Componente descripcion="React.js en Develoteca"/>,document.getElementById('ejemplo'));

    React.renderComponent(<ComponenteFormulario nombre="nombre" etiqueta="Escribe el nombre completo:"/>, document.getElementById('formulario'));

    </script>

  </body>
</html>