DEV Community: Afi0125

Creating a react component

Afi0125 — Mon, 02 Oct 2023 16:00:40 +0000

Note: we use .ts for plain typescript file and .tsx for react component

There are two ways to create REACT component : JavaScript class or function , these days function based component are widely used because of they are concise and easier to write.

So the below code is under your .tsx file (mine is : Message.tsx)

function Message() {
  return <h1>Hello World</h1>;
}

export default Message; // this helps to import Message file in other files

The below code is under App.tsx file , in order to use the Message.tsx file under the App.tsx file you need to import the Message.tsx file.

import Message from './Message'; //here period(.)means the current folder

function App(){
  return <div><Message></Message></div>;//you can also use <Message/> instead of <Message></Message>

export default App; //export App component to use it somewhere else


}

Need of React ?

Afi0125 — Mon, 02 Oct 2023 14:56:30 +0000

We have a tree with app being the root or top level component and message being a child component when a application starts, react takes this component tree and builds
a JavaScript data structure called the virtual DOM (this virtual DOM is different from the actual DOM in the browser, it is a lightweight in memory representation) of our component tree where each node represents a component and its properties, when data of component tree changes react updates the corresponding node in the virtual DOM to reflect the new state then it compares the current version of virtual DOM to the previous version of DOM and identify the node that should be updated and then update the nodes in the actual DOM.

React was created to make it easier to build user interfaces for web applications. It simplifies the process of updating and managing the parts of a web page that change as a user interacts with it.

Imagine you're building a web page like a to-do list app. When a user adds a new item to their to-do list, you want the page to instantly show the new item without having to refresh the whole page. React helps you do this efficiently.

Before React, developers had to manually update the web page's HTML whenever something changed. With React, you describe how your user interface should look for different states, and React takes care of updating the page when those states change.

How Java code executes for beginners

Afi0125 — Wed, 27 Sep 2023 05:04:07 +0000

Java is a high-level programming language that uses a combination of compilation and interpretation to run your code.

Let's deep dive into the procedure:

Writing java code;
You start by writing your Java code in a text editor or an Integrated Development Environment (IDE). Java code is typically saved with a .java extension.
Compilation:

Java Compiler: Once you've written your code, you use the Java compiler (javac) to translate your human-readable code into an intermediate form known as bytecode.Bytecode is a set of instructions that can be executed by the Java Virtual Machine (JVM).
Bytecode File: The compiler generates a .class file for each class defined in your Java code. This file contains the bytecode and is platform-independent, meaning it can be executed on any system with a compatible JVM.

Java Virtual Machine (JVM):

Loading: When you want to run a Java program, you use the java command, followed by the name of the class containing the main method (the entry point of your program). For example, java MyProgram.

Class Loading: Once you specify the class to run, the JVM begins by loading the necessary .class files into its memory.

These .class files contain the compiled bytecode of your Java classes (the instructions for your program).

Class-Loading Hierarchy:

The JVM follows a specific order or hierarchy when loading classes into memory. This hierarchy ensures that classes are loaded in a controlled and organized manner. There are typically three main stages:

Bootstrap Classloader: This is the first step in the hierarchy. It loads core Java classes that are essential for the JVM's operation, like classes from the java.lang package. These classes are critical for the JVM to function properly.
Extension Classloader: After the bootstrap classloader, the extension classloader loads classes from Java's standard extension libraries. These libraries provide additional functionality beyond the core Java features. For example, if you use Java's cryptography tools or database connectors, those classes are loaded by the extension classloader.
Application Classloader: The final step in the hierarchy is the application classloader. It loads classes specific to your Java application, including the class that contains the main method. This classloader is responsible for loading your program's custom classes and any third-party libraries or JAR files you include.

I'll explain the concept of class loading and the class-loading hierarchy in the Java Virtual Machine (JVM) in a simpler way.

Loading:

When you want to run a Java program, you use the java command, followed by the name of the class containing the main method (the entry point of your program). For example, java MyProgram.

Class Loading:

Once you specify the class to run, the JVM begins by loading the necessary .class files into its memory.
These .class files contain the compiled bytecode of your Java classes (the instructions for your program).

Class-Loading Hierarchy:

Bootstrap Classloader: This is the first step in the hierarchy. It loads core Java classes that are essential for the JVM's operation, like classes from the java.lang package. These classes are critical for the JVM to function properly.

Extension Classloader: After the bootstrap classloader, the extension classloader loads classes from Java's standard extension libraries. These libraries provide additional functionality beyond the core Java features. For example, if you use Java's cryptography tools or database connectors, those classes are loaded by the extension classloader.

Application Classloader: The final step in the hierarchy is the application classloader. It loads classes specific to your Java application, including the class that contains the main method. This classloader is responsible for loading your program's custom classes and any third-party libraries or JAR files you include.

