DEV Community: Emmanuel Dalougou

How to fetch data in Deno ?

Emmanuel Dalougou — Fri, 08 May 2020 09:42:58 +0000

In this tutorial i want to show you how to data in Deno with typescript

Deno is a secure runtime for JavaScript and TypeScript. Deno is written in Rust. It builds on top of the Tokio platform and, like Node.js, executes JavaScript using the V8 engine.

To download Deno, follow the instructions on the Homepage. At this time of the post the last version of Deno is 1.0

By default, Deno is compatible with more Web APIs. you can show the list at the end of this post

I will use typescript in this tutorial but you can use Javascript, it will work.

Create a file called main.ts in the root directory of our code editor
in our main.ts file, we are going to create a async function that take an argument and call the fetch Web API to fetch external data.

const getUser = async (url: string): Promise<void> => {
  const data = await (await fetch(url)).json();
  console.log(data);
};

getUser("https://jsonplaceholder.typicode.com/users");

By default Deno is secure and it doesn't allow us to have acces of network, file system, etc...

To execute our file we are going to do this

deno run --allow-net main.ts

The --allow-net flag allow us to have an access for the network.

Web APIs compatible with Deno

addEventListener
atob
btoa
clearInterval
clearTimeout
dispatchEvent
fetch
queueMicrotask
removeEventListener
setInterval
setTimeout
AbortSignal
Blob
File
FormData
Headers
ReadableStream
Request
Response
URL
URLSearchParams
console
isConsoleInstance
location
onload
onunload
self
window
AbortController
CustomEvent
DOMException
ErrorEvent
Event
EventTarget
MessageEvent
TextDecoder
TextEncoder
Worker
ImportMeta
Location

How to work the keyword: this ?

Emmanuel Dalougou — Thu, 09 Apr 2020 05:16:32 +0000

In this article, i don't want to take more times to explain how the this keyword work. I will explain in clear terms and fastly. In fact, more developers are confused about the this keyword.

What is ?

the this keyword references the object that is executing the current function.

if a function is a method in a object, this reference that object
if a function is a regular or anonymous function, this reference the global object which is the window object in the browsers and global for nodejs

How it Work ?

if a function is a method in a object, this reference that object

let's to create our first example and to explain in more details. we are going to create a simple user object with object syntax literal

const user = {
  name: "Emmanuel",
  country: "Ivory Coast",
  getAddress() {
    console.log(this)
  }
}
console.log(user.getAddress())

as we can see in the user object we have a method called getAddress() and inside the method we have called the console.log(this) to show in the console the result of our this reference:

{
  name: 'Emmanuel',
  country: 'Ivory Coast',
  getAddress: [Function: getAddress]
}

we can see that this reference our user object. if we want to access for example the key name or country on each line inside the getAddress() method we can do that:

const user = {
  name: "Emmanuel",
  country: "Ivory Coast",
  getAddress() {
    console.log(this.name),
    console.log(this.country)
  }
}

In the console, the result is

  Emmanuel
  Ivory Coast

With ES6 classes is the same.

class Person {
  constructor(name, country){ this.name = name, this.country = country}
  getAddress() {console.log(this)}
}

let person = new Person('Emmanuel', 'Ivory Coast').getAddress()
console.log(person)

as we can see, we have to create a Person class and this class has the getAddress() method to show the this in the console, then we create a instance of our Person class and show the result:
we can see that the this keyword reference our Person class

if a function is a regular or anonymous function, this reference the global object which is the window object in the browsers and global for nodejs

we are going to create a simple function called getVideos() and show the this keyword in the console

function getVideos() {
 console.log(this)
}
console.log(getVideos())

when we show the result in the console, we can see a global object window in the browser or global object in nodejs

GraphQL or Redux

Emmanuel Dalougou — Wed, 20 Nov 2019 09:58:52 +0000

Always i'm ask myself the following question: Do i must use GraphQL instead Redux definitively ? or Redux instead GraphQL ? Any comments will help me to clearn my mind ❤️

Understand and use useState Hooks in React

Emmanuel Dalougou — Wed, 13 Nov 2019 10:38:05 +0000

In this article we are going to talk about useState hooks in React and how to use it.

useState Hooks ? What is it ? 😳

useState is a React hooks that allow us to use and to modify the state in our function component(before called stateless component) without to write a class component and setState method.
In the previous version of React before the react@16.8, the using of state and update the state in our component was like this :

import React from 'react'

class App extends React.Component() {
  constructor(props) {
    super(props)
    this.state = {
      name:"Emmanuel",
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e){
    this.setState({name:e.target.value})
  }

  render(){
      return(
           <div>
            <p>{this.state.name}</p>
            <input value={this.state.name} type="text" name="name" handleChange={this.handleChange}/>
        </div>
      )
  }
}

Since the hooks are been introduced in React, the way to use the state and to modify the state are become easy. We are going to modify the previous code and to write a functional component with useState hooks.

import React, { useState } from 'react';

function App(props){
  const [name, setName] = useState('Emmanuel')

  function handleChange(e){
    setName(e.target.value)
  }

  return(
    <div>
      <p>{name}</p>
        <input value={name} type="text" name="name" onChange={handleChange}/>
    </div>
    )
}

Like we see in the fist line of our code, we have imported the useState hooks. the setName function passed to onClick event allow to update our name state.

How `useState` hooks works

const [state, setState] = useState(initialState);

It returns a stateful value, and a function to update it.During the initial render, the returned state is the same as the value passed as the first argument (initialState). The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component. During subsequent re-renders, the first value returned by useState will always be the most recent state after applying updates. React guarantees that setState function identity is stable and won’t change on re-renders.

The state value can be a object, array, number, string, boolean, etc...

Note ❗

If you want to use the useState hooks in your code and if you have already write your code with the Class method, please don't delete your code, you can update the version of your React application (react and react-dom) to the new version supported the hooks and continue to build your application using the useState in the new component created.

How to merge object in javascript

Emmanuel Dalougou — Wed, 13 Nov 2019 10:33:41 +0000

suppose that we have an user object with different values that we will want to merge or updated in the single object:

const user = {
    name: 'John Doe',
    city:'Abidjan',
    job:'web developper'
}

const same_user = {
    name: 'John Doe',
    city:'Abidjan',
    age:24,
    color:'black',
    hobbies:'football'
}

Now, the first question that we ask ourselves is: How to do that ?

We're going to use the spread operator method to do that. The syntax is three dots (...)

const users = {...user, ...same_user}

The spread operator is a new way to spread iterable element or often expand an iterable like array, object.

Now we are going to see the new users object in our NodeJS REPL:

console.log(users)
{ name: 'John Doe', city:'Abidjan', job:'web developper', age:24, color:'black', hobbies:'football' }

Note that this operator was introduced in ES6.