DEV Community: Daniel Onugha

React Management hook Vs Redux

Daniel Onugha — Wed, 29 Mar 2023 15:40:20 +0000

In building applications, managing data is essential, redux and react hooks are different things with different distant goals. It is said that react state management is one of the hardest problems developers encounter while trying to create react app.

What is react management hook?
React management hooks are a feature in React that allow you to manage state and side effects in functional components. They were introduced in React 16.8 and are a more modern way of handling state and side effects compared to class components.

What is redux
Redux is a state management library that can be used with React (and other frameworks). It provides a centralized store for all the states in your application and uses actions and reducers to manage updates to the store. Unlike React hooks, Redux is not a part of React and requires additional setup and configuration to use.

Principles of redux
Redux is a state management library for JavaScript applications that follows a set of principles to make it easy to manage and update the state of an application predictably. These principles are:

Actions: In Redux, an action is a plain JavaScript object that represents an intention to change the state in a Redux application. An action object must have a typeproperty, which is a string that describes the type of action that is being performed, and a payloadobject contains the information that should be used to change the state. Actions may also include other properties that provide additional information about the change that should be made to the state.

// action.js
const reduxAction = payload => {
  return {
    type: 'action description',
    payload
  }
};

export default reduxAction;

The textproperty provides the text of the new to-do item. Actions are dispatched using the store.dispatch() method. The dispatch action is then passed through the reducer functions, which update the state of the application based on the type of action.

Reducers: A reducer function in Redux is responsible for modifying the state of the application in response to actions dispatched to the store.


const reducer = (state, action) => {
  const { type, payload } = action;
  switch(type){
    case "action type":
      return {
        ["action description"]: payload
      };
    default:
      return state;
  }
};

export default reducer;

Store: The Redux store is a centralized container for the state of a JavaScript application using the Redux library. It holds the current state of the application and provides a way to access and update the state through dispatching actions. The store is created using the create store()method from the Redux library and it must be the single source of truth for the entire application. Redux bears only one store in any redux application:


import { createStore } from 'redux'

const store = createStore(componentName);

The store also allows for adding middleware, which allows for modifying the dispatch actions before they reach the reducer, and for adding subscribers, which receive notifications whenever the state changes.

What are React Hooks?
React Hooks are a feature in react that allows you to add state and other React features to useful components. Before the introduction of hooks, state, and other React features could only be used with class components.
Hooks are a way to reuse stateful logic, not just state, between components. There are several built-in hooks such as useState, useEffect, and useContext, but you can also create your hooks.
Hooks provide a way to add state, side effects, and other React features to functional components in a way that's easier to understand and use. Some of the most commonly used hooks include useStatewhich allows you to add state to useful components and useEffectwhich lets you perform side effects in response to component updates.

The useReducer Hook:

The useReducerhook is a hook in React that allows you to manage the state of your component using a reducer function. A reducer is a pure function that takes the current state and an action as arguments and returns a new state.
The useReducerhook provides a way to manage a state that is more complex than what can be achieved with the useState. It is especially useful when you have state updates that are related to one another, and you want to manage those updates in a single, centralized location.
The useReducerhook takes two arguments: the first argument is a reducer function, and the second argument is the initial state. It returns an array containing the current state and a dispatch function, which is used to dispatch actions to the reducer.
Here's a simple example of how you can use the useReducer hook:


import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

The useContext Hook:
The useContexthook in React allows you to access data from a context object in a functional component. The context system in React provides a way to share data across multiple components in your application, without having to pass the data down through props.
Here's a simple example of how to use the useContexthook:


//javascript
import React, { createContext, useContext } from 'react';

const UserContext = createContext({ name: 'Guest' });

function UserDisplay() {
  const user = useContext(UserContext);
  return <div>{`Hello, ${user.name}`}</div>;
}

function App() {
  return (
    <UserContext.Provider value={{ name: 'MUO' }}>
      <UserDisplay />
    </UserContext.Provider>
  );
}

In this example, we create a context object with createContextand pass a default value of { name: 'Guest' }. Then, we use the useContexthook in the UserDisplaycomponent to access the data from the context object. The UserDisplaycomponent will display "Hello, ChatGPT".
Finally, we wrap the UserDisplaycomponent with the UserContext.Providercomponent and pass a value of { name: 'MUO' } to it. This makes the data from the context object available to all components inside the provider.

React Hooks vs Redux State Management.
React Hooks and Redux State Management are two approaches for managing the state in a React application.

