This is a 3-day hands-on course covering the intermediate and advanced topics in Software Development using React, Redux and RxJS. Participants not only will learn the core principles and fundamentals of React but also will master how to develop and refine a sense for applying Redux for state management and observables with RxJS. The course...
Tag: React
Behold, React 18 !
Originally posted on dev. A new version of React was released on the 29th of March this year. The latest version, React 18, includes some out-of-the-box improvements, including concurrent rending, new APIs, and much more. In this article, we shall go through some of the new features that have been introduced in React v18. What...
The Anatomy Of My Ideal React Component
Originally posted on dev. import { useEffect, useState } from 'react' import { Link } from 'react-router-dom' import styled from 'styled-components' import tw from 'twin.macro' import { USER_ROUTES, useUser } from 'modules/auth' import { Loader } from 'modules/ui' import { usePost } from 'modules/posts' import { EmptyFallback } from './emptyFallback' const StyledContainer = styled.div` ${tw`w-100...
How to write performant React code: rules, patterns, do’s and don’ts
Performance and React! Such a fun topic with so many controversial opinions and so many best practices flipping to be the opposite in just 6 months. Is it even possible to say anything definitive here or to make any generalized recommendations? Usually, performance experts are the proponents of “premature optimisation is the root of all...
React Hooks from scratch
Originally posted on dev. What are Hooks React hooks are like Anchor ( same as what ships drop in the ocean to attach the ship and ocean floor) between React state (ocean floor) and life-cycle features ( ship ) of functional components. Only work with function based components, not with class based components. Both arrow...
React is Just Javascript
Originally posted on dev. Let’s start this post with a simple function in Javascript. function App(){ console.log('Hello World'); // logs 'Hello World' } App(); In the above code snippet, the function call on line no 5 calls the App function which outputs ‘Hello World’ in the console. Let’s React! React is simply Javascript. A component defined in React is...
15+ Fantastic React UI Libraries to Consider for your Project
Originally posted on dev. React is a very popular JavaScript library for building User Interfaces. Using React makes the process of building UIs very simple but you know what makes the process even easier? Using an already-made library. Here are over 15 popular React libraries you might want to consider using for your project: Blueprint Blueprint is...
React State 5 Ways
Originally posted on dev. To see the code for these examples, click here There are seemingly endless ways of dealing with state management in React. Trying to understand the options, the tradeoffs between them, and how they work can be overwhelming. When I’m trying to learn something, seeing a side by side comparison implementing some common...
listmonk: high performance, self-hosted newsletter and mailing list manager with a modern dashboard. Go+ React
listmonk is alpha software and may change and break. Use with caution. That said, it has been in active use at zerodha.com for several months where it has processed hundreds of campaigns and tens of millions of e-mails. listmonk is a standalone, self-hosted, newsletter and mailing list manager. It is fast, feature-rich, and packed into a single binary. It...
The power of dynamic imports in Javascript and React
Dynamic imports are great, they’ve been out there for a while and presume many improvements in the way we treat modules/components. In this article, I’m going to be explaining how they work, why they’re so good and some of the things we could accomplish by using them. If you read my previous article about factory pattern...
React 101 – The Practical Introduction
Have you went through the official React’s Tic Tac Toe tutorial? If you have, you might notice this bolded text in the introduction You might be tempted to skip it because you’re not building games — but give it a chance. I’m guessing even React team knows that it’s not that interesting to build a Tic...
Crana – React & NodeJS apps in under a second
I’ve used the opportunity of Hacktoberfest and tried to publish a project I was lately working on: Crana(CReate A Node App), a CLI tool which makes developing applications with a NodeJS backend and a React frontend a breeze. npm i -g crana crana init my-awesome-project cd my-awesome-project crana dev The problem Most of the projects I was working on...
Scalable React Components architecture
Originally posted at carloscuesta’s blog It’s been a while since I’ve started working with React and React-Native in production. One of the greatest things about React is the flexibility the library gives to you. Meaning that you are free to decide how do you want to implement almost every detail of your project for example the architecture and structure. However this freedom on the long term, could...
Smart Images in React Native
Update. In order to avoid common pitfalls when dealing with React Native images, you should also checkout the story below. All these recipes are available in the react-native-expo-image-cache npm package. 5 Things to know about Images React Native medium.com Images & React Native is a delicate topic. In a recent project, I needed to cache image efficiently as well...
Rethinking JavaScript: The complete elimination and eradication of JavaScript’s this.
If this is so difficult to reason about, why don’t we just stop using it? Seriously. Why. don’t. we. just. stop. using. it.? If you have read How I rediscovered my love for JavaScript after throwing 90% of it in the trash, then you won’t be surprised when I say I am throwing this away. this is gone. goodbye. this won’t be missed. With functional...
React v16.4.0: Pointer Events
The latest minor release adds support for an oft-requested feature: pointer events! It also includes a bugfix for getDerivedStateFromProps. Check out the full changelog below. Pointer Events The following event types are now available in React DOM: onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut Please note that these events will only work in browsers that...
How components won the “framework wars”
React vs Angular vs Vue: Why it doesn’t matter. 2018 marks the end of JavaScript fatigue and the “framework wars” A typical frontend/JavaScript developer career usually involves some jQuery and associated plugins before moving on to React, Angular or Vue. Having experienced React, Vue and Angular, it seems they solve similar problems in a similar...
Building a web app with Go, Gin and React
L;DR: In this tutorial, I’ll show you how easy it is to build a web application with Go and the Gin framework and add authentication to it. Check out the Github repo for the code we’re going to write. Gin is a high-performance micro-framework that delivers a very minimalistic framework that carries with it only the most essential features,...