DEV Community: Masahiro Harada

Vue.js developers' guide to React

Masahiro Harada — Sat, 24 Oct 2020 16:52:33 +0000

If you already learned one language or framework, it's easier to learn similar ones. Instead of reading docs from top to bottom, you just think, "how to do X with Y?".

In this article, I introduce React way of implementing Vue.js features for Vue.js devs who want to learn React as well.

(I don't encourage anyone to switch from Vue.js to React! It's better -- and also fun -- to getting to know both, right?)

Components

How to create a component?

Vue.js way

Vue component is consists of 3 blocks -- <template>, <script>, <style>. And the file should have .vue extension.

<template>
  <div>
    <h1>Sample</h1>
    <h2>This is a component.</h2>
  </div>
</template>

<script>
export default {
  // data and behaviors.
}
</script>

<style>
/* how this component looks */
</style>

React way

In React, you have two ways to create components -- function and class.

Below is an exmaple of functional way of creating a component.

import React from 'react';

function Sample() {
  return (
    <div>
      <h1>Sample</h1>
      <h2>This is a component.</h2>
    </div>
  );
}

export default Sample;

A functional component is a function that returns React element. It should looks like JavaScript returning HTML, but it's not. It's JSX.

In order to use JSX, you have to import React though it doesn't seem to be referenced directly. (But in React v17.0, you can choose not to import React just for JSX. Read this official post for details.)

Below is another way of creating react components with class syntax.

import React from 'react';

class Sample extends React.Component {
  render() {
    return (
      <div>
        <h1>Sample</h1>
        <h2>This is a component.</h2>
      </div>
    );
  }
}

export default Sample;

Class component's render method returns React element.

So, what is the difference between the two and which way should you choose to write your own React components?

In v16.7 and below, class components have state management (data in Vue.js) and lifecycle methods -- both are crucial for useful components -- and functional ones didn't.

But, from v16.8, React introduced Hooks into functional components. Hooks take care of state management and "side effects" (operations that should happen after rendering).

Although a few lifecycle methods are not "translated" in hooks, functional components can do pretty much the same jobs as class components. And React team recommends functional way for your first choice.

When you’re ready, we’d encourage you to start trying Hooks in new components you write.
In the longer term, we expect Hooks to be the primary way people write React components.
Should I use Hooks, classes, or a mix of both?

So if you start brand new React project, or you are a React beginner, I think you should consider writing in functional way first. And if you want to use class-only features, then introduce class components. It's totally OK that functional components and class components live together.

In this article, I explain about functional way.

Templating

Vue.js way

Vue component's <template> has its own syntax such as v-bind, v-for, v-if.

<template>
  <div>
    <h1>Hello, {{ name }} !</h1>
    <a :href="link">Click me</a>
    <ul>
      <li v-for="item in items" :key="item.key">
        {{ item.title }}
      </li>
    </ul>
    <p v-if="isActive">Paragraph</p>
    <p v-show="isShow">Second paragraph</p>
  </div>
</template>

React way

In React, you use JSX.

return (
  <div>
    <h1>Hello, {name} !</h1>
    <a href={link}>Click me</a>
    <ul>
      {items.map(item => (
        <li key={item.key}>{item.title}</li>
      ))}
    </ul>
    {isActive && <p>Paragraph</p>}
    <p style={{ display: isShow ? 'initial' : 'none' }}>Second paragraph</p>
  </div>
);

JSX is not a template engine. It has only one special syntax -- {} -- and the rest are just JavaScript.
statement inside of {} is evaluated as JavaScript.
There is no equivalent for v-show. So basically you should manually manipulate display of style attribute.
I'll talk about CSS classes later.

Just like Vue's <template>, functional component must return only one root element. But React has convenient helper component <React.Fragment>. It lets you return multiple elements in order for you not to wrap elements with useless <div> only for the sake of a framework's requirement.

return (
  <React.Fragment>
    <h1>...</h1>
    <h2>...</h2>
    <h3>...</h3>
  </React.Fragment>
);

