Close

ReactJS : A simple example of fill table with JSON

In this Article we learn to create a simple example with framework ReactJS:

The tree of project is the following:

desarrollohidrocalido_llenartablareactjsconjson_estructura

index.html

The file index.html have the library imports and an simple tag <div></div>

datos.json

the file datos.json have data of school students in format type JSON, I recommend the plugin SublimePrettyJson for ident our JSON.

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:

In this class i render de structure <table> in our HTML

In the second class i render the structure of <body> in the object <table>.

And finally

I render all content in the main div in my HTML, the id of my <div> is root.

styles.css

A simple style for the cursos in our <table>

 

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 :

demo_desarrollohidrocalido


github_desarrollohidrocalido

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.