DEV Community: maryredlinger

week 4

maryredlinger — Sun, 05 Jan 2020 20:40:50 +0000

  Week 4

Coming up on finishing our first month of the bootcamp, we finally began our learning of Ruby. Ruby is the nicest language so far. Why is that? Because of MINASWAN. Matz is nice and so we are nice.

Ruby is object oriented.Everything in Ruby is an object, dynamically typed, a scripting language, and written line by line.

To simply display some text or integers in Ruby you can use 'puts', 'prints', or 'p' followed by your text or so in single quotes. If you were to pass punctuation in Ruby, you would use double quotes = "". String interpolation looks like "#{}" and Arrays appear the same as they would in JavaScript.

Ruby has a lot of methods that can be applied. Some of these methods we learned include:

lets use this as our example:

nums = [ 13, 5, 17, 4, 10, 5 ]

.length (will display the length of the array)

puts nums.length -> 6

.first (will display the first variable)

puts nums.first -> 13

.last (will display the last variable)

puts nums.last -> 5

.include? (returns a boolean regarding of that variable is included)

puts nums.include?4 -> true
puts nums.include?6 -> false

.reverse (will reverse the order)

puts nums.reverse -> [ 5, 10, 4, 17, 5, 13 ]

There is another type of methods in Ruby called mutator methods. Mutator methods change one or more of the variables in an object. Mutator methods are also known as setter methods. We can use the shovel << method to add variables to an already existing object.

Conditionals in Ruby are similar to JavaScript in terms of needing an if else and end. However, in Ruby the format is a little different. We will be using if, else, elsif, and end.

Now lets get into classes and inheritance. Some of the syntax and language we will be using is capitalizing the first letter of the class name, using 'def' to define our method, using '_' rather than camelCase, and using @ for our instance variables.

Lets take a peak at a simple Ruby code with class:

class Bike
 def set_color(new_color)
  @color = new_color
 end
 def describe
  "This bike is the color #{color}"
 end
end

bike = Bike.new
bike.set_color("Red")

puts bike.describe

#this will return " This bike is the color Red

Next topic in Ruby was class inheritance. As the internet likes to say, "in object-oriented programming, inheritance enables new objects to take on the properties of existing objects". Similar to React components, we have Ruby inheritance.

To inherit from another class we use the less than symbol showing one class taking from another like so :

class Apple < Fruit

We can apply this to our Bike class by creating multiple classes of different bike style. With multiple instance variables starting off in our Bike class, we can manipulate those variables in each of our new classes depending on our bike.

Lets take a peak of what this code would look like using a fruit example:

class Fruit

 def initialize color
  @color = color
 end

 def color
  @color
 end

 def is_sweet
  true
 end

end

class Apple < Fruit

 def initialize color
  super color + "Apple"
 end

 def spoils
  "Spoils in 7 days"
 end

end

apple_one = Apple.new("Red")
apple_one.color

-> "Red Apple"

apple_one.ist_sweet

-> true

apple_one.spoils

-> "Spoils in 7 days"

Some of the challenges we did this week included a Ruby car challenge, text based story game, and creating a task list. We also spent a day doing test driven development, TDD, in Ruby which is called RSPEC. We started by writing out our expectations for the code, running our code to fail, going back into our code writing just enough to pass, and then continuing with our testing until we have a completed code.

Ruby to me is a cleaner and easier to read form of JavaScript. It was a great week and a great way to finish out our first month

Checking out!

Week 3

maryredlinger — Tue, 31 Dec 2019 00:29:22 +0000

 Week 3

Week 3 brought us to our first introduction to React. React made sense to me early on, but it definitely took some organization when it came to classes extending each other and state.

We began our first day by learning about React components. Components are the building blocks for React. They are a JavaScript class or function that takes in an input and returns a React element. Within components you can create a class component and a function component. In React, classes and functions start with an Uppercase letter and are CamelCased.

Create React App is a file structure with codes written by others which are then given to developers to use. It makes it faster and easier for developers to write code when this command is run. We used this command to start us off on creating some React projects of our own.

Lets first look at a basic set up for a React code:

import React, { Component } from 'react',

class App extends Component{
render (){
return(

)
}
}

export default App

class Counter extends Component{
constructor(){
super()
this.state = {
counter : 0
}
}

addOne = () => {
this.setState({ counter : this.state.counter + 1 })
}

render(){
return(

Counter: {this.state.counter}

)
}
}

Thats a lot going on up there so lets break it down. The first class , App, will be where our work in Counter will be displayed. Its only purpose is to display our finished product. In our Counter class we are setting a state for counter which is 0. We then created a method called addOne which will increase the state of counter by 1 each time the method is called and hence setState the state of counter to 1 rather than 0 and so on. In our render, we are writing some html code to display the text :Counter: " followed by the current state of counter.

