Forem: Austin

Deploy a Basic React Project to Amazon AWS EC2

Austin — Mon, 17 Apr 2023 22:05:40 +0000

So you want to deploy your React application to AWS...

This guide provides a basic overview of configuring and deploying an Amazon Web Service (AWS) Elastic Compute Cloud (EC2) instance and deploying an existing React application on a github repo using git.

Instructions to Provision an EC2 Instance:

Step 1:
Create an AWS account: https://aws.amazon.com/

Step 2:
Navigate to your "Console Home" dashboard, which should look like this:

(you can also customize the appearance of your "Console Home"

Step 3:

From your "Console Home" dashboard, select "Launch a Virtual Machine"

This will take you to the EC2 Launch an Instance page from where you will configure your virtual machine.

Let's pause for a moment here and give an overview of what the "Launch an instance" dashboard provides.

From this page, AWS provides you with the ability to customize what you need (or want) your cloud machine's specifications to be. Here, you'll be able to select an operating system (OS), the size of hardware (both storage size and compute size).

Put more analogously, it's akin to going to Apple.com to spec out a mac (Model, Color, Processor, SSD, etc.) - but at a far more granular level.

Let's keep going...

Step 4:
Name your web server. In this example, I've named my instance "Blog React App".

Step 5:
Select an Amazon Machine Image (AMI) - what OS (and other software) you want the machine to have from the jump. There are several "standard" options: Amazon Linux, Ubuntu, Windows, Red Hat. For this example, I selected Ubuntu. You can also search for other AMIs that have been created to support AWS users, with various pre-configured software out of the box.

Additionally, as you become a regular user of AWS and find yourself developing regularly with js or python on ubuntu or linux machines, you can create custom AMIs to your specifications so that you can create (or "spin-up") new EC2 instances for new development work.

Step 6:
Select and Instance Type. This is your processor. With a new account, AWS provides their t2.micro instance for free (there is a limit on this so make sure to check your usage!). Depending on what you're doing on the instance, you may need a larger instance type.

Since we're just deploying a basic React app, I've selected the base t2.micro option.

Step 7:
You are advised to create a Key pair. This is a security step for authenticating the user and AWS instance.

I've created a key, and titled it "blog-key"
Since I'm using a mac, I've chosen the "RSA" Key pair type and .pem format since I plan to SSH into the instance from a terminal on my laptop.

When you click "Create new Key pair", the .pem file will automatically download onto your laptop.

You can save this file anywhere on your laptop, but you'll need to reference the path to the file in just a bit.

Step 8:

Next is configuring the security group. This is a challenge for many AWS users, seasoned and new alike. AWS gives you the ability to permit the traffic you want to allow to your EC2 instance.

If this is your first time setting up EC2, you'll be prompted to create a security group. A security group is AWS's name for the network settings you want to configure together that will be applied to a specific instance.

For this instance, I'll go ahead an select "create a new security group". I want to be able to SSH into the instance, so I've selected "Allow SSH traffic from" and set the IP range to anywhere.

I also want the instance accessible after I've deployed my React app, so I'm also going to allow HTTP and HTTPS access from the internet.

NB: I'm not an expert on network settings, and setting IP ranges and opening ports for access is itself another area of learning. Since this blog post is about getting a bare bones EC2 instances set up and running with an app, I don't dive deeply into network and security settings. However, if you plan on deploying an app for production or with sensitive data, you should be advised to take care in setting your network settings and security.

**We will not be configuring Storage or adding any Advanced Details

Step 9:

Click the orange "Launch Instance" button

It may take a few seconds to a few minutes for the instance to successfully launch and be available (keep in mind, your request for an EC2 instance has to be sent over your internet network to AWS, which then has to "provision" that machine with the specifications. This can take some time).

If the provisioning is successful, you should see this:

Step 10:

Click on "Instances" - this will take you to another dashboard that shows you all the current instances running under your account.

(we only see one instance running - the one we just set up - which is accurate for my account)

Step 11:

Click on the "instance id" - that will take you to a new page that will show you information about just that specific instance.

This page shows you the IP addresses and various other details about the instance.

Step 12:

Click "Connect". This will take you to the "Connect to instance" page where you'll find information on how to connect to the instance from your laptop.

We're going to going to use SSH to connect, so we'll click on that tab:

You can follow the instructions on the page, or do the following;

Open a command terminal on your computer
Find your private key file (the .pem file we created earlier)
Run this command: chmod 400 blog-key.pem (you would change "blog-key.pem" to the name of your pem file)

If the command is successful, you should see a new command line returned

Now we're ready to connect to our EC2 instance!

Get the Public DNS address from the Connect page.

Then, in your command terminal, use this ssh command:

ssh -i "blog-key.pem" ubuntu@ec2-13-57-255-249.us-west-1.compute.amazonaws.com

If the SSH connection is successful, you should expect to see something like this:

Configuring the Provisioned Instance

Ok. Now we're in the instance, but we're not done yet.

The instance you've been provisioned has ubuntu installed on it, but it won't have all the software you need on it to run a React application. This is going to be true for any other software you might want to run on this or any other instance. Remember how you had to install Node, Ruby, Python to be able to run it on your laptops? The same is true on EC2.

btw: you can navigate the EC2 instance just as you would your local machine on the command line (e.g. cd, ls, mkdir, etc.)

To end an SSH session from the client side, you can type these keys in sequence: , + , then :

Here's a short checklist of the packages we'll need:

apt
git
Node (and npm)
nginx

Let's start by checking a few things.

Run command: sudo apt update

Let's break this down:

The prefix "sudo" tells the instance that you're executing a command as "root" and we're updating "apt" which is ubuntu's package management tool.

Here are the official description and reference links:

sudo: Sudo (su “do”) allows a system administrator to delegate authority to give certain users (or groups of users) the ability to run some (or all) commands as root or another user while providing an audit trail of the commands and their arguments.
apt: apt (Advanced Package Tool) is the command-line tool for handling packages. It provides a command line interface for the package management of the system.

git should come out of the box on the ubuntu, but we can check if it's there with this command: git --version

If git is installed, you'll see the version number; otherwise you'll get a message to install git.

Run sudo apt install git

Install the webserver nginx:

sudo apt-get install nginx -y
nginx -v
sudo systemctl restart nginx

Finally, let's install node and npm. I had some trouble running the standard install command, and found this recommendation on stakoverflow:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

If you'd like, go ahead and check that the packages are installed and that the versions are correct:

node -v 
npm -v

Ok! Now to get our project onto the server (our EC2)

Navigate to this directory:
cd /var/www/html/

We're going to add our project here.

Run a git clone command to clone your React repo into this directory:

git clone <github http address>

Now, cd into the project directory.

Run npm install

Once the installation is complete, you can start the React application!

npm start

If the build is successful, you should see something like this:

Of course, we now want to see the site from a web browser!

Let's go back to our instance summary dashboard.

Find the Public IPv4 address at the top of the page:

Copy and paste that address into a browser and see if we get our React app:

We're hitting the nginx welcome page, and not our React app! However, seeing this page means that the web server is running correctly AND we're able to access the instance from the world wide web!

To get to the React app, we need to specify the port that the app is running on in the web address. In our case, it's port 3000.

http://13.57.255.249:3000/

However, this address will error out.

This is because we have not allowed that port to be publicly accessible in our network settings.

We have to go back to our instance summary page, and select the "Security tab"

Click on the "Security group" - this will take you to the config page for the security group.

Click "Edit Inbound Rules", then on the edit page, Click "Add rule"

Type Select "Custom TCP"
Port Range Type "3000"
Source Select "Anywhere-IPv4"

Then the orange "Save Rules".

Now, try navigating again to http://13.57.255.249:3000/in your browser (note: it could take a brief moment for the rules to update)

You should see your app, which in this example, is the out of box new React application welcome page:

What are Elements?

Austin — Sun, 19 Mar 2023 20:52:45 +0000

const array1 = [1, 4, 9, 16];


// Pass a function to map
const map1 = array1.map(x => x * 2);


console.log(map1);
// Expected output: Array [2, 8, 18, 32]

What is the ‘x’ in the map method above?

When I started learning to code, this was the single biggest head scratcher that I had to contend with as I was trying to understand the syntax of array methods.

The ‘x’ in the above example is referred to as the “element” - the current element being processed in the array.

So, what is an element? And why is it represented as an ‘x’? And why is that position occupied by a different letter (or word?!) in other examples of the same method usage?

The definition provided by the MDN documentation for the Array.prototype.map() isn't all that great in explaining exactly what an "element" is... here's their definition:

#element: #The current element being processed in the array.
I hadn't realized that MDN was so into tautologies...

Now, this definition is probably very clear to seasoned developers who just need the quick refresh on what they're looking at. That's not usually the case for people starting out in their coding journeys.

Put simply (and perhaps not particularly accurately), the letter or word put in the place for the "element" represents the specific position object/variable that the method is acting on for the iteration.

In a map function, we give the function an array to "map" through, meaning, we want the method to go through each instance/variable (re:element) in that array, one-by-one, and do something to it. For the map function to go through each of the items in the array, it needs to be able to "hold" that particular instance (or element) as it performs the map job that we want it to do for our code.

Let's go back to our original map example:

// we have array1 that we want to perform a map function on.
const array1 = [1, 4, 9, 16];


// we write the map function:
const map1 = array1.map(x => x * 2);

note the "x" - as the map function literally "maps" through Array1, going one-by-one through the array, the "x" we defined as the element is the first array position, with the value of 1
then "x" is the second array position, with the value of 4, and keeps going until it reaches the end of the array.

let's visualize in more detail:

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2)