In summary, class loading is the process of bringing the necessary Java classes into memory when you run a Java program. The JVM follows a hierarchy to load core classes, extension libraries, and your application-specific classes in a structured and controlled manner to ensure proper program execution.

Bytecode Verification:
Verification: Before executing any bytecode, the JVM performs a verification process to ensure the bytecode is valid and doesn't violate security constraints. This step helps prevent things like buffer overflows and type mismatches.
Just-In-Time (JIT) Compilation:
Compilation to Native Code: The JVM may employ a Just-In-Time compiler to convert bytecode into native machine code specific to the host system. This step improves execution speed.

Caching: The native code is often cached to avoid recompilation of frequently executed code segments.

Execution:
Execution of main Method: The JVM starts executing your Java program by invoking the main method in your specified class.

Execution Flow: As your program runs, the JVM follows the flow of your Java code, executing instructions one by one.

Memory Management:
- Heap: The JVM manages memory using a heap, which is where objects are allocated and deallocated. The garbage collector periodically frees up memory by reclaiming objects no longer in use.

Stack: The JVM uses a stack for method calls and local variables. Each method call creates a new stack frame, which is popped off when the method returns.

Exception Handling: Java programs can throw exceptions when errors or unexpected conditions occur. The JVM handles these exceptions and can propagate them up the call stack until they are caught and handled by appropriate exception-handling code.

Termination:When your main method finishes executing or an unhandled exception occurs, the program terminates.
The JVM performs cleanup tasks, like finalizing objects, before exiting.

Output and Result:

If your program produces output (e.g., printing to the console), you'll see it on the screen.
If your program returns a value, that value can be used by other programs or scripts calling your Java program.

Async and Await function in JavaScript Promises

Afi0125 — Sat, 23 Sep 2023 11:17:38 +0000

This async/await syntax makes working with promises more straightforward and readable, especially for handling asynchronous operations in a more synchronous-looking way.

Promises are a way in JavaScript to handle asynchronous tasks, like fetching data from a server or reading files. They help you work with code that doesn't run in a predictable order.

A promise is like ordering food ,it represents something that will be delivered in the present , future or never/cancelled.

Example:

const fetchuserData = new Promise(function(resolve,reject){
  setTimeout(() =>{
    const data = {username :"maktub", password:"football"};
    resolve(data);
  }, 2000);
});

// Now, we can use the async/await syntax to work with promises more easily.

async function getUserData() {
    try {
        console.log("fetching user data");
        const user = await fetchuserData;
        console.log("user data", user);
    } catch (error) {
        console.error("Error", error);
    }

}

getUserData();
console.log("request in progress");

Here's how the code works step by step:

The fetchUserData function returns a promise. Inside the promise, there's a setTimeout function that simulates a 2-second delay. After the delay, the promise is resolved with a JavaScript object containing user data (in this case, { username: "maktub" , password :"football" }).
The getUserData function is defined as an async function. This allows you to use the await keyword inside it.getUserData is an async function that uses await to wait for the promise to resolve. It makes the code look more like synchronous code, even though it's asynchronous.
When you call getUserData, it logs "Fetching user data..." and then waits for the promise to resolve before logging the user data.
The last console.log line runs immediately, showing that the code doesn't block while waiting for the promise.
If there were any errors during the promise resolution (for example, if you had used reject instead of resolve), the code would jump to the catch block and log the error message.

Basic Promise in JavaScript

Afi0125 — Sat, 23 Sep 2023 07:32:12 +0000

Promise in javaScript is a way to handle asynchronous operations, such as fetching data from server ,reading files or making a request from network. Promise helps you to write more readable and organized code when dealing with asynchronous tasks.

Here is a simple example: 1. Resolving a promise

const promiseOne = new Promise(function(resolve, reject) {

//this is the very common way to write promise

setTimeout(() => {
resolve("async task completed");
}, 1000); 
});

NOTE: 
// .then() block is connected to the resolve part of the promise
// simulate task completed after 1 sec



promiseOne.then((message) => {
console.log(message);
})

.catch((error) => {
console.log(error)
});

In this example, we create a Promise that resolves after 1 seconds, simulating a successful async task. The [.then()] block executes when the promise is resolved and in this case the [.catch] block will not be displayed as we have successfully completed the task.

Rejecting a Promise

const promiseReject = new Promise(function(resolve, reject){
    setTimeout(() => {
        reject("sorry could not complete your task");
    }, 1000);
});

promiseReject
.then((message) =>{
    console.log(message);
})
.catch((error) => {
console.log(error);
 });

In this code, when the promise is rejected with the message "sorry could not complete your task" the [.catch() block] will execute, and "sorry could not complete your task" will be logged to the console. The .then() block won't execute because the promise was rejected, not resolved.

NOTE
To summarize, the behavior of .then() and .catch() depends on whether the promise is resolved or rejected. If the promise is resolved, the .then() block executes. If the promise is rejected, the .catch() block executes.