Andrew Errity aerrity

Lecturer in Computing @ IADT, Dun Laoghaire

aerrity / index.js

Created December 6, 2018 12:47

React - Example of a function component and a class component

	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 / module-pattern.js

Created May 2, 2018 09:44

Example of the module pattern

	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 / react-router-basics2.js

Created March 14, 2018 10:39

	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 / react-50-random-users-solution.js

Last active November 28, 2020 22:15

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

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

aerrity / react-user-json-solution.js

Created February 17, 2018 23:17

	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":"[email protected]"},
	{"id":2,"first_name":"Katha","last_name":"Borham","email":"[email protected]"},
	{"id":3,"first_name":"Clareta","last_name":"Mawford","email":"[email protected]"}];

	const list = users.map( u => {

aerrity / react-fetch-activity.js

Last active February 17, 2018 22:54

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

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

	componentWillMount() {

aerrity / react-listy-with-keys.js

Last active February 17, 2018 22:54

React example - Using the map iterator to render lists (with keys)

	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 / react-listy.js

Last active February 17, 2018 22:53

React example - Using the map iterator to render lists

	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 / react-UserProfiles.js

Last active October 7, 2022 00:33

React example - fetch data from web API

	import React from 'react';

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

aerrity / users.json

Created February 7, 2018 12:57

Mock user data

	[{"id":1,"first_name":"Kevyn","last_name":"Charrette","email":"[email protected]"},
	{"id":2,"first_name":"Katha","last_name":"Borham","email":"[email protected]"},
	{"id":3,"first_name":"Clareta","last_name":"Mawford","email":"[email protected]"},
	{"id":4,"first_name":"Pryce","last_name":"Kytley","email":"[email protected]"},
	{"id":5,"first_name":"Brion","last_name":"Spofforth","email":"[email protected]"},
	{"id":6,"first_name":"Courtney","last_name":"Boagey","email":"[email protected]"},
	{"id":7,"first_name":"Selle","last_name":"Thorald","email":"[email protected]"},
	{"id":8,"first_name":"Olenka","last_name":"Fidgett","email":"[email protected]"},
	{"id":9,"first_name":"Dora","last_name":"Durdy","email":"[email protected]"},
	{"id":10,"first_name":"Godard","last_name":"Ledingham","email":"[email protected]"},