Array1[0] :     1 => 1 * 2  = map1[0] = 2
Array1[1] :     4 => 4 * 2  =  map1[1] = 8

…and so forth…

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

But guess what? You can give the element any value you want! You could name the element "itSortaMakesSenseNow" * and it'll still work! (Try it out for yourself on Replit)

const map1 = array1.map(itSortaMakesSenseNow => itSortaMakesSenseNow * 2)

*NB: This is NOT recommended.

The same thing is true in Ruby syntax:

def map_through_array
   array = [1,2,3]
   array.map { |n| n * 2 }
end
# output:  [2, 4, 6]

You could instead sub out n for “number”

def map_through_array
   array = [1,2,3]
   array.map { |number| number * 2 }
end
# output:  [2, 4, 6]

So you have a fair bit of flexibility when it comes to how you name your elements. Certainly for the array methods at our disposal (i.e. Array.find(), Array.filter() ) you can name the element however you want.

That said, you do want to keep your code reader friendly, and when you do see well-written code, you’ll find that the elements are typically single letters (minimizing the amount of bits in the code) and relatively intuitive for the function. In the examples above, since we were mapping through an array of numbers to perform a mathematical function, using the element name “number” or “n” for short makes sense. It’s best not to use a long string such as “itSortaMakesSenseNow”. We’d probably come to regret that later.

