React.js

Setting Up a React.js Webpack and Typescript App From Scratch using Todo App

Introduction In this tutorial, we’ll set up a React.js Todo application using TypeScript and Webpack from scratch. This will include configuring Webpack to handle TypeScript and React code, setting up a development server, and building our project for production. Prerequisites Node.js and npm installed on your machine. Basic understanding of React.js, TypeScript, and Webpack. Project Setup First, let’s create a new directory for our project and initialize a new Node.js project.

Monday, July 22, 2024 | 6 minutes Read

Playwright and React.js Typescript Todo App Automated End to End Testing with Vite

Introduction In this tutorial, we’ll create a simple Todo app using React.js and TypeScript, initialized with Vite, and then we’ll write tests for it using Playwright. We will use playwright to do an end to end test which will simulate the user browser interaction with our todo app like adding new todos, deleting todos, upadtinhg todos e.t.c. By the end of this guide, you’ll have a solid understanding of how to use Playwright to test your React applications.

Tuesday, July 9, 2024 | 7 minutes Read

React.js Typescript Todo App Testing with Jest and React Testing Library and Vite

Introduction In this tutorial, we shall setup Jest and React Testing Library to perform integration test. We will be testing React.Js components, so this will not be an end to test, but we will be testing the individual coponents involved in the Todo App. At each stage, we will render the components invovled using the library functions provided by React Testing Library. We shall pass in properties to each component and test their behavious and visualisation by simulating clicks and text typing into textboxes using the appropriate functions.

Sunday, June 30, 2024 | 8 minutes Read

How to Dockerize a Laravel 11 and React 18 Application for Development

Introduction Docker has become a popular choice for development environments due to its ability to containerize applications and simplify deployment across different systems. This guide will walk you through dockerizing a Laravel 11 backend and React 18 frontend application, using Docker Compose to orchestrate multiple services. We wil assume that your laravel and react apps live in seperate folders and will be served through different domain. Suffice to say that the react app will not be served from the laravel backend but will use the laravel backend only as an api service.

Tuesday, June 25, 2024 | 6 minutes Read

React.js How to use User Roles to Secure Frontend Menu Links and Routes Using a Wrapper Component for User Authentication and Backend Permission Control

In modern web applications, managing user authentication and permissions is crucial. One effective way to handle this in React.js is by using a wrapper component. This article will guide you through creating a wrapper component that controls access to routes and links based on user roles and permissions. We will leverage Redux Toolkit to manage user state and permissions. Prerequisites Before we start, make sure you have the following setup:

Sunday, June 23, 2024 | 5 minutes Read

React Redux Toolkit with Typescript How to Set Up, Understand, and Use the library in Your React.js App

Using typescript and integrating React Redux toolkit into your React application can enhance your state management, making your app more robust and scalable. Redux Toolkit simplifies this process by providing a set of tools and best practices. This guide will walk you through setting up Redux Toolkit in a React application, understanding its key components, and effectively using it to manage your app’s state. Step 1: Setting Up Redux Toolkit npm install @reduxjs/toolkit react-redux Configuring the Store In your project, create a file named store.

Tuesday, June 18, 2024 | 4 minutes Read

React.js useEffect How to prevent component weird bahaviour due to multiple out of order server fetches

To prevent out-of-sync React Redux toolkit dispatches or just plain react.js in general which could result in unexpected behaviors due to asynchronous server requests returning at different times, we need to ensure that we handle component unmounts or updates correctly. This ensures that when a component re-renders or unmounts, for several reasons like a user clicks on another link related to the same component, it does not attempt to set state based on outdated or irrelevant asynchronous responses.

Tuesday, June 18, 2024 | 2 minutes Read

Cypress and TypeScript React.js Todo App End-to-End Testing

Introduction In this tutorial, we will build a React.js Todo app using TypeScript, initialize the project using Vite, and set up Cypress for end-to-end (E2E) testing. We will cover all the steps, including project setup, writing the Todo app, and creating Cypress tests. Prerequisites Before we start, ensure you have the following installed on your machine: Node.js and npm (or yarn) A code editor (VS Code is recommended) Initialize the Project with Vite Let’s create a new React project using Vite.

Thursday, June 6, 2024 | 5 minutes Read

Laravel 11 and React 18 Login and Registration tutorial with React Redux Toolkit

Introduction In this tutorial, we will be setting up an indepth tutorial guide of react.js and laravel 11 system for user authentication and registration. We will be using typescript on the react.js frontned, along with react redux toolkit, but do not worry as youc an follow along even if you only know javascript. React redux toolkit helps with state management. It might be overkill for a simple login registration app like this, but makes life very easy once the app codebase grows.

Tuesday, May 28, 2024 | 16 minutes Read