DEV Community: Murat Tunç

React State Explanation

Murat Tunç — Sat, 25 Jan 2025 20:21:19 +0000

React state is like the memory of a React component. It allows a component to keep track of information that might change over time, and when state changes, React automatically re-renders the component to reflect those changes.

What is React State?

State is an object that stores data or information about the component. Think of it like variables for your component, but with one big difference: when the state updates, React re-renders the component so the UI stays in sync with the data.

How to Use State?

In functional components, you use the useState hook to manage state.

VS CODE PROJECT OVERVIEW:
We have Counter.js to show the useState
We have Counter.css to show 3 buttons on main screen.
We have App.js to call the component Counter.

import React, { useState } from "react";
import "./Counter.css"; // Relative path from the same folder

function Counter() {
    const [count, setCount] = useState(0);

    return (
      <div className="container">
        <h1>Counter: {count}</h1>
        <div className="button-group">
          <button onClick={() => setCount(count + 1)}>Increase</button>
          <button onClick={() => setCount(count - 1)}>Decrease</button>
          <button className="reset" onClick={() => setCount(0)}>Reset</button>
        </div>
      </div>
    );
}

export default Counter;

Counter.css


/* Container to position content in the top-left corner */
.container {
  position: absolute; /* Allows precise positioning */
  top: 40px; /* Distance from the top of the screen */
  left: 2px; /* Distance from the left of the screen */
  font-family: Arial, sans-serif;
}

/* Styling the counter title */
h1 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px; /* Space between header and buttons */
}

/* Grouping buttons together */
.button-group {
  display: flex;
  gap: 10px; /* Space between buttons */
}

/* Styling buttons */
button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049;
}

button:active {
  background-color: #39843c;
}

/* Reset button has a different style */
button.reset {
  background-color: #f44336;
}

button.reset:hover {
  background-color: #e53935;
}

button.reset:active {
  background-color: #c62828;
}

App.js

import React from "react";
import Counter from "./components/Counter"; // Import the Counter component

function App() {
  return (
    <div>
      <h1>Welcome to the App!</h1>
      <Counter /> {/* Render the Counter component */}
    </div>
  );
}

export default App;

Run the application from terminal:

npm start
Compiled successfully!

You can now view my-react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.8:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

**
This will start your React app, and it should open in your browser at http://localhost:3000.**

Source Code:
GitHub - MuratTunc/React_useState_Example

You will see that the counter value changes when the buttons are pressed. I wish you good coding, I hope this short study will be useful.

With my most sincere wishes,

Murat...

Variable Naming Techniques

Murat Tunç — Mon, 21 Oct 2024 18:43:54 +0000

In software development, variable naming conventions are crucial for code readability, maintainability, and consistency. Different approaches exist depending on the language, development practices, or team conventions. Here are the most common types of variable naming conventions:

Camel Case (camelCase)

Common in: JavaScript, Java, Swift, TypeScript
Format: First word in lowercase, subsequent words are capitalized.
Example: orderStatus, customerName, totalPrice

Pascal Case (PascalCase)

Common in: C#, .NET, TypeScript (for classes, enums)
Format: Each word starts with an uppercase letter, including the first word.
Example: OrderStatus, CustomerName, TotalPrice

Snake Case (snake_case)

Common in: Python, Ruby, PHP, C
Format: Words are lowercase and separated by underscores.
Example: order_status, customer_name, total_price

Kebab Case (kebab-case)

Common in: URLs, some configurations, CSS class names
Format: Words are lowercase and separated by hyphens.
Example: order-status, customer-name, total-price

Upper Snake Case (UPPER_SNAKE_CASE)

Common in: Constants, environment variables (in many languages like Python, C, Go)
Format: All uppercase letters with words separated by underscores.
Example: ORDER_STATUS, CUSTOMER_NAME, TOTAL_PRICE

Hungarian Notation

Common in: Older C++, legacy systems (less common now)
Format: Variable names are prefixed with letters representing the variable type.
Example: strCustomerName (string), iTotalPrice (integer)

Screaming Snake Case

Common in: Environment variables, constants
Similar to snake case but all characters are uppercase, often used for constants or global variables.
Example: MAX_USER_COUNT, ENVIRONMENT_MODE

Abbreviation-Based Naming

Common in: Small variable names or indexing operations
Format: Abbreviated form of the variable’s purpose.
Example: idx for index, cnt for count, msg for message

Domain-Specific Naming

Based on: Domain-driven design or business logic
Example: invoiceData, productCategory, shippingStatus

Best Practices for Variable Naming:

Descriptive & Meaningful: Variables should represent their purpose. For example, instead of using x, use productPrice or orderCount.
Avoid Single Letters: Except for loop counters (e.g., i, j), avoid single-letter variable names.
Use Consistent Conventions: Choose one naming convention (like camelCase or snake_case) and use it consistently across the codebase.
Avoid Abbreviations: Unless they're well-known, avoid abbreviations that can confuse others reading the code.

BASIC POSTGRESQL APPLICATION VIA GOLANG

Murat Tunç — Tue, 20 Aug 2024 12:49:27 +0000

BASIC POSTGRESQL APPLICATION VIA GOLANG

In this study, I will try to introduce the simplest postgreSQL applicaiton using the Golang programming language. Intermediate level knowledge of Golang language will be sufficient.

