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:



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


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


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.


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 :



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.