DEV Community: Miguel Ruiz

A short story about events in Javascript

Miguel Ruiz — Sat, 29 Sep 2018 12:22:32 +0000

In the JavaScript, Event Flow process is completed by three concepts :

Event Capturing
Event Target
Event Bubbling

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.

Event Bubbling

Event Bubbling is the event starts from the deepest element or target element to its parents, then all its ancestors which are on the way to bottom to top. At present, all the modern browsers have event bubbling as the default way of event flow.

Example

<div id="parent">
 <button id="child">Child</button>
</div>

var parent = document.querySelector('#parent');
    parent.addEventListener('click', function(){
    console.log("Parent clicked");
});

var child = document.querySelector('#child');
    child.addEventListener('click', function(){
    console.log("Child clicked");
});

Execution will end as:

Child clicked Parent clicked

When you click on the button, the event passes from inner event target (Button whose id is the child) to Document. Click event pass in the following order:

If you want to stop the event bubbling, you can use event.stopPropagation() method.

Event Capturing

Event Capturing is the event starts from top element to target element. Modern browser doesn’t support event capturing by default but we can achieve that by code in JavaScript.

<div id="parent">
 <button id="child">Child</button>
</div>

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');
parent.addEventListener('click', function(){
    console.log("Parent clicked");
},true);
child.addEventListener('click', function(){
    console.log("Child clicked");
});

Execution will end as:

Parent clicked Child clicked

Conclusion

In the event flow, Event target has two phases one is at the end of event capturing and starting of event bubbling.

3 Javascript creepy concepts explained to my mom

Miguel Ruiz — Tue, 04 Sep 2018 17:07:33 +0000

There are some things that aren´t as easy as understand as we all would like. That´s what usually make people say “That´s a fancy language” I prefer Java because it´s easier. That was a thought of myself some years ago.

So for Oriented programming people, I believe it would be easier,I will use ES6 to catch these concepts, so Vamos al grano.

Closures

Closures in JS are not easy to understand but it´s a very common interview question following the “differences between double equal and triple equal” one.

Also called Lexical scoping or Static scoping, a closures are an abstraction mechanism that allow you to separate concerns very cleanly.

The shorter and easiest definition for me is the next one:

A closure is an inner function that has access to the outer (enclosing) function’s variables — scope chain.

function foo() {
  var a = 2;

  function log() {
    console.log("a: " + a);
  }

  return log;
}
var a = 3;
var bar = foo();
bar();
console.log('Global a: '+ a);

Result will be:

“a: 2”

“Global a: 3”

Callbacks

A callback is a function that is passed to another function as a parameter. This passed function will be called (or executed) within the other one.

function executor (callback){
  if(callback){
   console.log('Result after calling your function ' + callback())
  }
  else{
    console.error('No callback received')
  }
}
executor( () => (1 + 1) )

The simplest case is:

We have a function called executor which will execute everything that is coming as parameter
We call executor by passing a function as parameter
Result will be: “Result after calling your function 2”

Promises

A promise represents the eventual result of an asynchronous operation. It is a placeholder into which the successful result value or reason for failure will materialize.

Declaring a promise

A promise can be in one of 3 states:

Pending → the promise’s outcome hasn’t yet been determined, because the asynchronous operation that will produce its result hasn’t completed yet.
Fulfilled → the asynchronous operation has completed, and the promise has a value.
Rejected → the asynchronous operation failed, and the promise will never be fulfilled. In the rejected state, a promise has a reason that indicates why the operation failed.

var p = new Promise( (resolve, reject) => {  
   if (/* condition */) {
      resolve(/* value */);  // fulfilled successfully
   }
   else {
      reject(/* reason */);  // error, rejected
   }
});

Consuming a promise

The primary API for a promise is its then method, which registers callbacks to receive either the eventual value or the reason why the promise cannot be fulfilled.

var prom = new Promise((resolve, reject) => resolve(5));   
prom.then((val) => console.log(val)); // 5

We can also check for any error in the promise execution:

var prom = new Promise((resolve, reject) => resolve(5));   
prom
.then((val) => console.log(val))
.catch((err) => console.error(err))

My collection of React Interview questions (Part 2)

Miguel Ruiz — Tue, 04 Sep 2018 06:00:45 +0000

Part 1
Part 2
Part 3

+10 interview questions in react

Let's go a little bit more in deep

11. What do you understand by refs in React?

Refs are a way for you to get a handle back to the component you've created

It makes it possible to store a reference to a particular React element or component returned by the component render() configuration function. This can be valuable when you need a reference, from within a component, to some element or component contained within the render() function.

<Text ref={(component)=>{this.textComponent = component}} > Here is some Text</Text>

Then later in your code, you can access your text by doing:

this.textComponent

This will enable you to then invoke functions on the component in a object-oriented manner.

12. When you need refs instead of ID’s ?

But it is not always a good idea to use the ref attribute. The general rule of thumb is to avoid it. The official React documentation mentions three occasions where you can use it because you have no other choice.