React Hooks are a new way to manage states within a React component. They allow developers to manage state and side effects within the component itself, without the need for a separate state management library. React Hooks are easier to understand and use compared to traditional React state management, making them a good choice for smaller and simpler applications.

Redux State Management is a state management library that helps manage the global states within a React application. It provides a centralized store for data, which makes it easier to share data between components. Redux also provides a robust set of tools for debugging and testing the application, making it a good choice for larger and more complex applications.

Ultimately, the choice between React Hooks and Redux State Management depends on the size and complexity of the application. React Hooks are a good choice for simple and small applications, while Redux State Management is a better choice for larger and more complex applications.

Conclusion
Both React Hooks and Redux State Management have their advantages and disadvantages as we explored in the article. React Hooks provide a simpler and more intuitive way of managing state within a component, while Redux State Management provides a centralized way of managing state across the entire application using the useContexand useReducerhooks. Choosing between the two is a matter of preference or choice.

Rust and Scala: Comparisons

Daniel Onugha — Mon, 27 Mar 2023 13:38:48 +0000

Rust and Scala belong to the "Languages" category of the tech stack, they are both open-source tool, which is mostly used in most cases, the application grows, has scalability, and has a unique application function.

What is rust?
Rust is a systems programming language developed by Mozilla Research. It was created to provide a safe and concurrent alternative to lower-level languages such as C and C++. Rust also has a modern syntax and type system, making it easier to write clean and maintainable code.

[why choosing rust]

Features of a simple Rust Program

Main function: The main function acts as the starting point of the program and is executed first when the program is run.
Variables: Variables are used to store values and can be declared using the let keyword.
Data Types: Rust supports various data types including integers, floating-point numbers, strings, and booleans
Ownership: Rust implements an ownership system that ensures memory safety and prevents data from being accidentally overwritten or deleted.
Cargo: Rust provides a package manager called Cargo that allows developers to manage dependencies and build their programs easily.

Anatomy of simple rust program
A simple Rust program consists of the following components:

Main function: This is the entry point of the program and is defined with the fn main() syntax.

Here’s a minimal “Hello, there!” program in Rust:

fn main() { println!(“Hello, there!”); }

Modules: Modules are used to organize code into reusable and organized chunks.
Variables and Constants: Variables store values that can be changed, whereas constants are fixed values that cannot be changed.
Functions: Functions allow you to summarize and reuse logic in your program.

Cases where Rust is popularly used
Rust is a systems programming language and is used in a variety of applications where performance, reliability, and stability are crucial. Some popular use cases of Rust include:

Systems programming: Rust is designed for systems programming and is used to build operating systems, device drivers, and game engines.
Web development: Rust has a growing ecosystem for web development and is used to build high-performance web applications and APIs.
Networking: Rust's low-level control and high-level abstractions make it a popular choice for networking applications and protocols.
Game development: Rust's performance and safety features make it a suitable choice for game development, both for game engines and game logic.
Blockchain: Rust is used to build blockchain infrastructure and decentralized applications, due to its memory-safe and concurrent design.

What is Scala?
Scala is a programming language that operates on the Java Virtual Machine and provides support for functional programming in addition to object-oriented programming. It was created to address some of the limitations of Java and provide a more concise, scalable, and expressive language for developers.

Features of Scala

Object-Oriented: Scala supports object-oriented programming, which makes it easy to work with objects, classes, and inheritance.
Concurrent: Scala supports concurrent programming and has features that make it easy to write multi-threaded applications.
Interoperability: Scala is fully interoperable with Java and can access Java libraries and classes seamlessly.
Syntax: Scala has a concise and expressive syntax that makes it easier to write complex applications.
Traits: Scala has a concept of traits, which is a way to share common behavior among classes.

Anatomy of a simple Scala program
Here is an anatomy of a simple Scala program:

Loops: Loops, such as for and while can be used to repeat a block of code.
Expressions: Expressions in Scala can be simple calculations or complex operations.
Return statement: The return statement is used to return a value from a function.
Exception handling: Exception handling is used to handle errors and exceptions in the program.
Closing bracket: The closing bracket of the object marks the end of the program.

Example of a simple Scala program:
Every Scala program should start with the mainmethod as seen in the code block below, the object, and an expression.

object makeuseof { def main(args: Array[String]) { println(“Hello there!”) } }

The printlnmethod prints the data argument in a new line.