Additionally, there are conventions that already exist, are considered a standard, and should be generally respected by coders.

A very good example is when building migration files for Ruby on Rails databases:

If you navigate to a Rails migration file, you’ll see something like this:

class CreateExample < ActiveRecord::Migration[6.1]
 def change
   create_table :examples do |t|
     t.string :title
     t.string :example
     t.integer :rating
     t.timestamps
   end
 end
end

You could ostensibly change the |t| to be |q| and the following attributes and columns to

q.string : title 
q.string : review

And still get your database columns built correctly, but that’s not the standard convention.

Happy coding!

Rails Shortcuts for Novices

Austin — Mon, 27 Feb 2023 03:12:10 +0000

Here are some of my most used Rails shortcuts and their syntax cheat sheet as a Ruby on Rails novice!

To start, if you return rails on your command console, you’ll get a fairly extensive list of rails commands

Running rails [command] -h (help) will provide additional details about the specific command.

This is helpful for any commands that are infrequently used. In your day to day, you’ll typically interact with a smaller subset of rails commands.

Getting Started:

Creating a new Rails application:

rails new [your-app-name]

This will create a new rails application with the given name [your-app-name]. The resulting artefact is a directory with a full rails app.

Starting your rails server:

  `rails server` (or) `rails s`

This starts your rails server on localhost:3000 . Your local machine will typically automatically open a browser to the localhost:3000.