Now that we know a little about state, we then were introduced to props. Props are a way of passing state into even more classes and functions. We do this by calling this.props rather than this.state in the classes that do not have the constructor and super stating this.state.

Some of our challenges from this week included creating a React dice roller, treasure hunt, and TicTactToe. I had a blast learning React and working through the challenges. It was very frustrating when our code wouldn't work due to a syntax error we didn't recognize for a bit. All in all it was another good week done.

Checking out!

Week 2

maryredlinger — Mon, 16 Dec 2019 17:25:55 +0000

   WEEK 2

This week we learned about JSON objects and classes.

A JSON object is a kay value pair in a variable. An example of this would be var person = { name : “Alex”, phone : 123456789} where the key is the name and phone while the value is “Alex” and 123456789. We can access these properties with dot notation such as person.name which would display “Alex” and person.phone would display 123456789. Objects are collections of key value pairs. Calling on this. followed by the key is also a way of calling on the scope for the object of that function.

Now lets dive into Javascript Classes. Classes are the blueprint that will later be called on by extending said class through another class. Classes have a constructor which makes it run in .log and it also has data and behavior which has a new that calls on that blueprint. So lets bring this all together in an example.

// class names have to be capitalized
class Book {
//dont forget to call on your constructor so it can run
constructor() {
// we are setting the state for the current page which is 0
this.currentPage = 0
}
// when turnPage is called on the state of currentPage will increase by 1 and reassign its value from 0 to 1
turnPage() {
this.currentPage += 1
}
// when readPage is called on, it will display the string that will tell you the page you are currently on
readPage(){
return you are on #{this.currentPage}
}
}

Destructuring was also brought up this week. Restructuring is a great way to have cleaner code and makes it easier to call on a certain key value pair.

var{ name, author } = book
console.log(name, author)

we can do this similarly with dot notation

console.log(book[“name”], book[“author”])
console.log(book.name, book.author)

Getting a little deeper into class, we learned about class inheritance next. Class inheritance is a way for a child class to inherit from a parent class which is being extended. It is a very similar setup for class but we will be adding another class. Lets show a quick example of what this would look like in Javascript:

//class Bike is our parent class
class Bike {
constructor () {
this.speed = 0
}
accelerate(){
this.speed += 10
}
}

//now we are getting into the child class which is pulling from our parent class Bike
class RoadBike extends Bike {
accelerate(){
//this.speed will change from the parent which adds 10 to be specific to RoadBike which will add 20
this.speed += 20
}
applyBrakes(){
this.speed -=10
}
}

We also learned about testing with JEST and yarn. Some commands I now know are mkdir (which makes a new directory), cd (change directory), touch (create a new file), atom . (to start the cd in atom), as well are yarn add jest, yarn jest, and describe. Writing tests seemed a little backwards to me. We first start by writing a test to fail and then adding in more code to pass. This is red green refactoring. We start with the least amount of code to fail then add the least amount of code to pass. Testing is a great way to have more efficient code.

Classes gave me a bit of trouble that week. I understood the concept and how it worked but the new syntax was giving me a lot of trouble to understand at first. Writing this blog 2 weeks post learning, I am seeing how confident in class and objects I am. All in all, it was a good week. Checking out!

Lets start at the very beginning . .

maryredlinger — Wed, 11 Dec 2019 00:49:11 +0000

I am now 3 weeks into my bootcamp, so through the next 3 blogs lets recap everything I have learned thus far:

WEEK 1

Week 1 was all about an introduction to javaScript.

We started off by learning DataTypes such as number(7), string("Hello"), Boolean(true/ false), Undefined, Null, and Symbol. Type Coercion and implementing variable is what we were introduced to next. Type Coercion includes evaluating (==) or a strict evaluation (===) and seeing if the variable does not evaluate equal or true (!= or !===) with a bang(!).

Next we began learning about Arrays[] and Array Methods. Some Methods we learned include unShift(adds a value to the beginning), pop(removes the last value), reverse(reverse the order of an array), and join(converts an array into a string). We began to implement our learning by declaring a function and calling our input through the console.log to compare values, data type, and mess around with methods.

Then came the if, else, and else if statements as well as higher order functions with for loops and array methods such as .map(takes variables and index) and .filter(only gives values that name this condition to be true). We began to map and filter over arrays to return a value and did so through different challenges given to us by our instructors.

And that ladies and gentlemen wrapped up my first week at bootcamp!

I was able to comprehend a lot more than I was expecting too and also wasn't as mentally, physically, and emotionally exhausted as I thought I might be. I was excited to be there and looking forward to the week to come!

Checking Out!