Forem: Matthew Carpenter

React - Stateless vs Stateful Components

Matthew Carpenter — Tue, 11 Dec 2018 20:33:35 +0000

Prerequisite - This tutorial is intended for beginners who have started learning React and need a better overview of components.

Component Intro

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. When building your React application you will have many different components that make up your React application. Some will likely have state changes and may even have to access your backend. Other components may just render a piece of your UI with access to props to render successfully. Below we will go though a stateful and stateless example.

Stateful - Establishes state, has methods

import React from "react";
import Show from "./show";

class Input extends React.Component {
  constructor(props) { //<----Method
    super(props);
    this.state = { //<----Initialize state
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) { //<---- Method/Set State
    this.setState({ value: event.target.value });
  }

  render() { . //<-----Method/Return JSX/HTML
    return (
      <div>
        <input
          name="firstName"
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <Show value={this.state.value} />
      </div>
    );
  }
}
export default Input;

The above is an example of a stateful component, why? Three things, we first initialize state, secondly we have methods on our constructor, and lastly we setState within our handleChange method. These are three critical pieces of a stateful component. Next let's look at a stateless component.

Stateless - Returns a part of our UI with the value from our input

import React from "react";

function Show(props) {
  return( //<----Return JSX/HTML
    <p>{props.value}</p>
    )
}

export default Show;

The above is an example of a stateless component, its just simply returning a p tag that will have the value of our input as we type. It is not setting any state, there are no methods. This is a great way to keep your react code maintainable and readable. Breaking it up into smaller components and passing props to child components. We export this component and include it the parent component. Its only job is to display the value from the input.

If this were a complete form full of inputs our code would be hundreds of lines of code. Even longer if we needed to display the values, using this method allows us to break that up being more readable and maintainable.

Thanks for reading.

Testing w/ Mocha and Chai

Matthew Carpenter — Thu, 29 Nov 2018 03:28:58 +0000

What is Mocha?

Mocha is a Javascript test framework running on Node.js and in the browser. The goal here is to give you a basic understanding of how Mocha works by writing your first test. In the example we will be creating a function that takes in 2 parameters (numbers) and returns the sum of the two parameters.

You mentioned Chai Latte?

Yes, Chai is a BDD/TDD assertion library for node and the browser. Chai can be paired with any Javascript testing framework. Chai code makes writing test more readable and easier to write. Chai also has great documentation.

Onward!

Ok, first we need to install mocha and chai. Then create a test.js file, this is where we will write our test.

npm install -g mocha chai

Next, we will require Chai in our test.js file.

const expect = require('chai').expect;

What are we even testing for?

Well, we are creating a function for some program that will take in two numbers, and return the sum of those two numbers. What happens if the numbers that are passed are string? Or an array of numbers? what if they are negative values? Well, we create cases based on this criteria than build our function to pass the tests.

Positive test

We begin by calling the function describe(), which is for grouping. Describe takes in a string and a callback. Inside describe we call it() which are our test cases. See code example below.

describe('add', function() {
  it('should return the sum of two positive numbers', function() {
    expect(add( 2, 4 )).to.equal(6);
  });
});

Now the code above should be natural and easy to read thanks to Chai. I'm describing the 'add' function. It should return the sum of two positive numbers. I expect the parameters 2 and 4 to equal 6. This is an example of a positive test.

Negative test

Next, let's add a negative test case.

describe('add', function() {
  it('should return the sum of two positive numbers', function() {
    expect(add( 2, 4 )).to.equal(6);
  });

  it('should return NaN if passed a word string', function() {
    expect(add( "hello", "pal" )).to.be.NaN;
  });
});

Array test

Let's do one more, what if the numbers that are passed are inside an array? How should we handle this? Should we throw an error or sum the numbers? Let's opt to sum the numbers and return the result.

describe('add', function() {
  it('should return the sum of two positive numbers', function() {
    expect(add( 2, 4 )).to.equal(6);
  });

  it('should return NaN if passed a word string', function() {
    expect(add( "hello", "pal" )).to.be.NaN;
  });

  it('should return the sum of an array of numbers', function() {
    expect(add([1,2,3,4,5])).to.equal(15);
  });
});

Build our function

Lastly, we need to build our function to pass the following test. Then we can run our test.js file and see if they are passing.

const add = function (num1, num2) {

  if ( Array.isArray(num1) ){
    let sum = 0;
    for ( let i = 0; i < num1.length; i++){
      sum += num1[i];
    }
    return sum;
  }
  else if ( isNaN(num1, num2) ){
    return NaN
  }

  return parseFloat(num1) + parseFloat(num2);

}

module.exports = add;

Test.js

We are going to export our function and require it in test.js.

const expect = require('chai').expect;
const add = require('./add.js');

describe('add', function() {
  it('should return the sum of two positive numbers', function() {
    expect(add(2, 4)).to.equal(6);
  });

  it('should return the sum of an array of numbers', function() {
    expect(add([1,2,3,4,5])).to.equal(15);
  });

  it('should return NaN if passed a string', function() {
    expect(add('hello', 'pal')).to.be.NaN;
  });
});

Let's run our test.js

In your command line you will need to type mocha test.js to run the following test on our function to see if they pass. If done correctly you should get three green check marks which indicate 3 passed test.