Rails Generator

Rails generator is a command that allows you to create different types of rails assets from your command terminal. Rails will automatically nest the resulting asset in the correct directory (i.e. controller file in the Controller folder) and set up the class.

rails generate [asset] (or) rails g [asset]

Model

rails g model [ModelName] column_name:datatype column_name2:datatype2

This command shortcut creates a rails model.
**Remember that model names are SINGULAR.

This command also creates a corresponding migration file. The command also allows you to include the column names and column data types (if your column is a string, you do not need to specify a data type).

ex. rails g model Blog blogger_name age:integer blog_text:text

We would expect to see a Blog.rb model file and a create_blogs.rb migration file with the following data columns and data types:

  blogger_name | string 
  age | integer 
  blog_text | text

### Generate Controller:

rails g controller [ControllerNames]

This command shortcut creates a rails controller.

**Remember that controller names are PLURAL

Generate Serializer

rails g serializer [SerializerName]

This command shortcut creates a rails serializer.

**Remember that serializer names are SINGULAR

Rails Database Commands:

If you’ve run ‘rails’ in the command terminal, you’ll have seen rails commands that start with ‘db:’ These are database commands that you are able run for your rails backend.

Here’s the full list you’ll see when you run ‘rails’:

        db:create
        db:drop
        db:environment:set
        db:fixtures:load
        db:migrate
        db:migrate:down
        db:migrate:redo
        db:migrate:status
        db:migrate:up
        db:prepare
        db:reset
        db:rollback
        db:schema:cache:clear
        db:schema:cache:dump
        db:schema:dump
        db:schema:load
        db:seed
        db:seed:replant
        db:setup
        db:structure:dump
        db:structure:load
        db:system:change
        db:version

However, it's been my experience that some are more useful than others (much like the rest of the rails commands!):

Some common rails database commands:

rails db:create Run this command FIRST and ONCE to create your database, allowing you to build your tables through migrations
rails db:migrate This command executes the table creation and changes in your migration files.
rails db:rollback This command allows you to effectively undo your last migration, going back to the prior migration state (and the changes back the schema). This is particularly useful to undo mistakes you might have made in your most recent migration.
rails db:seed If you have a seed file with sample data to "seed" your database, this command will run that seed file. Note that that file must be independently set up and your DB should already be created and your tables set up with a migration.

Console:

rails console (or) rails c

This command opens the rails database command console in IRB so you can interact directly with your ruby database.

This one is really nifty for quick sanity checks on your models and checking if your objects are correctly changing on the server-side without interacting through the application. This is particularly helpful if you haven't made necessary changes to the front-end to support the server-side change logic.

Routes:

rails routes

This command lists out all the RESTful routes as specified in your routes. The available routes will also be displayed in the command terminal in an organized format.

  Prefix | Verb | URI Pattern | Controller#Action

It's especially useful as reference when you need the correct URI pattern/route for an API call (and the API call verb), as well as defining the action that you'll need to write in the corresponding controller file. It can also be helpful if you're getting ramped up on a new application.

Hopefully these shortcuts aid in your coding!

Passing Props UP ^ from Child to Parent Component

Austin — Sun, 26 Feb 2023 02:39:12 +0000

In my previous blog post, I covered React fundamentals, such as defining components, how they’re used and benefits (i.e. reusability), as well as props. If you’re new to React or need a quick refresh, I encourage you to take two minutes to review the concepts.

My previous post also explained how props are passed from a Parent component to a Child component in React.

In this blog post, I’ll be writing about how props can be passed UP from a Child component to a Parent component. You might recall however, that in my previous post, I stated that props passing was unidirectional, and could only be passed from Parent to Child.

Strictly speaking, this is true. In the Parent to Child relationship, we pass the prop down directly from the Parent component to the Child component, and the Child component which inherits the prop(s) is able to access the prop object, including all its object attributes (should it have any).

Here’s an example of a simple prop passed from Parent → Child

Ex 1:

