Many of you are already familiar with hooks in React that let us use state and lifecycle methods in functional components. In this blog post I want to look in more detail at the useState hook. (By the way, if you are interested in why you should switch to functional components in React check out my blog post here).

Image for post
Image for post

Why do we need the useState hook? Before hooks were introduced in 2018 we could use state only in class components, updating it in the setState method. For a long time functional components couldn’t manage state on their own and were…


Using PayPal sandbox to create a fast and safe checkout option in your React based e-commerce platform

Integrating a shopping cart into your project? Chances are you want to use PayPal for an easy checkout option. People feel much safer making purchases on a website with a PayPal checkout option. In this blog post I’m going to walk you through setting up and testing a PayPal sandbox account.

Credit card and padlock on laptop keyboard with buy button and shopping cart icon
Credit card and padlock on laptop keyboard with buy button and shopping cart icon

PayPal offers a sandbox account for developers to use to implement and test PayPal checkout on their websites before going live. You can test your application and mimic live transactions by using personal and business emails provided to you by PayPal.

To start, you must set up your development…


AJAX guide for beginners

In this blog post I want to walk you through the basics of AJAX and show you some simple examples to help you get started.

Image for post
Image for post

AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. In more simple words, AJAX is a technique for accessing web servers from a web page. AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of the web page without reloading the whole page.

Modern…


A mini- guide to web accessibility

Image for post
Image for post

In this blog post I want to talk about web accessibility. I’m going to look into what web accessibility is, why it is so important, what groups of people need to be considered when building your app/website and how to implement accessibility into your project.

So, what is web accessibility? Accessibility is the practice of making your website usable by as many people as possible (MDN).

It is important to understand that in order to make an accessible website or app, we need to think not only of people with physical disabilities but also of people using devices with limited…


Switch to functional components with hooks instead

Once I learnt how to write functional components in React using hooks I was amazed by how much faster and cleaner it was; there is no way I’m going back to class components! I decided to look deeper into why functional components are preferable and if there is any advantage to using functional components over class components.

Image for post
Image for post

Let’s start with why React decided to stop using classes.

First of all, classes gradually become unreadable if they store different logic in one place as they grow. For example in componentDidMount() you can place a fetch request, you can set the style for an element, or connect to the WebSocket. All of…


Not many beginner developers know there is a very helpful tool that allows you to test APIs before integrating them into your project. Postman is a scalable API testing tool that helps you test either third-party APIs or your own APIs. Your requests can retrieve, add, delete and update data. In this blog post, I’m going to show you how to use Postman to send a GET request to a third-party API.

Image for post
Image for post

Firstly, you need to download an app on your computer https://www.postman.com/downloads/ or if you prefer you can use an in-browser version. After installation, the app will prompt you…


Thinking of building an image repository? There are many ways to handle image uploading in your Rails/React project; such as using CarrierWave, Active Storage and so on. In this post I am not going to talk about the advantages and disadvantages of one over the other. I am instead going to walk you through setting up the Cloudinary API, since this is a super easy way to handle uploading images.

Image for post
Image for post

Cloudinary is a cloud-based image and video management platform. It enables users to upload, store, manage, manipulate and deliver images and videos for websites. To start using Cloudinary you need…


You’ll need to know how to answer these 10 questions about React

My time at Flatiron has flown by with the speed of a rocket and now I am just four weeks away from graduation. While I am working on my Mod 4 project, I think it is about the time to start preparing for the future job interviews. I like the idea of working as a front-end developer. I did some research into what frameworks are hot right now; the top three are React, Angular, and Vue. Knowing at least one of these frameworks definitely puts you in front of the many other aspiring developers.

Image for post
Image for post

In this article I am going…


The reduce method in JavaScript is a super powerful method but one that causes a lot of confusion among beginner programmers. I will try to explain in simple words how reduce works and when it can be helpful.

Image for post
Image for post

The reduce method executes a reducer function (that you provide) on each element of the array, resulting in a single output value (spoiler: the output does not have to be an integer! It can be an array or an object). The reducer function takes 4 arguments:

- Accumulator (the value that we end with),

- Current Value,

- Current Index,

- Source…


Image for post
Image for post

A callback function in JavaScript is a function that is called after another function has finished executing.

Since JavaScript uses an event-driven programming model, it does not wait for a function to finish its execution, it moves on to the next one immediately. Callbacks make it possible for you to set a function to execute only after another function has finished executing.

Functions in JavaScript are first-class objects, meaning that they can be assigned to variables, passed as a function argument, or can be assigned as a return value of another function. …

Margarita Morozova

@FlatironSchool alumna

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