In this article, we are going to learn how to create and communicate between components in Svelte by building a mini Todo application.

Requirements

Let’s first define the functionalities of the Todo app.

• The user can see the list of to-dos
• The user can add a new to-do using a form
• The user can delete a to-do

Here is how the app looks like.

Fetching data inside a React function component may be a common task we have to do. Let’s see how we can achieve that and also handle the three possible states of the request: Loading, Success, and Error.

Function List Component

Let’s start by building a function List component displaying a list of todos.

function List(){
 const [list, setList] = useState([]);
  
 return (
   <div>
      {list.map(todo => 
       <div key={todo.id}>{todo.title}</div>)}
    </div>
  );
}

The List components stores a list of todos and displays it on the screen. The list is initially empty.

The useState hook allows us to define the state inside a function component. The…

From Object-Oriented to Functional

Nowadays state management has become a common challenge when developing web applications. The time when we directly changed the UI for display data is long gone. All major UI libraries come with a new approach, changing the UI means actually changing the state.

The obvious question now is what state actually is.

State is data basically.
Is any data used in the application state?
The answer is “No”. Only the data that is stored becomes state. If the data doesn’t change then is just a configuration object used inside the application. …

In this article, we are going to look at how to remove duplicates from an array. We will analyze two kinds of values: primitives and objects.

Primitives

Consider an array of strings like the following.

const arr = ['one', 'two', 'two', 'three'];

We want to create a new array without duplicates.

Set

Sets are collections of values. A value in the Set may only occur once. A value is unique in the Set's collection.

As we can see values are unique in a Set collection, so if we transform the array into a Set collection and then back into a new array…

When you make a quick google search for currying these are the first kind of examples you will find.

You will see a function sum adding two numbers.

function sum(a, b) {
  return a + b; 
}

And then the curried version that looks like this.

function sum(a) {
  return function(b){
    return a + b;
  }
}

Or you can see the same sum curried function written using the arrow function.

const sum = a => b => a + b;

Instead of invoking the function and passing the two arguments sum(1,2), the curried function requires passing the arguments in…

In this article, we are going to take a look at how to retrieve and display a list of objects using React Hooks, GraphQL, and Apollo client.

List Function Component

Let’s start by displaying a list of objects using a React function component.

import React from 'react';function List({posts}) {
  return (
    <div>
      {posts.map(post => 
        <div key={post.id}> 
          {post.title}
        </div>
      )}
    </div>
  );
}export default List;

The List function component takes a list of post objects and displays the title of each post in a div element.

In the App parent component, a hardcoded list is created and sent to the List function…

Encapsulation is about data-hiding. That’s it, we have private data behind public methods working with that data.

The main idea is to expose as little as possible to the outside world. Minimizing the connections with the external environment reduces unexpected changes. What we can hide, we can change.

Let’s look at how to achieve it.

Classes

A new option for achieving encapsulation is to use the hash # symbol to declare a private variable inside a class. This feature is part of ES2020.

It is great that classes will support encapsulation, but there are still some annoying things that we…

In this post, you can find a few milestones for starting out with React and some helping materials.

JavaScript Fundamentals

• Fundamentals: primitives, objects, functions, arrays, this keyword

Learn these JavaScript fundamentals and become a better developer

• ES6 features: let, const, modules, spread operator, rest parameter, property short-hands, destructuring assignment, default parameters, template string literals, promises, classes, arrow functions

These are the features in ES6 that you should know

• list operations: filter, map, reduce

Make your code easier to read with Functional Programming

Functional Concepts

• first-class functions. Functions as values.
• pure functions
• immutable data

Learn immutability with JavaScript

• pipeline
• higher-order functions

React

• Function component
• Props —…