import Child from "./Child"

function Parent() {


   let name = "Lucky"


   return (
       <div>

           <h1> Welcome to the Parent Component, {name}! </h1>

           <Child prop={name}/>

       </div>
   )
}
export default Parent;

function Child ( {prop} ) {
   return (
       <div>
           This component is built for {prop}!
       </div>
   )
}

export default Child;

And we would expect to see this on the Application page:

Ex 2:

import Child from "./Child"

function Parent() {


   let childObj = {
       name: "Lucky",
       color: "purple",
   }


   return (
       <div>


           <h1> Welcome to the Parent Component, {childObj.name}! </h1>


           <Child prop={childObj}/>


       </div>


   )
}


export default Parent;

function Child ( {prop} ) {


   return (
       <div>


           This component is built for {prop.name}!


           <br></br>


           The color is {prop.color}.


       </div>
   )


}


export default Child;

This is fairly intuitive. We know that React component best practice says that each component should have a discrete role or function, and we would want to share the props with a component that has a specific use for it. We therefore may need the ability to share props from a Child component to another component, including a Parent component.

You may ask, then, what situations might exist in which you would need to pass objects UP from a Child component to a Parent component? Some situations might include a Child component that makes an API call, and you want to send the returned object UP the component hierarchy or upon submission of a form that lives on a separate component to set or update State.

So how do you send up Props from a Child to Parent component? Quite easily. The Prop itself is carried as a function call. A two-for-one deal, if you will. And the syntax is still the same.

Let’s take for example an application where users can submit information on a form:

In our earlier example, the main welcome messagename showed, “Lucky”. The name now shows up as “Child”. Underneath, we have a form that allows the user to change the name that appears on the page.

As it is set up here, the page we are seeing now is rendered from the Parent.js file

The Parent component includes the useState hook, and the displayed name is set into State within the Parent component. The function that manages the state for the displayed name is called setNewName, and exists on the Parent component. You can also see that we’re making the function available to the Child component using the same syntax that we would use to pass down props.

The Child component renders the form to change the displayed name. Child.js also uses the useState hook to manage the name typed into the form.

On the browser, this is what we would expect to see:

Here, we’ve typed in the name “Lucky”, in order to set the welcome greeting name back to “Lucky”.

Upon clicking “Submit”, our handleSubmit function calls the setNewName function, which React carries up from the Child component to the Parent component through the function Prop and sets the name State in the Parent function to Lucky.

You will note that we do not have to include the “name” element in the setNewName function; the element is carried with the function through the prop chain up to the Parent component.

Finally, we see the updated welcome name!

Object Inheritance in Ruby #ruby #objectinheritance #superclass

Austin — Wed, 28 Dec 2022 22:54:41 +0000

Tl;dr: Ruby is an object-oriented language and allows for classes to take in the object characteristics of another class using the “<” symbol in the inheriting class’ Class definition file

In this blogpost, I write about object inheritance in Ruby. Ruby is an object-oriented language, and one of the key features of an object-oriented language is its ability to take in the object characteristics of another class. We accomplish this by having the “subclass” inherit the characteristics of a “superclass”. Once this model is defined, then your program is able to use the class characteristics (definitions, functions, etc.) of both the sub AND super classes.

What are Classes in Ruby?

Before we jump into object inheritance, let’s quickly review the concept of a “Class”. A Class is effectively a “blueprint” for the objects you will be creating in that class. Put another way, this is where you define what type of object you are creating - so, if, as an example, you were creating individual object instances of wines (i.e. Chardonnay, Syrah), you might create a Class of “Wine” since both Chardonnay and Syrah are both a type of wine.

class Wine

end

However, you might also have different types of alcohol! Not only do you have wines, but you also have tequilas and whiskeys. Those are not types of wines, so you might also have another class of “Liquor” that has definitions that broadly apply to tequilas, whiskeys AND wines.

class Liquor

end

*Why Object Inheritance? *

Reusability is a key part of object inheritance. It allows us as programmers to not have to duplicate code. Coming back to our example of liquor and the types of liquor, there are characteristics that wine, tequila and whiskey will all have or share: price, where it’s from, alcohol content, etc.. We wouldn’t want to copy that code for EVERY SINGLE type of alcohol!

