Andrew Errity aerrity

Lecturer in Computing @ IADT, Dun Laoghaire

aerrity / express-mongo-example.js

Created February 21, 2019 17:08

	const express = require('express');
	const MongoClient = require('mongodb').MongoClient;
	const server = express();
	const port = 3000;

	server.get('/', (req, res) => res.send('Hello World!'));

	server.get('/api/users', (req, res) => {
	MongoClient.connect('mongodb://localhost:27017/REACTCA2', function (err, client) {
	if (err) throw err

aerrity / app.js

Created February 1, 2019 16:47

React - Searching & sorting a list of random users

	import React, { Component } from "react";
	import axios from "axios";

	class App extends Component {
	constructor(props) {
	super(props);

	this.state = { users: [], searchTerm: '', alphabetical: 'az' };

	this.handleChange = this.handleChange.bind(this);

aerrity / Comment.js

Created December 13, 2018 17:54

Solution to Comment Activity

	import React from "react";

	class Comment extends React.Component {
	constructor(props) {
	super(props);

	// Setup the state data
	this.state = {
	flagged: false
	};

aerrity / User.js

Created December 13, 2018 00:09

Styled version of User cards example - retrieves 50 random users from API

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

	// Component to represent a single User 'Card' (note: this is a class component so can use state)
	// Classes used below are from Bulma, see index.html above
	class User extends React.Component {
	constructor(props) {
	super(props);

	// Setup the state data

aerrity / User.js

Created December 13, 2018 00:04

Styled version of User cards example - with likes - in separate files

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

	// Component to represent a single User 'Card' (note: this is a class component so can use state)
	// Classes used below are from Bulma, see index.html above
	class User extends React.Component {
	constructor(props) {
	super(props);

	// Setup the state data

aerrity / index.html

Created December 12, 2018 23:55

Styled version of User cards example - with 'Like' buttons

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>React App</title>
	<!-- Load bulma for styling - Could use an alternative such as Bootstrap -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
	</head>
	<body>
	<div id="root"></div>
	</body>

aerrity / index.js

Created December 12, 2018 23:49

Unstyled version of User cards example

	import React from "react";
	import ReactDOM from "react-dom";
	// This loads data from a file named 'data.json' in the same directory
	import data from "./data";

	// Store the array of user objects in a variable
	const users = data.results; // [{user},{user}, ...]

	// Component to represent a single User 'Card' (note: this is a function component so cannot use state)
	function User(props) {

aerrity / index.js

Created December 12, 2018 14:10

React - State and props example

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

	class Clicky extends React.Component {
	constructor(props) {
	super(props);

	this.state = {clickCount: 0};

	this.handleClick = this.handleClick.bind(this);

aerrity / index.html

Last active December 12, 2018 23:40

Styled version of User cards example

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>React App</title>
	<!-- Load bulma for styling - Could use an alternative such as Bootstrap -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
	</head>
	<body>
	<div id="root"></div>
	</body>

aerrity / data.json

Created December 6, 2018 13:36

Sample user data

	{
	"results": [
	{
	"name": {
	"title": "miss",
	"first": "sara",
	"last": "cavalcanti"
	},
	"picture": {
	"large": "https://randomuser.me/api/portraits/women/8.jpg",