React Design Patterns Basic to Advance - Part 2

In the previous article of the React Design Patterns Basic to Advance series, we became familiar with the Basic Design Patterns which are widely used in React. In this article, we will learn about the various Advanced Design Patterns in React. React design patterns basic to advanceAs a Frontend developer and working on React for several months, one of thetopics I have paid close attention to is Design Patterns. In this article serieson React design patterns, I will share my learnings. This blog is completely about the design patterns which are widely used in Reactapp deve…Kiprosh BlogsShubham JajooAdvanced Design

React Design Patterns Basic to Advance Part 1

As a Frontend developer and working on React for several months, one of the topics I have paid close attention to is Design Patterns. In this article series on React design patterns, I will share my learnings. This blog is completely about the design patterns which are widely used in React app development. So before diving deep directly into design patterns, we will look into a short introduction of React and JSX. React React is a JavaScript library for building user interfaces. It lets you compose complex UI from small and isolated pieces of code called Components. Component in React

How to resolve the issue with JW player that keeps playing audio despite switching to another player

Recently we have introduced a live streaming feature in our application. For that, we have used a JW player as it is easy to show youtube videos first and then streaming live events. We have also implemented a feature for an alternate player option for the end-user if there is any streaming issue. For that, we have used Flow player as it is lightweight and powerful. So we have JW Player as the default player and Flow player as an alternative. We have integrated the JW player library into our application from here and the flow player library from here.

All you need to know about Products in Reaction Commerce

In this article, we will explore the evolution of `Product` in Reaction from creation to the final order of the product. We will also explore what all phases a product goes through, all its important fields and their significance.

Become Zero to Hero with React configuration, Webpack and Babel

In this article, we will dive deeper to understand how does React configurations work. We will also see how do things come to action in React which are usually not possible in plain JavaScript?

Understanding "this" keyword in Javascript & React

This blog helps you understand the 'this' keyword in JavaScript and using it effectively.

A Quick Introduction to Next.js

Next.js is a React framework that is used to develop front-end web applications and make the life of developers so much easier.

React Router Frequently Faced Problems

Routing is one of the toughest thing to Implement in Single Page App In React Ecosystem it is pretty much industry standard to use React Router to do routing. React Router have nice API and pleasant to work with but there few Issue that I faced while using React router If you have declared component and it is not rendering It could be below three Issues. First, if you are using any state management solutions like Redux or Mobx if you have assigned different components to render in a different path like below we are using render function instead of

JavaScript Module design pattern

JavaScript modules are the most used design pattern to keep your code separate from your components which provides loose coupling to your code. Modules are JavaScript classes, which provides protection of states and behaviours from being accessed by other classes. The module pattern allows for public and private access levels. This is how the code looks like: (function() { // declare private variables and/or functions return { // declare public variables and/or functions } })(); Here we have to instantiate the private variables and functions before returning our object. Code outside of our function is unable to access these private variables since it is

How to style React Component with Styled Component

There are many ways you can style react component you can use are Inline CSS and there are many React Libraries like typestyle which is good but there have some other flaws in it like it forces you to write CSS in javascript object means if you want to write CSS as background-color:red you would have to write as backgroundColor:'red' like this which seems very weird but if you use styled component is very simple and also it allows use style react in plain CSS First, we gonna create new project by using create-react-app CL which allows us