So for those reusable characteristics, we would define those in the superclass, like so:

class Liquor

   attr_accessor :price, :type_liquor, :region, :alcohol_content

 def initialize(price, type_liquor, region, alcohol_content)
   @price = price
   @type_liquor = type_liquor
   @region = region
   @alcohol_content =alcohol_content
 end

  def alcohol
   "Careful, this will get you buzzed."
 end


end

Superclass and Subclass

In the hierarchy of object inheritance, we have what are called “Superclass” and “Subclass”. The Superclass is the class from which the Subclass “inherits” the object characteristics. In our example, “Liquor” would be a Superclass, and the type of liquor would be a “Subclass”.

Syntax for Object Inheritance

We use the inequality symbol < (or shovel) for the subclass to inherit the superclass. We can also define characteristics, methods, specific to the Wine class in the Wine file as well.

Here is an example:

class Wine < Liquor

   def how_to_drink 
       "To drink the wine, take a small sip and swirl the wine in your mouth"
   end

end

And it’s as simple as that! Now, all the characteristics we defined in our Liquor class are available to our Wine class.

Now let’s try it out in IRB!

First, let’s make sure that Wine has inherited the superclass of Liquor. You can use a method called #superclass. When appended to a class, it will tell you that class’ superclass:

2.7.4 :001 > require_relative 'liquor'
 => true 
2.7.4 :002 > require_relative 'wine'
 => true 
2.7.4 :003 > Wine.superclass
 => Liquor

Next, let’s initialize an instance of Wine, called “chardonnay”.

2.7.4 :004 > chardonnay = Wine.new("$10", "wine", "California", "14%")
 => #<Wine:0x00007fc25d95a5c0 @price="$10", @type_liquor="wine", @regio...

*Note how all the parameters we are giving to chardonnay through the Wine class were actually defined up in the Liquor class. Recall also that the Wine class has no object parameters defined. Wine has inherited all the characteristics of Liquor, and we’re able to create the object with parameters defined in the superclass.

Coming back to our method #superclass - if we were encountering the object “chardonnay” and needed to learn more about its class hierarchy, we could string #class and #superclass to traverse the class hierarchy.

2.7.4 :009 > chardonnay.class
 => Wine 
2.7.4 :010 > chardonnay.class.superclass
 => Liquor

Moving along, recall we defined a method, #how_to_drink, in our Wine class. Let’s see what that method says about how to drink our chardonnay:

2.7.4 :006 > chardonnay.how_to_drink
 => "To drink the wine, take a small sip and swirl the wine in your mouth"

Solid advice, but more importantly, our class method works!

Finally, let’s call the method #alcohol that we defined in our superclass, Liquor, on our object chardonnay:

2.7.4 :005 > chardonnay.alcohol
 => "Careful, this will get you buzzed."

Success!