Managing focus, text selection, or media playback.
Integrating with third-party DOM libraries.
Triggering imperative animations.

13. When is the ref value first set?

The ref is first set after the first render(), but before componentDidMount().

14. Use ‘ref’ only if its MUST , otherwise not …why?

It hinders in optimized working of Babel inline plugin.
Using refs is kinda moving little away the react way of thinking which is once state changes, you re-render all the components of your UI that depend on that state. React will take care of making sure only the right bits of the DOM are updated, making the whole thing efficient. You may eventually use refs in a Jquery fashion which is not the goal.

15. What is an event in React?

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:

Events are named using camel case instead of just using the lowercase.
Events are passed as functions instead of strings.

The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.

16. How do you create an event in React?.


class Display extends React.Component({    
    show(evt) {
        // code   
    },   
    render() {      
        // Render the div with an onClick prop (value is a function)        
        return (            
          <div onClick={this.show}>Click Me!</div>
        );    
    }
});

17. What are synthetic events in React?

In React, when you specify an event in JSX like we did with onClick, you are not directly dealing with regular DOM events. Instead, you are dealing with a React-specific event type known as a SyntheticEvent. Your event handlers don't get native event arguments of type MouseEvent, KeyboardEvent, etc. They always get event arguments of type SyntheticEvent that wrap your browser's native event instead.

18. Why is it that React sometimes requires a key property to be specified.

Because this is how React can handle the minimal DOM change. We should add a key to each child as well as each element inside children.

19. What are the two types of components in React

A React component can be one of two types. It can be either a function component or a class component.

A function component is the simplest form of a React component. It is a simple function with a simple contract:

const Hello = ({ name }) => (<div>Hello, {name}!</div>);

The function component receives an object of properties which is usually named props. It returns what looks like HTML, but is really JSX.

A class component is a more featured way to define a React component. It also acts like a function that receives props, but that function also considers a private internal state as additional input that controls the returned JSX.

class Hello extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div>
                Hello {props}
            </div>
        )
    }
}

18. What is the difference between a Container and a Component?

Component is part of the React API. A Component is a class or function that describes part of a React UI.
Container is an informal term for a React component that is connect-ed to a redux store. Containers receive Redux state updates and dispatch actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.

19. What is a Higher Order Component? Put an examples

Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.

//it's a function that accepts ComponentToDebug and explicitly returns a Functional component 
let DebugComponent = (ComponentToDebug) => {
  return (props) => (
    <div className="debug">
      <ComponentToDebug {...props}/>
    </div>
  );
};

20. What can you do with HOC?

Code reuse, logic and bootstrap abstraction
Render High jacking
State abstraction and manipulation
Props manipulation

My collection of React Interview questions (Part 1)

Miguel Ruiz — Mon, 03 Sep 2018 19:03:25 +0000

Part 1
Part 2
Part 3

+10 interview questions in react straight from my vault

Starting with the most typical questions to some that will blow your mind.
Let's go. The goal is to give short and concise answers

1. What is React?

React is a front-end JavaScript library developed by Facebook in 2011.

It follows the component based approach which helps in building reusable UI components.
It is used for developing complex and interactive web and mobile UI.
Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.

2. What are the features of React?

It uses the virtual DOM instead of the real DOM.
It uses server-side rendering.
It follows uni-directional data flow or data binding

3. How is React different of other JS Frameworks?

The interesting fact to note here is ReactJS is only a frontend library and not a whole framework, which deals with the View component of MVC (Model – View – Controller).

Also, in React, everything is a component. Consider one lego house as an entire application. Then compare each of the lego blocks to a component which acts as a building block. These blocks/ components are integrated together to build one bigger and dynamic application.

4. What do you understand by Virtual DOM? Explain how its working.

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.

This Virtual DOM works in three simple steps:

Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
Then the difference between the previous DOM representation and the new one is calculated.
Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

5. What is an event in React?

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc.

Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:

Events are named using camel case instead of just using the lowercase.
Events are passed as functions instead of strings.

The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.

6. What is JSX?

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

7. Why can’t browsers read JSX?

Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

8. How different is React’s ES6 syntax when compared to ES5?

Syntax has changed from ES5 to ES6 in following aspects:

require vs import

// ES5
var React = require('react');

// ES6
import React from 'react';

export vs exports

export vs exports

// ES5
module.exports = Component;

// ES6
export default Component;

component and function

// ES5
var MyComponent = React.createClass({
    render: function() {
        return <h3>Hello Edureka!</h3>;
    }
});

// ES6
class MyComponent extends React.Component {
    render() {
        return <h3>Hello Edureka!</h3>;
    }
}

props

// ES5
var App = React.createClass({
    propTypes: { name: React.PropTypes.string },
    render: function() {
        return <h3>Hello, {this.props.name}!</h3>;
    }
});

// ES6
class App extends React.Component {
    render() {
        return <h3>Hello, {this.props.name}!</h3>;
    }
}