  add
    ✓ should return the sum of two positive numbers
    ✓ should return the sum of an array of numbers
    ✓ should return NaN if passed a string

  4 passing (9ms)
  1 pending

conclusion

Hey, you made it! These are the basics of TDD/BDD using Mocha and Chai. Check the links below to learn more about Mocha/Chai.

Mocha
Chai

Sequelize Model Guide

Matthew Carpenter — Fri, 16 Nov 2018 00:23:07 +0000

Introduction to ORM

ORM or Object Relation Mapping, is a process of mapping between objects and relational database systems. Think of an ORM as the translator between your objects in code and the relational representation of your data. There are several benefits to using an ORM, one of which is DRY. You write your model in only one place, and it's easier to update, maintain, and reuse your code. You also don't have to use SQL code, which can be confusing for some developers.

Insert Sequelize

Sequelize is a promised based ORM for NodeJS. It supports the dialects PostgreSQL, MySQL, SQLite and MSSQL. Sequelize is easy to read and write, it uses javascript syntax, and easy to test using mocha.

ID    Name        Phone           Address             <—— ROWS
1     John Doe    444-444-4444    123 Database St.    <—— COLUMNS
2     Jane Doe    555-555-5555    456 SQL Dr.         <—— COLUMNS
```



##Sequelize Model
A sequelize model represents a table in the database. Instances of this class represent a database row. If you're not familiar with a relational database such as SQL, think excel. A relational database is a table of rows and columns. Sequalize helps manage that table, offering synchronization, association, validation. When setting up a model i'm predefining how I would like to store my data. Let's look at an example model below and how to set one up.



````javascript
module.exports = function(sequelize, DataTypes) {

   var Todo = sequelize.define("Todo", {
       text: { //TABLE ROW
          type: DataTypes.STRING, //EXPECTING A STRING {COLUMN STRUCTURE}
          AllowNull: false, //THIS COLUMN CANNOT BE EMPTY
          validate: { //VALIDATE INFO GOING INTO THE TABLE
            len: [1, 140] //NEEDS TO BE BETWEEN 1 AND 140 CHARACTERS
          } 
        },
        complete: { //TABLE ROW
          type: DataTypes.BOOLEAN, //EXPECTING A BOOLEAN {COLUMN STRUCTURE}
          defaultValue: false //THIS COLUMN WILL HAVE A DEFAULT VALUE OF FALSE
        }
      });
      return Todo; //RETURN THE TABLE
    };
```


##Whats going on here?
To define mappings between a model and a table, use the `define` method. We then define our rows `text` and `complete`. Inside each of our objects we predefine the structure of that data we are expecting sequelize to pass to mySQL. 



##Translation Please

CREATE DATABASE todo_list;

USE todo_list

CREATE TABLE Todo(
id INTEGER AUTO_INCREMENT NOT NULL,
PRIMARY KEY(id),
text VARCHAR(255) NOT NULL,
complete BOOLEAN DEFAULT FALSE
);



*`ID` - Expecting an integer, Auto increment the ID column 1,2,3 .. etc
*The `primary key` for a table represents the column or set of columns that you use in your most vital queries. 
*`Text row`, column is expected to be a `STRING` of 255 char or less
*`complete`, column is expected to be a `BOOLEAN` with a default of `false`


##You made it! 
All in all, sequalize is an awesome library with great documentation. Not only does it help structure your data, it also helps you become a better developer. Thanks for reading.

[Sequelize Docs](http://docs.sequelizejs.com/)
[MySQL Docs](https://dev.mysql.com/doc/refman/8.0/en/)

Mongoose Schema Guide

Matthew Carpenter — Thu, 08 Nov 2018 13:22:42 +0000

Mongoose is an Object Data Modeler (ODM) for Node. It provides you with a simple validation and query API to help you interact with your MongoDB database. Think of mongoose as an organizer, when data comes back from the client, mongoose validates and structures your data based on your model(schema). You will always know how & what data is being stored in your database. Let's take a look at an example.

What is a Schema?

Above I mentioned structure and validation, this is your mongoose schema. Let say you have a sign up form on your page. You may not want to allow certain characters in the user name, or you may want to ensure the email address is valid when stored in your database.

This tutorial assumes you know how to use NPM or YARN to include mongoose in your project.

We first start by requiring mongoose.

//import mongoose NPM module
import mongoose from "mongoose";

// Save a reference to the Schema constructor `mongoose.model`
let Schema = mongoose.Schema;

Above we use the schema constructor mongoose.schema and save it in a variable called Schema.

Below we create a new Schema, and name it UserSchema.

const UserSchema = new Schema({
  // `username` must be of type String
  // `username` will trim leading and trailing whitespace before it's saved
  // `username` is a required field and throws a custom error message if not supplied
  username: {
    type: String,
    trim: true,
    required: "Username is Required"
  },
  // `password` must be of type String
  // `password` will trim leading and trailing whitespace before it's saved
  // `password` is a required field and throws a custom error message if not supplied
  // `password` uses a custom validation function to only accept values 6 characters or more
  password: {
    type: String,
    trim: true,
    required: "Password is Required",
    validate: [
      function(input) {
        return input.length >= 6;
      },
      "Password should be longer."
    ]
  },
  // `email` must be of type String
  // `email` must be unique
  // `email` must match the regex pattern below and throws a custom error message if it does not
  email: {
    type: String,
    unique: true,
    match: [/.+@.+\..+/, "Please enter a valid e-mail address"]
  }
});

Above, we are telling our Schema how to validate and store our data. We are basically saying i'm expecting the following information to come back. Your username has to be a string, it will trim all whitespace before and after your string, or throw an error if you try to submit blank.

Create your model & Export

// This creates our model from the above schema, using mongoose's model method
let User = mongoose.model("User", UserSchema);

// Export the User model
module.exports = User;

Use the model

So, you have created a simple login on the front end, and a post route on the backend to store the data in our mongoDB via mongoose. Take a look below at our post route. We create a new instance of User and pass in req.body. We create a new document in our database and send user back to the client or an error if the information is not valid.

const User = require("./userModel.js");

app.post("/submit", function(req, res) {
         /*req.body {
             username: "mongod", 
             password: "pass123", 
             email: "none@none.com"
            } 
  Create a new user using req.body (this data came from the client)*/
  let user = new User(req.body);

  User.create(user)
    .then(function(dbUser) {
      // If saved successfully, send the the new User document to the client
      res.json(dbUser);
    })
    .catch(function(err) {
      // If an error occurs, send the error to the client
      res.json(err);
    });
});

Conclusion

Ta-Da, we just created a mongoose schema and used it to validated the data being stored in our mongoDB. This is a great tool to use when building a mongoDB, you have complete control over what goes in and how its being stored when it gets there. Thanks for reading!

JavaScript Classes

Matthew Carpenter — Fri, 02 Nov 2018 14:55:55 +0000

What is a JavaScript class?

A JavaScript class is a function, which can be defined just as you would a function expression or function declaration. The class syntax has two components:

class declaration class Car {}
class expression unnamed let Car = class {}
class expression named let Car = class Toyota {}

class names should start with a capital letter

To declare a class, you use the class keyword with the name of the class ("Car"). Class expressions can be named ("Toyota") or unnamed("Car"). The name given to a class expression is local to the class's body.

The class function uses the constructor and new keywords to create templates for objects to be created. Using the class function has benefits. Write less code, avoid typos, better readability, avoid repeating yourself(DRY).

Constructor

The constructor method, which resides inside a class is used to create and initialize an object created with a class. You can only have one constructor method per class. The constructor builds your object based on predefined criteria you set. See the below example,

class Car{
    constructor(make, model, color) {
        this.make = make;
        this.model = model;
        this.color = color;
    }
}

When I call this class later the arguments I pass to it will be the make, model, and color for my Car object. The object that will be created from this will look like the example below,

const camry = new Car('Toyota', 'Camry', 'Blue');

console.log(camry);
//Car {make:"Toyota", model: "Camry", color: "Blue"}

New

The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function. The new operator essentially says hey create a new instance of this class which we built above. The constructor tells the new operator, to use the arguments that were pass in to build the object.

conclusion

Using the class function helps to create objects. What if we had to make 20 different cars that all had different colors and years! Not only would it take a while to create, we would have sooooo many lines of code to look through if we wanted to updated one.

Check out these useful resources below-
MDN Classes
JavaScript.info

TO each || !TO each

Matthew Carpenter — Mon, 22 Oct 2018 02:28:21 +0000

Hello there, if I've sucked you in with my catchy title it's for a good reason! I want to tell you about Underscore. Underscore is a library full of useful functional programming helpers. I will go through .forEach as an example. If you have not heard of Underscore, I would like to introduce it to you right now!

"Underscore helps you write code that clearly expresses your intention"

How do you mean?

Lets take our example of arr.forEach, which executes a provided function once .forEach array element.

forEach Example

const arr = [1,2,3];
arr.forEach(e => console.log(e));
//1, 2, 3

Wouldn't it be awesome if we could write it just like we said it? Let's take a look at the _.each example below. For each element in the array execute logger function.

//_.each(element, index, list)
const arr = [1,2,3];

function logger(ele){
  console.log(ele)
}
_.each(arr,logger)
//1,2,3 [1,2,3]

What about objects?

Great question! Well in the example below (spoiler alert), Underscore handles objects the same way it would an array. WOAH!

//.each(element, index, list)

const objList = { pie1: 'Apple', pie2: 'Blueberry', pie3: 'Peach'}

function logger(ele){
  console.log(ele)
}
_.each(objList, logger)
//Apple, Blueberry, Peach { pie1: 'Apple', pie2: 'Blueberry', pie3: 'Peach'}

How Sway?

Let's dive into how this is even possible. Normally we would have to use a for loop and get the value of each key in the object(see below).

const objList = { pie1: 'Apple', pie2: 'Blueberry', pie3: 'Peach'}

for(let key in objList){
  console.log(objList[key]);
}
//Apple, Blueberry, Peach

So... when we pop the hood and take a look at the engine, we find nothing more than, an if statement that checks to see if what you're passing in is an Array or Object. Followed by the appropriate for loop and a callback. See the example below. The _ object works exactly like $ object in jQuery.

const _ = {  
  each(list, callback){
    if(Array.isArray(list)){
      for(let i = 0; i < list.length; i++){
        callback(list[i], i, list);
      }
    } else {
      for(let key in list){
        callback(list[key], key, list)
      }
    }
  }

Conclusion

This is a very small part of a very vast/helpful library. In fact it's all still really new to me, as i'm not an expert JS developer. I love to write code, I love to learn new libraries, but more importantly understand whats going on underneath it all. I hope my attempt to introduce you to underscore has helped, even if its just one person. Also, you can test underscore from google chrome dev tools by, opening chrome dev tools from the Underscore.JS website.

Drop a comment let me know what you think about underscore.
also let me know if you find corrections Thanks

What in the IF is a ternary?

Matthew Carpenter — Thu, 13 Sep 2018 19:15:10 +0000

Being a "newb" to Javascript syntax can be a bit overwhelming at times. For starters, you can solve any single problem 10 different ways. Which means, you can write the syntax a few different ways to get the same result. Thats why on my latest discovery (The conditional ternary operator) it prompt: (me to write this article).

Lets dive deeper

What in the world is a ternary?

The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.

Ternary Syntax

condition ? expr1 : expr2

if the condition is true the operator returns the value of expr1; otherwise it returns the value of expr2

Lets go though some examples IF/ELSE

let age = 16;

if(age > 18){
console.log('You meet the requirement');
}else {
console.log('Not yet!');
}

same example; revised

let age = 16;

let ageRequirement = age > 18 ? 'You meet the requirement' : 'Not yet!';
console.log(ageRequirement); // 'Not yet!'

Ternary's can also have multiple conditions and expressions.

Conclusion

This is obviously a very basic explanation as to how Ternary's work. My objective is the bring awareness to those who are new to writing Javascript like me. Here is a great resource on the MDN that explains in great detail how to effectively use ternary's in your Javascript code.