<React.Fragment> is not rendered as DOM. You just get <h1>, <h2> and <h3> in the exmaple above.

And, <React.Fragment> has its syntax sugar. Its name can be omit. That is, the snippet above can be written as below.

return (
  <>
    <h1>...</h1>
    <h2>...</h2>
    <h3>...</h3>
  </>
);

Odd but handy, huh?

CSS classes

Vue.js way

Vue.js offers v-bind:class as a way to manipulate HTML class attribute.

<button class="btn" :class="{ 'btn-primary': isPrimary }">...</button>
<button class="btn" :class="['btn-primary', 'btn-small']">...</button>

React way

There is no special way in React. className is just an equivalent for class attribute. class is one of reserved keywords in JavaScript so JSX calls this className.

return <button className="btn btn-primary">...</button>;

Although, classnames library will help you dealing with HTML classes.

import classNames from 'classnames';

It's just like v-bind:class.

const buttonClass = classNames({
  btn: true,
  'btn-primary': isPrimary
});

return <button className={buttonClass}>...</button>;

HTML

Vue.js way

For injecting HTML string, you use v-html in Vue.js.

<div v-html="htmlString"></div>

React way

In React, there is a prop named dangerouslySetInnerHTML. It literally warns you that inserting HTML string carelessly is a dangerous move. dangerouslySetInnerHTML accepts an object that has __html property with HTML strings as its value.

return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;

Events

Vue.js way

In Vue.js, events are represented by @ syntax (sugar for v-on).

<button @click="handleClick">Click me</button>

<form @submit.prevent="handleSubmit">...</form>

React way

React takes more HTML-like approach. Event handler is passed to prop named onEventName -- e.g. onChange, onSubmit.

const handleClick = e => {/* blah blah... */};

return <button onClick={handleClick}>Click me</button>;

There is no event modifiers like .prevent.

States (data)

Vue.js way

In Vue.js, component's internal state is defined by a return value of the data method.

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

Inside other parts of the component, you can reference its state value through this.

methods: {
  increment() {
    this.count += 1;
  }
}

React way

In React, you use useState hook. Hey, here comes the hook!

import React, { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => setCount(count + 1);

  return <button onClick="handleClick">{count}</button>;
}

Hooks are functions for accessing React's magic. useState is the one for managing component's state.

useState takes state's default value as an argument, and returns array that contains 0. "state variable" and 1. "function that update state". State's value can only be updated through that function.

Call useState by individual states.

const [name, setName] = useState("John Doe");
const [age, setAge] = useState(20);

You can set object as state's value.

const [user, setUser] = useState({ name: "John Doe", age: 20 });

Forms

Vue.js way

In Vue.js, v-model handles form inputs.

<input type="text" v-model="name" />

v-model lets you implement bi-directional data flow.

React way

React doesn't introduce sytax sugar for bi-directional data update. You have to implement it on your own by combining state and event.

const [name, setName] = useState('');
const handleInput = e => setName(e.target.value);

return <input type="text" onChange="handleInput" value="name" />;

It's a bit annoying writing this boilerplate almost everytime dealing with forms. But I think this kind of simplicity, or "give you no sugar", "write what you need on your own as possible" style is very React-ish.

methods

Vue.js way

Inside of methods defined in methods, you can reference states (data). And the methods can be referenced inside your template.

<script>
export default {
  methods: {
    sayHello() {
      console.log(`Hello, ${this.name}!`)
    }
  }
}
</script>

React way

There's nothing like Vue's methods in React. React component is essentially just a JavaScript function, so you treat it as it is.

function MyComponent() {
  const [name, setName] = useState('John');

  function sayHello() {
    console.log(`Hello, ${name}!`);
  }

  return <button onClick={sayHello}>...</button>;
}

ref

Vue.js way

In Vue.js, ref gives you direct access to the DOM.

<template>
  <div>
    <div ref="foo">...</div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.foo);
    }
  }
}
</script>

React way

React has similar functionality as Vue's ref.

With useRef hook, you can create a "ref object" for accessing DOM. The object's current property contains reference for the DOM.

import React, { useRef } from 'react';

