Essential Javascript for the React Developer

KevSage — Mon, 27 Apr 2020 02:00:12 +0000

Pt. 1 of 4

Learning a front-end javaScript framework /library is essential for developers as it speeds up the production process while minimizing the lines of code. For JavaScript developers, the most common frameworks are React.js, Angular, and Vue.js. Today, we’re going to focus our attention on React.js.

Before jumping headfirst into React, it is important that you have a very solid foundation in JavaScript as there are several concepts that all burgeoning react developers must become familiar/comfortable with to get the most out of this useful tool.

Var vs. Let vs. Const

ECMA6 introduced a new way to declare variables that differs from the traditional way variables are declared using the “var” keyword, the previous js standard. It is highly advised that javascript developers use “let” and “const” keywords as opposed to using “var” when declaring variables.

The reasoning behind this is that ‘let’ utilizes “function” scope while ‘let’ and ‘const’ use “block” scope. This is an important distinction as block scoping is preferred because we don’t want to give access to our variables outside of a defined block.

function helloWorld() {
for (var i = 0; i < 5; i++) {
console.log(i)
}
console.log(i)
}
helloWorld()

In the previous example, we have a helloWorld function. Within that function is a for loop that increments by one as long as ‘i’ is less than 5. In this example, we have 2 console logs, one within the function scope and the other within the for loop block. Using var to declare our variable allows the 2nd console log to have access to the ‘i’ variable within the for loop, which as we described previously, is not ideal. Now, let’s take a look at the same example, but this time we’ll use the let keyword.

function helloWorld() {
for (let i = 0; i < 5; i++) {
console.log(i)
}
console.log(i)
}
helloWorld()

Using the let keyword, the 2nd console log should throw an error as the i variable will only be accessible within the for loop, as let is block scoped, not function scoped.

That leaves us with “let” and “const” as our preferred methods of declaring variables. “Const” is used when we have a variable that will not change and “let” if a variable will be reassigned at a later time, therefore, const would not be a good choice for an incrementing for loop.

Objects

Properties and Methods
In javascript, objects are collections of related data consisting of ‘key-value’ pairs in the for of variables, also known as properties, and functions which are referred to as methods.

Dot and Bracket Notation
When we know which particular property or method we’d like to access, dot notation works well.
let dog = {
name = "Fido",
age = 3,
color = "black",
owner = "Kevin"
}
dog.owner = "Richard"

On the other hand, we use bracket notation when we are unsure of the property or method we want to be able to access.

let dog = {
name = "Fido",
age = 3,
color = "black",
owner = "Kevin"
}
let newOwner = 'owner'
dog[newOwner.value] = "Richard"

In our next installment, we’ll be taking a look at the ‘this’ keyword.

Fetching Translations in Your Next React App

KevSage — Sun, 05 Apr 2020 22:12:29 +0000

For any developers that are unaware, Google has an amazing suite of resources for developers and aspiring developers. One of the most useful resources I’ve found is the Google Translate API, allowing instant translations of text between thousands of language pair combinations.

Today, we’ll briefly take a look at how one might use the google translate API to fetch a translation for a language acquisition application built with React.

The first thing we’ll need to do is request an API key from google. An API key is required for several reasons most importantly, providing the API with information in regards to the application making the call and allowing the application to determine whether or not the requesting application has the appropriate permissions to access the API.

Doing this is a relatively painless process that we won’t discuss here as there is a basic setup guide provided by google with step by step instruction here.

Once you’ve acquired an API key via Google cloud, we can now use our key to make fetch requests to the Google Translate API. I’ll be using fetch within a React App I’ve created called Tongue.io

After logging creating and logging into your account we will be redirected to our language dashboard. As you can see below, I’ve already chosen the target language to be French. We’d like to have the phrase “peanut butter” translated so, we’ve included it in our input form.

To fetch our translation, google requires some information to properly analyze your request. To do this first, we’ll need a few variables.
input- The language of the text we would like translated.
target- The language we would like to translate our text.
phrase- The text that we would like to have translated.

API_KEY = the key provided by Google Cloud
let input = "en";
let target = "fr"; //French
let phrase = "peanut butter";
const API_KEY = ["Place your api key here"]

Now that we’ve established the information required, we need to create a URL variable that incorporates each piece of information. Using ES6 template literals, this process is quite easy.

If we take a look at our response within our dev tools, you’ll notice that we don’t receive a simple translation as expected, but instead, an object containing our translation tucked in.

By inspecting the returned object, we can use ES6 bracket notation to access our translation. So, instead of console logging our response, we’ll console log the following

console.log(res["data"]["translations"][0]["translatedText"]);

Congrats, you’ve successfully queried the Google Translate API!

DEV Community: KevSage

Essential Javascript for the React Developer

Fetching Translations in Your Next React App