aerrity

import React from "react";
import ReactDOM from "react-dom";

const users = [
  { name: "Mary", age: 32, image: "https://randomuser.me/api/portraits/med/women/34.jpg"},
  { name: "John", age: 22, image: "https://randomuser.me/api/portraits/med/men/52.jpg"},
  { name: "Joe", age: 44 , image: "https://randomuser.me/api/portraits/med/men/25.jpg"}
];

// User Component - function style

aerrity

function createSecret() {
  //private variable
  let secretNum = Math.round(Math.random() * 10);

  //public function
  let guessSecret = function(guess) {
    return guess === secretNum ? 'Correct' : 'Try again';
  }

  return guessSecret;

aerrity

import React from 'react'
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Link} from 'react-router-dom';

class Home extends React.Component {
  render() {
    return(
      <div>
        <h2>Home</h2>
      </div>

aerrity

import React from 'react';
import ReactDOM from 'react-dom';

class UserProfiles extends React.Component {
  constructor(){
    super();
    this.state = {
      users: []
    };
  }

aerrity

import React from 'react';
import ReactDOM from 'react-dom';

class UserList extends React.Component {
  render() {
    const users = [{"id":1,"first_name":"Kevyn","last_name":"Charrette","email":"kcharrette0@ft.com"},
{"id":2,"first_name":"Katha","last_name":"Borham","email":"kborham1@oakley.com"},
{"id":3,"first_name":"Clareta","last_name":"Mawford","email":"cmawford2@yolasite.com"}];

    const list = users.map( u => {

aerrity

import React from 'react';
import ReactDOM from 'react-dom';

class UserList extends React.Component {
  constructor() {
    super();
    this.state = {userName: ''};
  }

  componentWillMount() {

aerrity

import React from 'react';
import ReactDOM from 'react-dom';

class Listy extends React.Component {
  render() {
    const users = ['John','Jill','Joan','Jenny'];

    // // the map iterator below is identical to this for loop
    // const list = [];
    // for(let i = 0; i < users.length; i++) {

aerrity

import React from 'react';
import ReactDOM from 'react-dom';

class Listy extends React.Component {
  render() {
    const users = ['John','Jill','Joan','Jenny'];

    // // the map iterator below is identical to this for loop
    // const list = [];
    // for(let i = 0; i < users.length; i++) {

aerrity

import React from 'react';

class UserProfiles extends React.Component {
  constructor(){
    super();
    this.state = {
      name: {title: '', first: '', last: ''},
      image: ''
    };
    // fix the this value

aerrity

[{"id":1,"first_name":"Kevyn","last_name":"Charrette","email":"kcharrette0@ft.com"},
{"id":2,"first_name":"Katha","last_name":"Borham","email":"kborham1@oakley.com"},
{"id":3,"first_name":"Clareta","last_name":"Mawford","email":"cmawford2@yolasite.com"},
{"id":4,"first_name":"Pryce","last_name":"Kytley","email":"pkytley3@netvibes.com"},
{"id":5,"first_name":"Brion","last_name":"Spofforth","email":"bspofforth4@ucsd.edu"},
{"id":6,"first_name":"Courtney","last_name":"Boagey","email":"cboagey5@unesco.org"},
{"id":7,"first_name":"Selle","last_name":"Thorald","email":"sthorald6@msn.com"},
{"id":8,"first_name":"Olenka","last_name":"Fidgett","email":"ofidgett7@toplist.cz"},
{"id":9,"first_name":"Dora","last_name":"Durdy","email":"ddurdy8@yale.edu"},
{"id":10,"first_name":"Godard","last_name":"Ledingham","email":"gledingham9@paypal.com"},