On part 1, I went through how to set up a todo app using react, creating components so that when we add a new item to the list, it adds up in the list. Now I am going to cover how to handle the checkmarks to mark an item as completed, handle the delete button and filter the todos with their status.

Delete button

In the Todo.js component, I created a constant arrow function ‘deleteHandler’ so that I could modify the state using the filter method. In order to pass down the state for the setTodos from App.js to Todo.js, we had…


This week, I decided to create a “Todo” App using React. I’m going to cover how I realized it.

Set up the app

1. First, run the command ‘npx create-react-app your-app-name’ in your terminal. Then start by refactoring the App.js file deleting everything in the <header> and replace it with the name of your choice, in my case ‘Matt’s Todo List’


Hooks are a new addition in React 16.8. They let you use state and other react features without writing a class.

Before the release of Hooks, React Components were divided in two categories depending on whether the component was class-based or function-based.

What is a Hook?

A Hook is a special function that lets you “hook into” React features.

When would I use a Hook?

If you have a function component and you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.

Basic React Hooks

There are many hooks in React but I will talk…


During my last project review at Flatiron School, the instructor wasn’t fully convinced of my understanding of promises in Javascript. It is a very important concept in Javascript which is why I decided to write a blog about it.

What is a promise?

A Promise is a proxy for a value not necessarily known when the promise is created. In other words, it is an object that may produce a single value in the future: either a resolved value, or a reason that it’s not resolved.

A Promise is in one of these states:

  • pending: initial state, neither fulfilled nor rejected.
  • fulfilled: meaning that…

React Lifecycle

In React applications, we use components to split and isolate different parts of the web user interface into individual pieces. These pieces act independently and use a render function to return React elements in JSX. These elements describe how that section should be displayed to the user.

Each component has several “lifecycle methods” that we can override to run code at particular times in the process. It is very similar to our natural lifecycle: we are born, we grow and eventually we die. React components are created by being mounted onto the DOM, they change or grow through updates, and…


I started my job search about a month ago after graduating from Flatiron School on April 2021. Looking at the different job postings, I noticed that a lot of companies had graphQl in their requirements so I decided to start learning it.

What is graphQL?

It is a query language for reading and mutating data in apis.

As a back-end developer, graphQL provides a type system where you can describe a schema for your data and in turn, this gives front-end consumers of the apis the power to explore and request the exact data they need.

GraphQL vs Rest

Traditionally, web developers have consumed apis using…


I graduated as a Software Engineer at Flatiron School end of April 2021 after working for 13 years in the restaurant industry. It was a big decision and a long journey where I learnt technologies like Javascript, Ruby on Rails, React-Redux.

About me

My name is Matthieu, I grew up in France and at the age of 18 years old, I decided to pack my bag and travel the world. After graduating from a culinary school in the management part, I worked at several restaurants in France and Australia. I later had the opportunity to work at Epcot Center in Florida at…


While doing my job search, I noticed that Typescript was required by many companies. I decided to look into this programming language and I am going to do a resume of what I have learned so far.

What is Typescript?

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript.

Why Typescript?

As developers, we are trying to keep our code as DRY as possible to make our code look easier and not type anymore code…


In this blog, I will go over the steps to create the frontend to build a single login system using React.

  1. Create a folder where you want the project to be created and run ‘npx create-react-app frontend’. If npx is not working it means that you have an old version of node so make sure you have a new version of both node and npm.
  2. Install dependencies: run ‘npm install mobx — save’ and ‘npm install mobs-react — save’
  3. Update ‘package.json’ on line 5 adding a ‘homepage’ and set it to root to let React know where the homepage is…

One of my first interviews with skilled when preparing for my job hunting, they asked me to explain what was my definition of the virtual DOM in React… In this post, I am going to explain what is my understanding of this mysterious virtual DOM.

DOM

Just to get things straight, DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM.

Virtual DOM

The virtual DOM is an abstraction of the HTML DOM. It…

5beberson

French guy who recently moved to the United States. I am also changing career after having worked 13 years in restaurants. I will be going into coding.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store