Popular Scala use cases
Scala is a popular programming language that is used for a variety of purposes, including:

Web development: Scala is often used for building high-performance, scalable web applications, particularly when using the Play framework.
Big Data Processing: Scala is used in processing large datasets with tools like Apache Spark and Apache Kafka.
Machine learning: Scala is used in the development of machine learning algorithms, particularly when using the Apache Spark MLlib library.

These are the basic building blocks of a Rust program. To create more complex applications, you can also make use of features like crates, enums, traits, and more.

Comparing Scala and Rust
Scala and Rust are both programming languages, but they have some key differences:

Scala:

Object-Oriented and Functional programming language
Runs on the Java Virtual Machine (JVM)
Has strong support for functional programming concepts and is used for building complex applications
Known for its expressiveness and concise syntax

Rust:

System programming language
Runs natively and can be used for low-level programming tasks such as creating operating systems or game engines
Offers low-level control and performance optimization along with modern programming abstractions
Known for its focus on safety and security by providing memory safety guarantees without a garbage collector

Conclusion
In conclusion, Scala is more suitable for building complex applications that need functional programming abstractions, while Rust is more appropriate for system-level programming tasks where safety and performance are crucial.

Configuring worker plugins in Vite 2.8

Daniel Onugha — Thu, 02 Feb 2023 06:05:18 +0000

Assuming you have made use of the framework vitefor frontend works, you should have already gotten used to the service workers, both the installation and registering it.

Vite plugins extend their well-designed interface with a few Vite-specific options. With this, you can work and write a vite pluginonce and it will function.
This article will explore how to properly configure worker plugins with Vite for a functional progressive web application (PWA).

What is Vite?
Vite is a build tool that is designed to channel the gap between current and next-generation web development. It centers on providing a faster and more performant skill for developers and current web projects.
Supposing you have used the Vue framework before, you should have used the Vue CLI to develop big and complex projects. While the Vue CLI is a great build tool Vue CLI which stands for (command line interface) is an excellent tool for building Vue developers to manage webpack internals, Evan You, the creator of Vue, created a lightning-fast build tool called Vite in 2020 and also open source JavaScript framework.

What is PWA?
Progressive web application (PWA), from my own view, I see PWA as a technology that brings web and mobile development to a new level and a new generation. PWAs define web apps that use manifests, service workers, and other web-platform features in combination with progressive enhancement, giving users a relatively almost the same experience as native applications.
Some benefits of using a PWA include easy and fast installation, progressive enhancement, network independence, security, and SEO benefits.

What are service workers?
You may think of a service worker as a proxy server that stands within a web app, the browser, and the network, when available. A service worker's goal is to create productive offline experiences, update assets on the server, intercept network requests, and take action based on whether or not the network is available.

What is a manifest?
Web app manifests are the portion of a collection of PWAs that provide information about the web app in a JSON text file. A PWA manifest consists of its name, version, description, icons, and any other essential resources that are related to the application.

Project setup
Now that we know all the technical argot encircling progressive web applications, we’ll learn and know how to configure worker plugins with Vite.

We will be using VitePWA plugin, in our demo, created by Anthony Fu. This plugin helps to attach service workers in a Vite app for handling:

- Caching resources
- Offline support
- Receive push notifications when new content is available.

Scaffolding the Vite project
If you don’t have a Vite-based project already, that you’d like to use to configure your PWA, you can create one from any of the available templates. You can also create a new Vite project byrunning the following command:

npm create vite@latest

Whenever I’m creating my Vite app, I choose the Vue framework and the JavaScript variant. After the app scaffold is completed, install the application dependencies in the project with the command below:

npm install

In order to make the local server, you can run the following command below:

npm run dev

Configuration
Let’s proceed and configure our application's worker plugins, VitaPWA.

Firstly, we have to install the package as a dev dependency by running the following command:

npm i vite-plugin-pwa -D


// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

The plugin also accept presets containing different plugins as a solo element. This is utile for the complicated attributes (such as framework integration) that are carried out using various plugins.
False plugins will be overlooked, which can be used to simply enable or disable plugins.

Registering the workers for our Vite app
Now, that we have installed the worker's plugin, we will need to register the service workers. The site-plugin-PWAplugin registers the service worker automatically using the injectRegisterconfiguration option, which is not mandatory.

To register the service workers, update the vite.config.js or vite.config.ts file, according to the variant you preferred upon project scaffolding. Import VitePWA from vite-plugin-PWA and the plugin so that it looks like the code below:


mport { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [vue(), VitePWA({ registerType: 'autoUpdate' })],
});

Since we have registered our Vite-plugin-PWAwith the code block above, we can now make use of it to generate its web app manifest and place it in front as against building an app.

You can build your Vite app using the command below:

npm run build

With this little configuration of the vite-plugin-pwaplugin, our application will now be able to create the web app manifest, put it at the entry point upon app build, create the service worker, and register it in the browser.
If the version of your vite-plugin-PWA is ≤v0.12.2 or less, then make use of injectRegister to configure the registerType as stated below:


impor t { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    ...,
    VitePWA({
      injectRegister: 'auto'
    })
  ]
})

We are going to build the Vite application using the code block below:

npm run build

When you build an app, a distfolder is a folder that holds or handles the different files created, which includes the JavaScript variant for the service worker file and the app manifest.

Now, that we have finally configured the service worker successfully with our vite application created earlier, the app can function completely as work offline and as a functional web application.

Conclusion

The vite-plugin-pwaoffers a convenient and easy way to build a standard web application with Vite into a wholly developed PWA.
In as much as building a good web application look difficult, it would be nice to make use of this framework VitePWA Plugin Just install the plugin and watch it do all the bulky work.

Building a Login System using Redux

Daniel Onugha — Wed, 26 Oct 2022 08:38:33 +0000

A login is a set of credentials used to authenticate a user. Most often, these consist of a username and password. However, a login may include other information, such as a PIN number, passcode, or passphrase. React Redux is the official React binding for Redux. It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data. Redux helps apps to scale by providing a sensible way to manage state through a unidirectional data flow model. React Redux is conceptually simple.
When a login fails (i.e., the username and password combination does not match a user account), the user is disallowed access. Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.

Goal
In this article we are going to display how to create a Login System using Redux in React Applications.

Table of Content

Introduction
Creating our React App
Creating our Login Application
Login Value Inputs
Implementing Redux
Final Outputs
Conclusion

Installing and Setting up React
We will create a new React app with the command below:
npx create-react-app Login System

We have successfully installed our react application.

Creating our Components
We created the basic Components index.js and the App.js

The full index.js file

Below is the App.js after linking the all the folders and files to it

Creating our Component folder
Next Create a Component folder inside the src folder and name it Login.js. Open the file, copy the code below and paste it inside:


import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { login } from "../features/userSlice";
import "./Login.css";
const Login = () => {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const dispatch = useDispatch();
    const handleSubmit = (e) => {
      e.preventDefault();
      dispatch(
        login({
         name: name,
         email: email,
         password: password,
         loggedIn: true,
        })
      );
    };

    return (
        <div className="login">
          <form className="login_form" onSubmit={(e) => handleSubmit(e)}>
            <h1>Login Here 📝</h1>
            <input
             type="name" 
             placeholder="Name" 
             value={name} 
             onChange={(e) => setName(e.target.value)}
            />
            <input 
             type="email"
             placeholder="Email"
             value={email}
             onChange={(e) => setEmail(e.target.value)} 
            />
            <input
             type="password"
             placeholder="Password"
             value={password}
             onChange={(e) => setPassword(e.target.value)} 
            />
            <button type="submit" className="submit_btn">
              submit
            </button>
          </form>
        </div>
    );
};
export default Login

Creating a Login button for our Form
Here we’re creating this using a type submit button using a special class “btn”, below are the block of codes used:

<button type="submit" className="submit_btn">
   submit
</button>

We created a Login form in the code block above.
Styling the Login.js to beautify it, create a file under the Components folder named Login.css:

.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    align-items: center;
    font-family: "Inter";
}
.login_form {
    display: flex;
    flex-direction: column;
}
.login_form>h1 {
    font-size: 35px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    letter-spacing: -1px;
}
.login_form>input {
    min-width: 380px;
    padding: 20px 0;
    padding-left: 15px;
    margin-bottom: 10px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.24);
    font-family: "Inter";
    border-radius: 2px;
    font-size: 15px;
}
.submit_btn {
    padding: 17px 30px;
    margin-top: 10px;
    background: black;
    border: none;
    color: white;
    font-size: 14px;
    font-family: "Inter";
    border-radius: 3px;
}`

Let’s also add some css to the App, so we start by creating a new file under the Component folder and we should name it App.css.

The code block above is basically adding styles to our App.

Creating a Logout File for our Form

Still the same way we created our Login.js file, create a file under the Components folder called Logout.js and it’s css (Logout.css):

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { logout, selectUser } from "../features/userSlice";
import "./Logout.css";
const Logout = () => {
  const user = useSelector(selectUser);
  const dispatch = useDispatch();
  const handleLogout = (e) => {
    e.preventDefault();
    dispatch(logout());
  };
    return (
        <div className="logout">
          <h1>
            Welcome <span className="user_name">{user.name}</span>
          </h1>{""}
          <button className="logout_button" onClick={(e) => handleLogout(e)}>
            Logout
          </button>
        </div>
    );
};
export default Logout;`