function MyComponent() {
  const target = useRef(null);

  const handleClick = () => {
    console.log(target.current);
  };

  return (
    <>
      <div ref={target}>...</div>
      <button onClick={handleClick}>Click me</button>
    </>
  );
}

export default MyComponent;

computed properties

Vue.js way

Vue.js has "computed properties".

<p>Hello, {{ fullName }} !</p>

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}

Computed properties are functions that capture the results of computation, and behave like properties in the template block.

React way

I think useMemo hook is React version of "computed property".

import React, { useMemo } from 'react';

function MyComponent() {
  const [firstName, setFirstName] = useState("John");
  const [lastName, setlastName] = useState("Doe");

  const fullName = useMemo(() => {
    return `${firstName} ${lastName}`;
  }, [firstName, lastName]);

  return <p>Hello, {fullName} !</p>;
}

useMemo takes function as 1st argument and array as 2nd argument, and returns memoized value.

React's functional component is re-rendered everytime props or states are updated.
But a function of useMemo's 1st argument only be re-calculated when values in an array passed as 2nd argument are updated.
If the values in 2nd argument array are not updated, cached value will be returned.

This behavior is similar to Vue's computed property, but it's not so much common pattern as computed property. You should use useMemo only when there's a real need for optimization (I learned this from this post).

watch

Vue.js way

Vue.js offers you watchers -- "more generic way to react to data changes".

export default {
  watch: {
    name(valueAfterUpdate, valueBeforeUpdate) {
      // ...
    }
  }
}

React way

React has no equivalent for watchers.

You can implement something like that using useEffect hook. I will show you that hook in next section.

But I oftern think that there're not so many use-cases for the watch option, because most of the time, it can be replaced with on-change event.

Lifecycles

Vue.js way

Vue.js has many lifecycle hooks.

export default {
  created() {/* ... */},
  mounted() {/* ... */},
  updated() {/* ... */},
  destroyed() {/* ... */}
}

React way

In React functional component, there is no concept of lifecycle. It's much simpler here.

functional component is rendered and re-rendered when its props or states are updated.
if you want to do something just after rendering, put that operation in the useEffect hook.

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    someApi.getItems().then(response => {
      setItems(response.data);
    });
  }, []);

useEffect behaves differently depending on what is passed as a 2nd argument.

// if there is no 2nd argument,
// 1st argument is called on every renders.
useEffect(() => {});

// if 2nd argument is an empty array,
// 1st argument is called only on first render.
useEffect(() => {}, []);
// this is like "mounted" in Vue.js

// if 2nd argument contains one or more items,
// 1st argument is called on first render and when the items are updated.
useEffect(() => {}, [aaa, bbb]);
// this is like "mounted" plus "updated" & "watch", I guess.

useEffect's 1st argument can return "clean up" function, that is called just before its component is removed from the DOM.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // ...

    return () => {
      // clean up function.
      // this is like "destroyed" in Vue.
    };
  }, []);

  return <div>...</div>;
}

On the other hand, class components have constructor and lifecycle methods that work just like Vue.js. I don't show you around in this article, but you can learn about these from this post.

Interaction between components

props

Vue.js way

props option is used for passing data from parent component to its child.

<Child :name="test" :item="sampleData" />

<script>
function Item(one, two) {
  this.one = one
  this.two = two
}

export default {
  // validate its value with "type" and "required".
  props: {
    name: {
      type: String,
      required: false,
      default: 'John Doe'
    },
    item: {
      type: Item,
      required: true
    }
  }
}
</script>

React way

In React, properties / attributes passed from parent to children are also called props.

<Child name={test} item={sampleData} />

1st argument of a functional component is the props.

import React from 'react';

function Child(props) {
  // props.name
  // props.item
}

You can use prop-types library for validation.

import React from 'react';
import PropTypes from 'prop-types';

function Child(props) {
  // props.name
  // props.item
}

Child.propTypes = {
  name: PropTypes.string,
  item: PropTypes.shape({
    one: PropTypes.string.isRequired,
    two: PropTypes.number.isRequired
  }).isRequired
};

