LinkedIn Reddit icon

Ola John

Typescript | Node | React | Vue

Learn React Hooks and Context API by Building a Recipe Search App Part 1

This is a beginner tutorial in understanding React Hooks and the Context API. In reality, this is more of an attempt to explain these concepts to my self and to interested readers. This will be in two parts with this first part focusing on the basics of hooks. The other part will hopefully focus more on more advanced use cases and the Context API. We’ll implement the search functionality and convert to using the Context API for managing states and avoiding props drilling

Part 5 - ES6 Destructuring

Destructuring assignments 👌 The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Part 4 - ES6 Module System

ES6 Module system 😃 ES6 modules are one of the more critically important concepts you will come across in every React program. I will not delve in-depth as to why the module patterns is important. You can read more about that here, here and here. Instead I will provide a quick overview of what they are and how to quickly get started with them.

Part 3 - ES6 Template Literals

Template literals (Template strings) 💪 String interpolation and multi-line strings are probably most of the template strings concepts you’ll encounter working with modern Javascript.Template strings are declared using backticks.

Part 2 - ES6 Ternary Operators

Ternary Operators 😍 The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.

The 20% Of ES6 you end up using 80% of the time - Let & Const.

Variable declaration with let & const This is the first part in the series. I will be covering the other sections in part 2. One of the more confusing part of learning a Javascript framework is that everything looks like magic at first. Especially when your knowledge of modern Javascript is not up to date. You are unsure which part of the code is some abracadabra or just plain ES6 Javascript.