React Lifecycle Methods

Some examples on lifecycle methods for react

by ddrraaggaa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="root">
</div>

CSS

.search-bar {
  position: relative;
  margin: 1em 0;
}

.search-bar > input {
  border-radius: 4px;
}

.search-bar > i.glyphicon-search {
  position: 'absolute';
  right: 1.5em;
}

.message {
  margin: 1em;
}

table {
   font-size: 10px;
   border-collapse: collapse;
   width: 100%;
   table-layout: fixed;
}

body {
  padding: 1em;  
}

thead > tr {
  border-bottom: 1px solid #000;
}

tr:nth-child(even) {
  background-color: #eee;
}

td {
  border-right: 1px solid #000;
  padding: 0.25em 0.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr > td:last-child {
  border-right: none;
  margin-right: 1px;
}

.pagination-bar {
  text-align: center;
  margin: 0.5em 0;
}

.pagination-bar > * {
  display: inline-block;
  margin: 0 1em;
}

.pagination-bar > i[class*="glyphicon-arrow-"] {
  cursor: pointer;
}
.pagination-bar > i[class*="glyphicon-arrow-"] {
  cursor: pointer;
}

Babel + JSX

//============= SET UP (MOCK DB CALLS) =================== //
faker.seed(123) // Sets a seed for the faker library for consistent generated data

// Generates a fake phonebook entry
function generateEntry() {
	var firstName = faker.name.firstName()
  var lastName = faker.name.lastName()
	return {
  	name: `${lastName}, ${firstName}`,
    address: faker.fake("{{address.streetAddress}} {{address.city}}, {{address.stateAbbr}}. {{address.zipCode}}"),
    phone: faker.phone.phoneNumberFormat(),
    email: faker.internet.email(firstName, lastName)
    }
}

// Create a fake address book with 200 contacts
var contactList = []
for (let i = 0; i < 200; i++) {
	contactList.push(generateEntry())
}
contactList.sort((c, n) => c.name.localeCompare(n.name))

// Mock out API calls to return the 
// generated contact List
var fetchContacts = (function(mockData) {
	return function(limit, offset, query) {
  	// If query exists, filter by it
    var filteredData = mockData
    if (query) {
    	filteredData = mockData.filter(el => query ? el.name.toLowerCase().startsWith(query.toLowerCase()) : true)
    }
  	// Initialize limit and offset
    limit = limit || (limit === 0 ? 0 : filteredData.length)
    offset = offset || 0
    
    // The data to return
    var result = filteredData.slice(offset, limit + offset)
    return new Promise((resolve, reject) => {
      $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/echo/json/',
        data: {json: JSON.stringify(result)},
        success: (data) => resolve(data),
        error: (err) => reject(err)
      })
    })
   }
})(contactList)

//=============== REACT APP =====================//
// The top-level app component. This holds the state 
// shared between all of the child components, and handles
// the pagination and search logic. 
// In a "real" application, the state could be handled
// outside of React using the Redux or Flux libraries
class App extends React.Component {
	constructor(props) {
 ...