Child.defaultProps = {
  name: 'John Doe'
};

export default Child

emitting events

Vue.js way

In Vue.js, child component notifies event with $emit method to its parent.

onSomethingHappened() {
  this.$emit('hello');
}

Then, register a handler for a notified event with @ syntax.

<Child @hello="parentMethod" />

React way

React has no syntax for event emitting. You just pass a handler function as a prop -- i.e. parent component determine what to do and children execute that.

function Child({ onHello }) {
  const handleClick = () => {
    console.log('hello there');
    onHello();
  };

  return <button onClick={handleClick}>click me</button>;
}

function Parent() {
  const parentMethod = () => {/* blah blah... */};

  return <Child onHello={parentMethod} />;
}

slot

Vue.js way

Vue.js has slot for inserting child elements.

<Content>
  <p>Hello world</p>
</Content>

Content component be like:

<template>
  <article>
    <h1>This is a title.</h1>
    <slot></slot>
  </article>
</template>

When you have more that one blocks to insert, you can name each of those.

<MyComponent>
  <template #header>
    <MyHeader />
  </template>
  <template #content>
    <MyContent />
  </template>
  <template #footer>
    <MyFooter />
  </template>
</MyComponent>

React way

In React, children prop has inserted elements.

<Content>
  <p>Hello world</p>
</Content>

function Content({ children }) {
  // children -> <p>Hello world</p>
  return (
    <article>
      <h1>This is a title.</h1>
      {children}
    </article>
  );
}

You can neither have multiple children nor name it.

But children is just a prop. The example above is essentially same as below:

<Content children={<p>Hello world</p>} />

So you can just do this for inserting multiple elements.

return (
  <MyComponent
    header={<MyHeader />}
    content={<MyContent />}
    footer={<MyFooter />}
  />
);

function MyComponent({ header, content, footer }) {
  return (
    <div>
      <header>{header}</header>
      <main>{content}</main>
      <footer>{footer}</footer>
    </div>
  )
}

Wrapping up

Here is my impression:

React is much simpler than Vue.js, and, more rooms for you to improvise.
Vue.js has more APIs but is more easy to learn.

In that sense, I think Vue.js is well designed. I recommend Vue.js especially for new JS framework learners. It's also my first JS framework that I succeeded to learn (I failed with angular.js before that).

But, now I like React more. It's simple and enough.

Which one do you prefer?

So, that's all folks! Thanks for reading. Hope you enjoyed and this helps your learning!

12 VS Code extensions that make your dev life more easier and fun

Masahiro Harada — Sun, 18 Oct 2020 14:12:44 +0000

In this article, I introduce you to my favorite VS Code extensions.

Auto Rename Tag

With this extension, when you modify open-tag's name, corresponding close-tag's name is also automatically modified.

It's one of the features that are default for IntelliJ or WebStorm and I wanted in VSCode too.

Better Comment

This enables you to color your comments depending on words.

You are also able to set your own color and word mapping.

"better-comments.tags": [
  {
    "tag": "CUSTOMIZE",
    "color": "#8bffff",
    "strikethrough": false,
    "backgroundColor": "transparent"
  }
]

I like this because it makes easier to looking for TODOs or so.

Bracket Pair Colorizer

This colors brackets such as {}, [], (). Corresponding brackets are painted with same color so it becomes easy to follow the code.

change-case

This transform words from current format to another.

Below is an exmaple of supported formats.

format	result
title	`Visual Studio Code`
kebab	`visual-studio-code`
camel	`visualStudioCode`
pascal	`VisualStudioCode`
constant	`VISUAL_STUDIO_CODE`
dot	`visual.studio.code`
path	`visual/studio/code`

Choose and focus words and type Change Case in command palette to select target format.

GitLens

This brings string Git integration to VS Code. I'll show a couple of exmaples among its many features.

As you can (barely) see below, it shows latest commit of selected row.

You can see changes of each commit in FILE HISTORY menu.

You can confirm diffs between branches or tags in COMPARE menu.

Highlight Matching Tag