state

// ES5
var App = React.createClass({
    getInitialState: function() {
        return { name: 'world' };
    },
    render: function() {
        return <h3>Hello, {this.state.name}!</h3>;
    }
});

// ES6
class App extends React.Component {
    constructor() {
        super();
        this.state = { name: 'world' };
    }
    render() {
        return <h3>Hello, {this.state.name}!</h3>;
    }
}

9. What are the different phases of React component’s lifecycle?

There are three different phases of React component’s lifecycle:

Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.
Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.
Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

10. Explain the lifecycle methods of React components in detail

Some of the most important lifecycle methods are:

componentWillMount() – Executed just before rendering takes place both on the client as well as server-side.
componentDidMount() – Executed on the client side only after the first render.
componentWillReceiveProps() – Invoked as soon as the props are received from the parent class and before another render is called.
shouldComponentUpdate() – Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.
componentWillUpdate() – Called just before rendering takes place in the DOM.
componentDidUpdate() – Called immediately after rendering takes place.
componentWillUnmount() – Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

[Update 1] Thanks to

Tiago RomeroFollow

Brazilian American Software Engineer and Dog daddy, driven by empathy, kindness and creativity. Also sober and vegan.

Just to mention something that recently changed: in React 16.3.0, some lifecycle methods have been deprecated:

componentWillMount()
componentWillReceiveProps()
componentWillUpdate()

They still can be used for now, but you would need to prefix it with UNSAFE_, like UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, and UNSAFE_componentWillUpdate.

These are expected to be removed on React 17.

We got then some new methods to compensate for that:

getDerivedStateFromProps(props, state) - Called after a component is instantiated as well as before it is re-rendered. It can return an object to update state, or null to indicate that the new props do not require any state updates.
getSnapshotBeforeUpdate(prevProps, prevState) - Called right before mutations are made (e.g. before the DOM is updated). The return value for this lifecycle will be passed as the third parameter to componentDidUpdate. (This lifecycle isn’t often needed, but can be useful in cases like manually preserving scroll position during rerenders.)

Who are in the top 3 of most famous developers?

Miguel Ruiz — Fri, 31 Aug 2018 19:34:09 +0000

I would like to know the most famous developers of dev.to community.

Create and deploy a personal web page with React (Part I)

Miguel Ruiz — Tue, 21 Aug 2018 22:28:23 +0000

Prerequisites

You need in your computer installed

NodeJS (version >6.10 is good)
Npm (version > 5.12 is fine)

You also need:

A GitHub account
A command-line Git client

Project creation

After checking everything is correctly installed. We can start our project with next command
npx create-react-app my-app
Then we will install the gh-pages package as a "dev-dependency" of the app
cd my-app
npm install gh-pages --save-dev
Properties
We will add some properties to package.json. At the top level, add a homepage property:

//...
"homepage": "http://gitname.github.io/my-app"

[gitname] → Your github username
[my-app] → Your project path, in this example my-app
Also, let's add some custom scripts for gh-pages deployment, in the "scripts" : { … } section of our package.json

...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Link to repository
Under our project path let's create a git repo:
git init
This will create an empty .git file. Now we have to add a remote repository url to our repo:
git remote add origin https://github.com/gitname/my-app.git

Deployment

Let's now generate a production build of your app, and deploy it to GitHub Pages.
npm run deploy

Your app should now be accessible at the URL you specified.

What happened here?

When we execute the run command, the library pushes all built files to gh-pages branch and github automatically takes this branch and creates the domain and publish our code.

(Optional) Push sources to master I recommend to push source files to master branch to keep sources able to be changes anytime from anywhere.

git add .
git commit -m "First source code commit"
git push origin master

Next steps: How to add content

This is the first result for my project.

If you check this page now, it's quite different. How did I created everything you can see? Check next post's for more.

DEV Community: Miguel Ruiz

A short story about events in Javascript

Event Bubbling

Example

Event Capturing

Conclusion

3 Javascript creepy concepts explained to my mom

Closures

Callbacks

Promises

Declaring a promise

Consuming a promise

My collection of React Interview questions (Part 2)

+10 interview questions in react

11. What do you understand by refs in React?

12. When you need refs instead of ID’s ?

13. When is the ref value first set?

14. Use ‘ref’ only if its MUST , otherwise not …why?

15. What is an event in React?

16. How do you create an event in React?.

17. What are synthetic events in React?

18. Why is it that React sometimes requires a key property to be specified.

19. What are the two types of components in React

18. What is the difference between a Container and a Component?

19. What is a Higher Order Component? Put an examples

20. What can you do with HOC?

My collection of React Interview questions (Part 1)

+10 interview questions in react straight from my vault

1. What is React?

2. What are the features of React?

3. How is React different of other JS Frameworks?

4. What do you understand by Virtual DOM? Explain how its working.

5. What is an event in React?

6. What is JSX?

7. Why can’t browsers read JSX?

8. How different is React’s ES6 syntax when compared to ES5?