Above is the full code block of our Logout.js file.

Creating the Logout button for our Form

Here we’re creating the Logout button, with the blocks of codes below;

<button className="logout_button" onClick={(e) => handleLogout(e)}>
  Logout
</button>

You can add the following styles inside your Logout.css file;

Implementing Redux
The first step is to basically open a new folder, name it app, afterwards you create a file called store.js. After that we’re going to open another folder named features, you also create a file name userSlice.js.

Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node application. To download redux toolkit, you have to look at the code block below :

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

And also you have to install Redux itself:

# NPM
npm install react-redux

# Yarn
yarn add react-redux

When you’re done installing it, the first thing is to import createSlice from Redux toolkit using the below block of code:

import { createSlice } from "@reduxjs/toolkit";

Below is the userSlice.js file;

Above is the store.js, breaking it down we start by importing configureStore from Redux toolkit using the below code block:

import { configureStore } from "@reduxjs/toolkit";

After inputting all the code and making sure our App is working.
This would be the result:

And, after clicking the submit button:

When you are done with the App, you click on Logout, it takes you back to a fresh form:

Conclusion
A Login form is used to enter authentication credentials to access a restricted page or form. The login form contains a field for the username and another for the password. When the login form is submitted its underlying code checks that the credentials are authentic, giving the user can access the restricted page.
In this article, we learnt about User Login using React and Redux.

Generating QR Codes using React

Daniel Onugha — Sun, 25 Sep 2022 16:56:36 +0000

Generating QR Codes using React
QR code (quick response code) were the first retailer here to offer QR codes in their advertising, it can be read easily by a digital device and which stores information as a series of pixels in a square-shaped grid.
It’s a machine-readable code consisting of any array of black and white squares, typically used for sorting URLs or other information for reading by the camera on a smartphone.
A QR code (an initialism for quick response code) is a type of matrix barcode (or two-dimensional barcode)invented in 1994 by the Japanese automotive company Denso Wave. A barcode is a machine-readable optical label that can contain information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application. QR codes use four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently; extensions may also be used.
Goal
In this article, we are going to display how to create QR Codes in React.js applications.

Table of Content

Introduction
Installing and Setting up React
Creating our Components
Using the QR code package
Making use of the QR Code Reader
Conclusion

Installing and Setting up React
The next step is to install our react before we create our form application. Note there are two ways we can use this library: NPM and CDN, but in this article, we will install the application using NPM.

Install the React application using the following command:

npx create-react-app qrcode

We have successfully installed our react application under QR code.

Creating our Components
Here we’ll have to create our component folder, the App.js and the Index.js which we’ll use in working
This is the index.js format:

Below is the App.js file

Breaking it down in the index.js, I can pass in text which is meant to represent the value of the QR code, because every QR code represent a value either numeric, alphanumeric, byte/binary or kanji. Our own is representing “worn off keys” , then the QR code represent worn off keys will then be displayed

<App text="worn off keys" />

In the App.js, to use the QR code package [import QRCode from ‘qrcode’] that we imported to be able to generate a proper source and then setting it inside the variable using the “setSrc” function below;

useEffect(() => {
  QRCode.toDataURL(text).then(setSrc);
}, []);

This is how our App looks .

The size of the QR Code is the depending on size of the data provided in the App.js text code block because it gets to store more data;

<
    App text="wornoffkeys.comwornoffkeys.comwornoffkeys.comwornoffkeys.comwornoffkeys.com" />
);

Conclusion
QR codes can provide more information about the product or service without a sweat, and the information quickly goes to the user's device. Basically, QR codes promote interaction and engagement through the mobile phone. This type of marketing strategy enables businesses to transfer information to the user.

Today we’re able to produce QR codes using the QR code` library and React, as we’ve seen.