This works as its name - highlights matching tag.

Yellow underline in the picture above is its feature. Simple but useful for reading long HTML.

By the way, in my case, I have to add this snippets to settings.json to make this work properly.

"editor.occurrencesHighlight": false,

htmltagwrap

With this, you can easily wrap selected area with HTML tags.

Type option + w and selected area will be wrapped with <p> tags. Wrapping element can be configured.

Indent-Rainbow

This colors indents.

It enhances code visibillity. And if your indent is broken, it warns with red color.

Material Icon Theme

This shows icons in EXPLORER, depending on file extension or directory name.

There is so many supprted icons other than above picture.

Peacock

This changes color of editor's frame by project.

Easy to distinguish many projects!

Type Peacock: Change to a favorite color in command palette and you can choose the color. Color setting will be stored in settings.json inside of .vscode.

Regex Previewer

This is for checking regex expressions.

Type option + command + m and a check window will be opened in right pane. When you type some words into the pane, only words that is matched to seleted regex will be highlited.

ToDo Tree

This collects TODOs and FIXes in comments and show their lists.

That's all! Thanks for reading 🤗. Hope you enjoyed.

Beginner's introduction to modern JavaScript - What are Node.js, npm, ECMAScript, Babel and Webpack?

Masahiro Harada — Sun, 18 Oct 2020 12:41:30 +0000

In this article, I explain about some keywords that supports you to write or understand modern JavaScript. I hope this article helps new JS leaners or server-side devs.

"modern" JavaScript

First of all, what does "modern" mean here? I think achiving modules is most important for JS modernization.

Modules makes it possible to use classes, functions and so on defined in other files. It's pretty common for famous programming languages such as Java, Python, Ruby, PHP, but JavaScript has been too simple to have this functionality.

Structuring your codes as modules is very important for a serious development. And with modules, JavaScript grew up to a language that is capable of complex frontend development, not just moving around carousel images or something like that.

Well, from here, I will introduce you to 5 keywords that consists modern JavaScript - Node.js, npm, ECMAScript, Babel, Webpack. Let me try to explain who they are, as simple as possible.

Node.js

Node.js is one of the JavaScript runtime environments. It was built in order to use JavaScript in server-sides.

JavaScript runtime environment consists of:

JavaScript engine that reads and parses syntax.
Additional objects (APIs) that helps devs work in each specific environment.

Browsers also have built-in JS engines inside them. And whatever the enviroment is (frontend or server-side), the basic syntax must be the same. "if" is "if" and "Array" is "Array". It's JS engine's job to understand common JS syntax specs.

On top of that engine, there is an environment-specific functionalities.

For exmaple, in browser, we have getElementById that manipulates DOM, or APIs for audio and video. These are necessary only for the browser.

In the same way, Node.js has its own functionalities (Node.js core modules) which are necessary only for the server-side, such as reading / writing files in a server. And it also introduced modules (require) as its core.

Node.js lets you write server-side code like web app in JavaScript, but not only that, it brought huge benefits on frontend development. It enables easy for developers to execute JavaScript code on their computers. Therefore, many development tools based on Node.js have been emerged, such as Babel, Webpack, Browserify, Gulp, etc. They made frontend development more advanced (and cool!).

npm

npm （Node Package Manager） is package manager for Node.js, as it explains itself.

"Package" is, in a word, external (3rd party) libraries.

npm consists of:

a database (repository) that collects packages.
CLI for:
- uploading packages to repository
- publishing packages
- downloading / updating packages
- etc.

npm is bundled with Node.js installation. They live together. Node.js introduces modules, and npm helps publishing / using 3rd party modules. I think they are both leading actors of modern JavaScript.

By the way, There is another popular package manager for Node.js, yarn. It uses same repo as npm, and CLI is its own.

ECMAScript

ECMAScript is language specification of JavaScript standarized by Ecma International.

New features of JavaScript are considered and adopted through Ecma International. The process of standarization consists of several stages:

Stage 0 (Strawperson - i.e. just an idea)
Stage 1 (Proposal)
Stage 2 (Draft)
Stage 3 (Candidate)
Stage 4 (Finished)