[Aside: you might be wondering what happens when both the superclass and subclass have a method with the same name. In this situation, the subclass’ method will overwrite the inherited method. So, if Liquor.rb also had #how_to_drink method, the method #how_to_drink in Wine.rb would overwrite Liquor’s. ]

React Props: The Bare Basics

Austin — Sun, 24 Jul 2022 23:49:23 +0000

React Components:

One of the key and notable features of React is components. React allows developers to build reusable components of an application that can then be rendered together. In practical terms, components allow a building block style of building applications:

Components, as a best practice, are built with discrete functionality and purpose
Components can be reused, either in other parts of the code, or for different applications altogether
If implemented well, discrete functionalities for components allows for easier understanding of the individual parts of the application and management of the code base

While the components may be rendered together, components must also be able to share information and pass values to one another. This is a job for Props.

Props:

Props play an important role in passing values between the components.

While React components are effectively separate pieces of functional code, when they are used in combination to support an application, those components must be able to share values (or arguments) with each other! Props allow for this transmission of values from one component to another. However, it is important to remember that information through Props allows for passing values from a parent component down to a child component. That is to say, Props sharing is unidirectional. Props can be passed from child to parent, but that is accomplished through function calls, and the function arguments are what the parent component receives. That is a subject for another blog post, and this blog post spotlights parent to child props passing.

Props Overview:

Some key syntactical concepts to grok:

Props are passed to components via HTML attributes, so we write the props we want to send down to child components in the same syntax as an HTML attribute.

Props values can be an object, integer, string, boolean, array and even a function!

Example:

For the purposes of illustration, let's use the following example: We have an application whose parent component needs to pass down props, a name as string object, to a child component.

function ParentComponent() { return ( <ChildComp name="Jake"/> //the prop called "name" is written as we would an attribute for an HTML tag and given the value "Jake" ) }

Now we can access the props in the Child component:

function ChildComponent(props) { //now we can access the prop! return( <div> "Hi {props.name}!" {/* Note how to access the 'Props' is accessed as you would a key-value pair! */} </div> ); }

Accessing multiple props

But what if we have multiple props? You can use the same convention of writing props (as you would write HTML attributes) as you saw in the previous example for each additional prop you want to specify. To access those props, just as you would access an object with multiple key-value pairs, you would access the props using dot notation in the child component.

function ParentComp() { return ( <ChildComp name="Jake" hometown="Boise"/> ) }

function ChildComp(props) { return( <div> "Hi {props.name}!" {/* To access the 'name' we use dot notation to access the name value */} "Are you from {props.hometown}?" {/* the same format is used to access the 'hometown' value */} </div> ); }

Prop Destructuring:

In the previous examples, we passed simple values (as strings) to our child component using props. In real world applications, this may or may not be the case. You could have a child component that needs to take in simple constant value.

However, React’s usefulness and power comes in the ability for parent components (by way of the developer, of course) to pass down just the information that a child component needs.

Let’s take for example a application that displays the images of paintings, and an image’s complete object record looks something like this:

{ "objectID": 436532, "isHighlight": true, "primaryImage": "https://images.metmuseum.org/CRDImages/ep/original/DT1502_cropped2.jpg", "primaryImageSmall": "https://images.metmuseum.org/CRDImages/ep/web-large/DT1502_cropped2.jpg", "department": "European Paintings", "objectName": "Painting", "title": "Self-Portrait with a Straw Hat (obverse: The Potato Peeler)", "artistDisplayName": "Vincent van Gogh", "artistDisplayBio": "Dutch, Zundert 1853–1890 Auvers-sur-Oise", "artistNationality": "Dutch", "artistBeginDate": "1853", "artistEndDate": "1890", "objectDate": "1887" "medium": "Oil on canvas", "dimensions": "16 x 12 1/2 in. (40.6 x 31.8 cm)", }

While the parent component may contain the entirety of the painting’s object data as shown above, a child component responsible for rendering the image and the image’s title may not need all of the object data.

Cue props destructuring.

To render the image onto the DOM, the child prop may only need the title of the painting and the image url. Instead of passing the entire object value down to the child component, you can destructure your prop and send only the information the child component needs.

function ParentComp() {
   return (
       <ChildComp imageUrl={paintingObj.primaryImage}  imageTitle={prop.title}/>
   )
}

function ChildComp(imageUrl, imageTitle) {
   //compare to the previous example, where we pass down "Props"
   //here we have explicitly called out the prop key from the parent component

   return(
       <div>
           <h1>{imageTitle}</h1>
           <img class="img" src={imgObj.primaryImage}/>
       </div>
   )
}

And we’d expect to see this:

(You can also read more about Props here )

Happy Coding!

My First Post! && href in Javascript

Austin — Tue, 05 Apr 2022 02:31:21 +0000

Thanks for checking out my first blog post on dev.to! In my inaugural post, I’ll be discussing how to use the <a> href HTML attribute with javascript: what <a> href is, and why it’s used, how to use it in the context of js, and my experience working with <a> href. Before I jump into the technical details, I’ll be sharing a little bit about my background, and the project that led me to write about href.

[about me]

Before we jump into the technical details about our main topic, a little more about me. I’ve spent the last decade in tech, having worked for several start-ups in software in various client-facing roles. I didn’t originally set out to work in tech, having read philosophy (specifically some arcane political philosophy at that) while in university, and rather ‘fell into it’. I now work as a technical program manager in big tech.

I’ve been extraordinarily lucky to have had many brilliant technical mentors over the years. They taught me many software fundamentals and many technical management (re: Scrum, Kanban) theories. Over time, I picked up enough through mentors, on-the-job learning and self-study to be effective in my field, but I always felt at a disadvantage (re: imposter syndrome) for not receiving any formal software engineering training.

The pandemic provides some dedicated time at home for me to learn new things, so I decided to sign up for a coding bootcamp to round out my technical skills. This blog, and the javascript project I coded using <a> href are part of my program curriculum.

[info about my project]

The capstone for the first phase of my program is a simple web app. I decided to use a URL shortening API to code a single-page web app that allows users to shorten URLs, and have the links show up on the page. This project necessitated an understanding of and leveraging the <a> href attribute. This blog post shares what I learned about this topic through my project.

You can access the web app and source code through my github:

[What is `<a> href` and what does it do?]

Strictly speaking, the <a> is an HTML tag, and the ‘href’ is the tag attribute. Href comes from “Hypertext REFerence”.

Together (and always together) <a> href renders a clickable link to a local file or url.
"anchor text. Which is the clickable text

Remember: You must use the href attribute with an <a> </a> tag.

Here’s for the <a> href is constructed: Link , Target, & Title
Link is the url or file path.
Target is how you want the linked document to open (new window, same frame, etc. - you can read more on this here.
Title is what you want the link to show up as on the webpage

How to use <a> href in Javascript:

So, when might you want to manipulate document links through your javascript instead of coding the links into the html - after all, <a> href is an html tag and attribute?

There were two requirements for my URL shortener app 1) take a long form url and return a short link & 2) add both the original and short links to the web page as clickable hyperlinks.

We therefore need a mechanism to update the web page with the new content. To accomplish this, I used <a> href in my javascript to dynamically update the web page.

My approach to getting the URLs added to the DOM was to create an

element, set as a variable ‘let’, and then set the innerHTML of let as one big template literals block (the stuff between the stuff ). I then used string interpolation to place the url (as a locally scoped variable ${urlHere) ) as the href link.

You’ll note that the Target is set as “_blank”, which opens the link in a new window when clicked on the webpage.

let card = document.createElement('li')

card.className = 'card'

card.innerHTML =
<a href= ${orgLink} target = "_blank"> ${orgLink} </a>
<br/>
<a href= ${shortLink} target = "_blank"> "Short Link"</a>
<div class ="buttons">
<button id="close"> X </button>
</div>`

Alternatively, I could have had my javascript function append the attribute and the link title step by step. However, I opted against this method as I needed to add more than one URL, together, to show up on the web page, and this approach would result in a lot more lines of code.

Example:

function example() { NewUrl = document.createElement('a'); let url = document.createTextNode("Url Link Title"); a.appendChild(url); a.title = "This is Link"; a.href = "https://www.SuperDuperLongUrl.com"; document.body.appendChild(a) }

Happy Coding!

*Sources:
*
https://www.w3schools.com/tags/att_a_href.asp
https://www.freecodecamp.org/news/the-a-href-attribute-explained/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
https://www.pcmag.com/encyclopedia/term/href#:~:text=The%20HREF%20is%20an%20attribute,called%20the%20%22anchor%20text.%22

Forem: Austin

Deploy a Basic React Project to Amazon AWS EC2

Instructions to Provision an EC2 Instance:

Configuring the Provisioned Instance

What are Elements?

Rails Shortcuts for Novices

Getting Started:

Rails Generator

Model

Generate Serializer

Rails Database Commands:

Console:

Routes:

Passing Props UP ^ from Child to Parent Component

Object Inheritance in Ruby #ruby #objectinheritance #superclass

React Props: The Bare Basics

React Components:

Props:

Props Overview:

Example:

Accessing multiple props

Prop Destructuring:

My First Post! && href in Javascript

[about me]

[info about my project]

[What is <a> href and what does it do?]

[What is `<a> href` and what does it do?]