forest

The beginner guide to ReactJS

tl;dr

No. This post don’t teach you anything about ReactJS. But the fundamental before get into ReactJS/VueJS/Angular.
Beginner guide and resources before pick up ReactJS. (This is guide is applicable to VueJS, Angular or similar frontend library/framework)

Introduction

ReactJS – one of the famous frontend library. It’s always a struggle for beginner to learn this library. For me, I enjoy the learning curve of ReactJS. It’s not that hard once you know what you should focus on.

I started using ReactJS since 2 years ago. I enjoy the JSX, CSS-in-JS and, of course, JavaScript. Below is the things that I found out it’s important to know before and after you pick up the ReactJS.

Guides (Before pick up ReactJS)

What you should know before pick up ReactJS (or any frontend library, VueJS, Angular or others).

#1 HTML (HyperText Makeup Language)

The web is build up by HTML tags. Every website need HTML. Do you familiar with HTML tags ?

HTML Tags

Below example showing some HTML tags. Get yourself familiar with the HTML tags.

<!DOCTYPE html>
<html>
  <head>
   <title>Title</title>
  </head>
  <body>

    <h1>Hello World</h1>
    <p>A simple HTML example</p>

  </body>
</html>

Why the HTML tags is important in ReactJS ? Think of the HTML is the component in ReactJS.

Attributes

What do you know about the attribute in HTML tags ?

<input type="text" value="" />

<input /> is the HTML tag. type and value are the attributes to the HTML input tag. Attributes is important because it help provide additional information to the HTML tag.

Most of the time, you can define the attributes as the props in ReactJS.

HTML Event

What is HTML events ? The events that trigger the actions of HTML tags.
Such as click a button or any HTML tags. Focus the input tags. Mouse in or mouse out, mouse over HTML tags. These are some of the example of events in HTML tags.

Below is the resources to HTML events:

We have to deal with a lot of events in ReactJS. That make it a reactive frontend library. The name of events will be different in ReactJS. However, get to know the event will help you in googling for relevant solution.

#2 CSS (Cascading StyleSheet)

If HTML is woman, then CSS is makeup.
They are pretty without makeup, but with the right makeup they are prettiest.

Yes, applying CSS to HTML can make your website beautiful. CSS serve as controlling the presentation/view to your target audience. If you think ReactJS don’t need CSS, think again.

#3 JS (JavaScript)

JavaScript is the only programming language that works in the browser. It’s use to manipulate the content of website, make it more dynamic and interactive. Often use to manipulate DOM.

Learn the following.

  • Build in function
  • Expression and operators
  • Statement

and more

It’s fine if you can’t remember all the built in function, I can’t too. But, at least get to know the existence of the function then, it can ease you in google search for relevant information.

Expression and operators and Statement is basically the same in all turing complete programming language.

Here is the resources to learn JavaScript:

Guides (After pick up ReactJS)

I will suggest you come back here after you have picked up the ReactJS.

#1 UI Component Libraries

In modern web development, our web application UI is expected to be responsive to adapt various screen size, especially mobile device, such as smartphone and tablets. However, it cost a lot of time and resources to write your own UI component library, don’t forget the cost to maintain it.

Most company don’t have these resources to invest in these area. Therefore, it’s good to use an open-source UI component library to minimise the cost.

UI component libraries come with a set of predefined and minimum functionality components. Most of the time, they are supporting responsive web design out of the box.

So what are the options for UI libraries in React ?

** Google “UI component library” if you looking for others.

#2 ES 6

Learn ES6/ECMA 2015, this is the recent version of JavaScript when ReactJS was released to the public.

Here is the github repo that I like when I first get in touch with the es6. Simple and straight to the point.

** If you like the repo, please give the author a star.  😁

#3 State

This section is assume you had take a look the ReactJS documentation – State and understand what a state is.

After getting to know ReactJS, we write the frontend of web application in component pattern. We can handle the state in component respectively. How about handle the state in between components and globally ?

Global state management libraries:

I would like to suggest that any new comer shall take a look at local state instead of using any global state management library at the beginning of writing React application.

Get yourself familiar with local state before moving to any global state management library. Most of the time, we don’t need global state management library.

As for myself, I like to manage the state locally instead of globally. This way when I refactor my code or removing any part/components. The state will be remove together. I don’t have to bother there is any unused global state and provide confusion to the codebase.

** I’m believe that many senior will ask their junior to straight jump into redux without knowing what it’s… They can’t even explain why they need redux for their application. Because tutorial ask you to follow ? someone suggest to you without giving any context ? Think twice.

#4 Callback in JavaScript

This is not about library. But, one of the important concept in JavaScript. A callback function. My journey in ReactJS told me that callback is important. Previously, I have wrote a blogpost for callback in JavaScript.

Why is it important ? We need it in handling event, asynchronous or intereactive action.

Conclusion

The things that can be solve using CSS, then go for CSS. The things that can be solve using HTML, then go for HTML. Even though you are using ReactJS, not necessary that all have to solve in JavaScript.

Don’t be afraid when someone tell you ReactJS is hard. When you start from fundamental, all gonna be easy.

Remove duplicated element

How to remove duplicate elements in JavaScript ?

tl;dr

[Update on 2 Dec 2019]

Ways to remove duplicated elements in JavaScript

  • Array.prototype.filter()
  • JSON
  • Set

#1 Using Array.prototype.filter()

const duplicated = [
  "John",
  "Johnny",
  "Jonathan",
  "Christine",
  "Conan",
  "Christine",
  "Johnny"
];

duplicated.filter(
  (element, index) => duplicated.indexOf(element) === index
)

// Expected result
// [ 'John', 'Johnny', 'Jonathan', 'Christine', 'Conan' ]

#2 JSON

const duplicated = [
  "John",
  "Johnny",
  "Jonathan",
  "Christine",
  "Conan",
  "Christine",
  "Johnny"
];

const unique = {};

duplicated.forEach(val => {
  unique[val] = val;
});

console.log(Object.values(unique));
// or console.log(Object.keys(unique))
// Expected result
// [ 'John', 'Johnny', 'Jonathan', 'Christine', 'Conan' ]

#3 Set

const duplicated = [
  "John",
  "Johnny",
  "Jonathan",
  "Christine",
  "Conan",
  "Christine",
  "Johnny"
];

// first, how to convert Array to Set
const setFromArray = new Set([]);

// second, how to convert Set back to Array
const arrayFromSet = [...new Set([])];

// So, in order to remove duplicate elements using Set
// first, convert the Array to Set
// Then, convert back to Array
console.log([...new Set(duplicated)]