On each stage, people in JavaScript community discuss about and review suggested feature. And the feature which survived these stages finally became a part of JavaScript officially.

From 2015, every year new features introduced into ECMAScript. Each version is called after its year, like ES2019 or ES2020.

The important thing here, for frontend developer, is that standarization and implementation of JavaScript are done by different groups.

Ecma determines JavaScript spec, but implementation is up to individual browser vendors. Some browsers may include features that are not in final stage yet, and another browser (well, you know, IE) may not implement newly approved features.

So there is a dilemma. Frontend devs want to use cutting edge features or syntax. But on the other hand, not all browsers would implement these.

Developers should be conscious about this clearly, in order not to write "cool but non-functional" code. You can see sites like Can I Use as a reference.

I think it's frontend-specific problem because in server-side world, you can totally control the environment your code works.

And there is an advenced solution for this dilemma. It's babel, as I show below.

Babel

Babel is a tool that transform your JavaScript code to another version of syntax.

This is a solution for the gap between standard and implementation. It converts new syntax to old syntax that specified browser can understand. So clever.

For exmaple, this code will be transformed to...

const func = a => a * 2;

this snippet of code through babel.

"use strict";

var func = function func(a) {
  return a * 2;
};

This transformation process is called "transpile". It's like "compile" but the difference is that "compile" is high-level language to machine language tranformation, and "transpile" is high-level to high-level.

Babel is also used for transforming out-of-standard syntax like JSX (well knows as a companion of React) into parsable JavaScript.

There is playgound page that you can playing around and confirm its work.

Basically, babel transforms syntax only, like for-of, arrow function and class. It doesn't automatically supplement methods or objects that don't exist in target browsers (it's not just a transformation).

If you add not-yet-implemented methods, you should include additional snippets called polyfills. Still, babel provides the way to inject polyfills into your codebase.

Webpack

Webpack solves dependencies of multiple files and generate browser-friendly JavaScript file(s).

In other words, webpack brings modules to browser-land.

As I mentioned above, Node.js introduces modules. And after that, ECMA standard for modules (import/export) is also adopted.

// Node.js
const myModule = require('./my-module.js');

// EcmaScript
import myModule from './my-module.js';

But unfortunately, there isn't yet common way to use modules in browsers. In fact, there is a standard for browser-side modules, and it even implemented modern browsers in 2017 ~ 2018, but it's not widely accepted because many developers still don't figure out how to apply that feature.

So, webpack help you use modules in frondend codebase. It combines your files and files you required or imported, and generates JavaScript file without module statements.

This process is called "bundle" / "bundling".

For exmaple, when a.js imports b.js, webpack generates a file that includes both contents of a.js and b.js. The generated file is totally workable for browsers.

Let's think a bit more about dependencies and why webpack benefits us.

Think about this exmaple. a.js requires b.js and e.js, and b.js requires c.js and d.js.

If we have to manage this dependencies without modules, it would be like this.

<script src="/js/c.js"></script>
<script src="/js/d.js"></script>
<script src="/js/b.js"></script>
<script src="/js/e.js"></script>
<script src="/js/a.js"></script>

As you might think, this gonna be hard to maintain. Orders of c.js and d.js are OK to replace, but d.js and b.js are not. We cannot figure this out by just seeing HTML. This is really unstable puzzle.

Modules and webpack along together, solve this problem.

All we need is just include generated file. Develpers are free from managing depencencies on their own.

<script src="/js/main.js"></script>

Webpack can even bundle CSS or image files into JavaScript.

One advenced topic here. Webpack generates one JavaScript file with default settings. But it may be a problem, because the file would become gigantic enough to be bad for performance.

In order to handle this situation, webpack provides Code Splitting functionality. It's a technique for separating generated contents into several files.

Wrapping up

In the end, blow is a figure of tools I explained and relations between them.

Well, that's all. In these days, frontend development became complex and just leaning JS syntax is not enough to create real world apps. So it's my pleasure to this article helps beginners grabbing an idea about modern JavaScript world.