The example below contains a function that takes in 2 values and returns the sum of those numbers:
A conditional statement checks a specific condition(s) and performs a task based on the condition(s).
The if…else statement makes binary decisions and executes different code blocks based on a provided condition. …
Iterators are methods called on arrays to operate on every array element and return values. In this blog post, I will focus on explaining the three most popular iteration methods: .forEach(), .map() and .filter(). I will explain the syntax for these methods, their return values and how to choose the right iterator method for a given task.
The .forEach() method executes the same code for each element of an array. Let’s look at the code below:
fruits.forEach() calls the forEach method on the fruits array. It iterates through the array and executes the callback function by taking current element as an argument. The return value for .forEach() method is alway undefined. …
In CSS, selectors are used to select or find the HTML elements of a web page that we wish to style. There are 5 different types of CSS selectors available: CSS Element Selector, CSS Id Selector, CSS Class Selector, CSS Universal Selector, CSS Group Selector. In this short blog post we’ll go through the different types in great detail and see how they work.
The CSS Element Selector, selects all HTML elements based on the element name. Below, all <h1> elements will be left-aligned with a green text colour:
Props, short for properties, are arguments passed into React components via HTML attributes.
You can think of props as a way of passing data from component to component. Props can be any value including: strings, objects, arrays, functions, etc. They enable us to make our components more dynamic, and more reusable.
For example, let’s say we have a <BlogCard /> component which has a title, an image and content as attributes or properties. If we hardcoded our <BlogCard /> component it will look like the below:
REST stands for REpresentational State Transfer, and it is an architectural style that defines how Web standards, such as HTTP and URIs, are supposed to be used.
Rails has RESTful principles built into its core, so, whether you are utilizing the built-in view rendering system or using the application purely as an API, you will have the tools necessary to follow standardized routing procedures.
Let’s take a look at a practical example of how this works. If we want to build out a blog feature, we would need the system to have four key actions — Create, Read, Update, and Destroy — commonly known as ‘CRUD’ actions. In addition to the CRUD actions, we will also need an index page that lists out all of our blogs — that’s our fifth route. Since our users will need to have a visual interface for creating and updating records (a form for creating and another form for updating), we will need two more routes. Putting all of that together, you will see that we end up needing seven different routes. The GET routes are all routes that usually render some erb content to a web browser. These are the routes that our users will work with everyday. …
React was designed to allow developers to create complex and highly interactive UIs. React components can quickly adapt to changes from user interactions or updates on the site. In order to enable this, all React’s components have a lifecycle which you can monitor and manipulate during its three main stages: creation, updating, and deletion.
You can think of lifecycle methods as opportunities for you to manipulate how the components of your application reacts to different changes in your app. …
JSX allows us to add HTML elements in React, thus making it easier to write React components in an efficient and expressive manner. In this blog I will briefly explain what JSX is, then I will focus on explaining some of the unique syntax of JSX.
In order to fully understand the differences between each of the identifiers we first need to understand the concept of scope.
1. Global scope
2. Function (local) scope
3. Block scope (new with…
Arrow functions were introduced in ES6 and they allow us to write a more concise code. While both regular and arrow functions work in a very similar way, there are a few differences between the two.
It is impossible to use “this” keyword in arrow functions while in regular functions ‘this’ keyword can be used without any problems.
2. ‘New’ keyword
A constructable function, can be called with ‘new’, i.e. new User(). A collable function can be called without new.
Unlike the regular functions, the arrow functions are not “constructible” but “callable” so the keyword “new” won’t work. Regular functions are both “callable” and “constructible” therefore we can use the “new” keyword with regular functions. …