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

Gracefully integrate Reactjs with Ruby on Rails in SaaS Applications

This blog illustrates how we can easily setup a ruby on rails application with ReactJs as a front-end framework

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

Getting started with PreactJS — A Step By Step Guide

PreactJS is a fast 3kB alternative to React with the same ES6 APIFirst, some background…PreactJS is developed by Jason Miller — one of my programming heroes. The framework was developed with a goal of providing high performance, memory efficiency and close compatibility with React API with an aim to keep the footprint as small as possible i.e 3kb. Preact is increasingly getting adopted in the community with a bunch of high load websites already using it successfully in production. Housing Go is now powered by preact. 🔥 🎉 Thanks to @_developit and @brian_d_vaughn for their help. pic.twitter.com/

Server Side Rendering in React using Next.js

Server side rendering need lots of configuration to get up and running if you choose to use boilerplate which is filled with package that you may not need, well next.js is developed to solve this problem and it makes server-side rendering in React a breeze What you will learn in this article Get up and running with Next.js Add Client-side transitions between routes How to do handle Ajax in Next.JS create reusable component for rendering Layouts To get started with you need two things Nodejs and yarn installed  you can do that by typing npm install -g