Working environment

Debian Operating System

Golang sw language

PostgreSQL

DBeaver

VS Code

General hierarchy of the project

Dbeaver database table creation

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Now our Database table is ready !
Lets insert some values to it via Golang.

VS code

package main

import (
    "database/sql"
    "fmt"

    _ "github.com/lib/pq"
)

const (
    user     = "postgres"
    password = "1234"
    dbname   = "postgres"
    host     = "localhost"
    port     = 5432
)

func main() {
    // Connection to database
    psqlconn := fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable", host, port, user, password, dbname)
    // Open the database
    db, err := sql.Open("postgres", psqlconn)
    if err != nil {
        panic(err)
    }
    fmt.Println("Database Connected!")
    // Close the database
    defer db.Close()
    insert := `insert into "icecream"("Name", "Price") values($1, $2)`
    // insert new raw to database table
    _, err = db.Exec(insert, "Vanilla", 4)
    if err != nil {
        panic(err)
    }
    _, err = db.Exec(insert, "Chocolate", 5)
    if err != nil {
        panic(err)
    }
    fmt.Println("Writing to database completed!")
}

Run go file

Database table result

Github source code

github_source_code

I wish you good coding, thinking that it is educational and fun.

Implementing Microservice with GoLang

Murat Tunç — Fri, 16 Aug 2024 12:03:59 +0000

BASIC RESTFUL MICROSERVICE VIA GOLANG

In this study, I will try to introduce the simplest web-based microservice using the Golang programming language. Intermediate level knowledge of Golang language will be sufficient.

Working environment

Debian Operating System

Golang sw language

General hierarchy of the project

Whats is basic definition of microservices ?

Microservices are self-running applications that perform certain functions and special operations.
Java, Python, and Go are the languages that are easy to maintain and update, which is essential for building a microservice.The world's largest technology companies such as Amazon, Netflix, and Uber also use microservice structures.

Restful API

The method is the type of request you send to the server. The four main resource methods that are associated with REST APIs are:

GET: This method allows for the server to find the data you requested and sends it back to you.

PUT: If you perform the ‘PUT’ request, then the server will update an entry in the database.

POST: This method permits the server to create a new entry in the database.

DELETE: This method allows the server to delete an entry in the database.

We are using just GET request in this microservice

VS CODE hierarchy of the project

Project directory tree

Start microservice

Start web browser

Github source code

github_source_code

In this project, we have created a very simple microservice in the Golang language using the Restful API. Our service only responds to get requests. Of course, the remaining rest requests can also be added to the code.

I wish you good coding, thinking that it is educational and fun.

Go Development Ready Script in UBUNTU

Murat Tunç — Wed, 28 Feb 2024 09:54:38 +0000

Greetings to everyone,

In this article, I aim to prepare the basic packages required for the golang software in the pure ubuntu linux operating system.

Alternatively, Doker or cloud technologies can also be used.

You can access the entire source code from the repo below. If you can improve performance or add new sorting techniques, I would be very happy.

https://github.com/MuratTunc/Linux_Development_Ready.git

A Small piece of code:

During this work, of course, I benefited from many open internet resources and tested all the codes. I will continue to improve as I have time.

I would be happy if I could speed up the sw development processes...

Go Language Data Search Algorithms

Murat Tunç — Tue, 30 Jan 2024 13:47:45 +0000

Greetings to everyone,

In this article, I will try to explain the most famous data search algorithms in Go language.

You can access the entire source code from the repo below. If you can improve performance or add new sorting techniques, I would be very happy.

 https://github.com/MuratTunc/DataStructersGo/tree/main

Linear Search

Array: Sorted or non sequential
Algorithm: All array elements are checked sequentially, starting from the first element. The process ends when the searched number is found; otherwise, the entire array is scanned.

N-->Array size
Worst case-->2N+1 comparisons
The time complexity of linear search is O(n)

Sentinel Linear Search

Array: Sorted or non sequential
Algorithm: The number of comparisons are less in sentinel linear search than linear search. The difference from linear search is to reduce the number of comparisons.

N-->Array size
Worst case-->N+2 comparisons
The time complexity of Sentinel Linear Search O(n).

Jump Search

Array: Sorted
Algorithm: The aim is to reduce the number of comparisons and switch to the linear search algorithm by reducing the scanning area. The block size that determines the jump distance must be determined. The jumping process continues until a number greater than the searched element is found. When a number greater than the searched element is found, linear search is applied to the last piece in the background.

The complexity of Sentinel Jump Search is O(√N).(Worst Case)

Binary Search

Array: Sorted
Algorithm: The target number is compared with the middle element of the array, and if it is equal to the middle element, the operation is successful and the fastest result is obtained.
If it is not equal to the middle element, it is checked.

If it is less than the middle element, a new search is started in the left half of the array.
If it is larger than the middle element, the search starts in the right half of the array.

N-->Array size
The average time case complexity is O(logN)
Best Case Time Complexity of Binary Search Algorithm: O(1)

Interpolation Search

Array: Sorted
Algorithm: Dynamically adjusts the search range using a formula. Binary Search always goes to the middle element to check but Interpolation Search may go to different locations according to the value of the key being searched.

During this work, of course, I benefited from many open internet resources and tested all the codes. I will continue to improve as I have time.