Skip to content

Instantly share code, notes, and snippets.

View aerrity's full-sized avatar

Andrew Errity aerrity

34 followers · 1 following
View GitHub Profile
@aerrity
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
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
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
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
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
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
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
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
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
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",