map

src/App.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { Thumbnail, Navbar, ProgressBar, Nav, NavItem, NavDropdown, MenuItem, Image, Grid, Col, Row } from 'react-bootstrap';
 import { Form, FormGroup, ControlLabel, FormControl, Button, BootstrapTable, TableHeaderColumn } from 'react-bootstrap';
-import User from './components/User';
-import UserList from './components/UserList';
-import Services from './components/Services';
-import Cargando from './components/Cargando';
+import User from './Components/User';
+import UserList from './Components/UserList';
+import Services from './Components/Services';
+import Cargando from './Components/Cargando';
 
 import './App.css';
 

src/Components/Frecuentes.js

@@ -0,0 +1 @@
+import React, { Component } from 'react';

src/Data/frecuentes.json

@@ -0,0 +1,22 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Michael Carvajal",
+      "rut": "16989654-7"
+    },
+
+    {
+      "id": 2,
+      "name": "Maria Solaris",
+      "rut": "16989654-7",
+
+    },
+
+    {
+      "id": 3,
+      "name": "francisco Zuñiga",
+      "rut": "11989633-7",
+    }
+  ]
+}

src/Frecuentes.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Data } from '../src/Data/frecuentes.json';
+
+const frecuentes = ({ name, rut }) =>
+    Data.map((data =>
+    <div className="container">
+    <p>{data.name}</p>
+    <p>{data.rut}</p>
+    </div>
+    ))
+//const App = ({ message }) => <div className="message">{ message }</div>;
+
+//ReactDOM.render(<App message="TOTAL:" />, document.getElementById('app'));
+ReactDOM.render(<frecuentes/>, document.getElementById('app'));