In this Article we learn to create a simple example with framework ReactJS:
The tree of project is the following:
index.html
The file index.html have the library imports and an simple tag <div></div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="es"> <head> <title>Desarrollo Hidrocálido - Ejemplo React JS</title> <!-- BOOTSTRAP CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="root" class="container"></div> <script src="lib/react.js"></script> <script src="lib/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script type="text/json" src='js/datos.json'></script> <script type="text/babel" src="js/main.js"></script> </body> </html> |
datos.json
the file datos.json have data of school students in format type JSON, I recommend the plugin SublimePrettyJson for ident our JSON.
|
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
{ "alumnos": [{ "idAlumno": "1", "nombre": "Diego Armando Lira Rodríguez", "fecha_nacimiento": "10-10-1992", "activo": 1, "sexo": "M", "fecha_alta":"05-03-2016" }, { "idAlumno": "2", "nombre": "Héctor Iván González Castaño", "fecha_nacimiento": "21-10-1992", "activo": 1, "sexo": "M", "fecha_alta":"19-03-2016" }, { "idAlumno": "3", "nombre": "Jorge Uribe Botero", "fecha_nacimiento": "05-10-1992", "activo": 0, "sexo": "M", "fecha_alta":"11-03-2016" }, { "idAlumno": "4", "nombre": "Carlos Alberto Zárate Yépez ", "fecha_nacimiento": "22-10-1992", "activo": 1, "sexo": "M", "fecha_alta":"12-03-2016" }, { "idAlumno": "5", "nombre": "ArmidAlumno Benjamín Muñoz Ramírez", "fecha_nacimiento": "29-10-1992", "activo": 1, "sexo": "M", "fecha_alta":"25-03-2016" }, { "idAlumno": "6", "nombre": "John Jairo Duque García", "fecha_nacimiento": "07-10-1990", "activo": 1, "sexo": "M", "fecha_alta":"01-04-2016" }, { "idAlumno": "7", "nombre": "William de J Ramírez Vásquez", "fecha_nacimiento": "10-12-1989", "activo": 0, "sexo": "M", "fecha_alta":"07-01-2016" }, { "idAlumno": "8", "nombre": "Oscar Darío Gómez Giraldo", "fecha_nacimiento": "28-11-1974", "activo": 1, "sexo": "M", "fecha_alta":"09-04-2016" }, { "idAlumno": "9", "nombre": "ArmidAlumno Benjamín Muñoz Ramírez", "fecha_nacimiento": "01-18-1993", "activo": 1, "sexo": "M", "fecha_alta":"25-05-2016" }, { "idAlumno": "10", "nombre": "Bernardo Posada Vera", "fecha_nacimiento": "11-03-1995", "activo": 0, "sexo": "M", "fecha_alta":"01-05-2016" }] } |
main.js
I define the code javascrit ‘use strict’ for the mode strict in declare variables, methods and other things.
I have two class importants:
|
1 |
let Table = React.createClass({}) |
In this class i render de structure <table> in our HTML
|
1 |
let TableBody = React.createClass({}) |
In the second class i render the structure of <body> in the object <table>.
And finally
|
1 |
ReactDOM.render() |
I render all content in the main div in my HTML, the id of my <div> is root.
|
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
'use strict'; let Table = React.createClass({ getInitialState:function(){ return {} }, render: function() { return( <div className="row"> <img src="img/logo.png" /> <div className="col-md-12"> <table className="table table-striped"> <thead> <tr> <th>ID Alumno</th> <th>Nombre</th> <th>Fecha Nacimiento</th> <th>Activo</th> <th>Sexo</th> <th>Fecha Alta</th> </tr> </thead> <TableBody /> </table> </div> </div> ) } }); let TableBody = React.createClass({ getInitialState:function(){ return { alumnos : [] } }, componentDidMount: function(){ var self = this; self.serverRequest = fetch('js/datos.json') .then((res) => res.json()) .then((data) => { self.setState({ alumnos: data.alumnos }); }); }, eventoClickTr: function(oEvent, oAlumno){ alert(JSON.stringify(oAlumno)); }, render: function() { var self = this; return ( <tbody> {self.state.alumnos.map(function(alumno) { let oLblActivo; if (alumno.activo == 1){ oLblActivo = 'Activo'; } else { oLblActivo = 'Inactivo'; } return ( <tr onClick={(e) => self.eventoClickTr(e, alumno)} > <td>{alumno.idAlumno}</td> <td>{alumno.nombre}</td> <td>{alumno.fecha_nacimiento}</td> <td>{oLblActivo}</td> <td>{alumno.sexo}</td> <td>{alumno.fecha_alta}</td> </tr> ); })} </tbody> ) } }); ReactDOM.render( <Table />, document.querySelector("#root") ); |
styles.css
A simple style for the cursos in our <table>
|
1 |
td{cursor: pointer !important;} |
In the example i add an click event for print the data type JSON on alert message.
You can run the example in the following link :
