DEV Community: Zucarelli

HTTP and React requests

Zucarelli — Tue, 19 Mar 2024 19:34:22 +0000

- Using the JSON server
JSON Server is a tool that allows you to quickly create a complete and functional REST API with just a few commands, using a JSON file as a data source. It is very useful during application development, especially when you need to simulate a backend while working on the frontend.

Rescuing data from the "API"

First of all, we must have a place to save them. (useState);
Render the "API" call only once. (useEffect);
A means of making the request asynchronously. (Fetch API);

Saving the data via hook: "useState"

Rendering the API call only once with the hook: "useEffect". Performing the asynchronous request. ("fetch")

Adding Data

To add an item, we'll need to retrieve the form data with the useState
We have to merge the data into a function after submitting and sending a "POST" request to our API;
The process is very similar to data rescue, but now we're sending data.

Retrieving data from the form...

Function after submit and a POST request to our API

The data is sent in the request body to the server. This can include form data, such as username and password, or any other type of information that the client wishes to send to the server. The server receives the POST request and processes the sent data. This may involve validating the data, saving it to a database, or performing other operations according to the application's business logic. The server responds to the POST request, usually with an HTTP status code indicating whether the operation was successful or not. The server can also send additional data in the response body if necessary.

Object Prototype - ES6

Zucarelli — Fri, 16 Feb 2024 19:35:19 +0000

Object.prototype is a JavaScript object that serves as the prototype of all JavaScript objects. In other words, it is an object from which other objects inherit properties and methods.

When you create a JavaScript object, it automatically inherits properties and methods from Object.prototype. For example, the toString() method is inherited from Object.prototype. This means that all JavaScript objects have access to the toString() method, which is used to convert an object into a string representation.

All JavaScript objects descend from Object.prototype
" proto : " (inherits the attributes of other objects)

Example code:

Object Orientation - Pillars

Zucarelli — Sun, 04 Feb 2024 21:04:19 +0000

Introduction of Object Orientation
Object orientation (OO) is a programming paradigm that organizes code around objects, which can contain data in the form of attributes and behaviors in the form of methods. It is crucial to modern software development as it provides a structured, modular and flexible approach that makes it easier to create efficient, sustainable and easy-to-maintain systems.

Pillar of abstraction
The pillar of abstraction in object orientation is one of the fundamental principles that support this programming paradigm. It refers to the ability to create simplified models and conceptual representations of real-world entities, focusing on the relevant aspects and ignoring unnecessary details. Abstraction allows objects to be created with specific properties and behaviors, encapsulating internal details and interacting with each other in a modular and efficient way. This facilitates understanding, maintenance and reuse of code, promoting flexibility and scalability in object-oriented systems. Abstraction involves the creation of classes and interfaces that define the structure and behavior of objects, offering a simplified and coherent view of the system.

Code example - abstraction:

Encapsulation pillar
Encapsulation is one of the pillars of object orientation and refers to the practice of hiding the internal details of a class, protecting its attributes and methods. This is achieved by defining restricted access (public, private, protected) for class members, allowing only specific methods to access and modify this internal data. Encapsulation promotes security by preventing unauthorized access and direct manipulation of class data, and also facilitates code maintenance, since internal changes can be made without affecting other parts of the system. Furthermore, encapsulation contributes to cohesion and low coupling between classes, promoting a more modular and flexible structure.

Getters and setters methods are common in object-oriented programming and provide finer control over accessing and modifying private attributes, allowing the implementation of custom logic during these operations. This contributes to encapsulation and helps maintain data integrity within a class.

Getter (get):

The get canalAtivo method is a getter for the private attribute _canalAtivo.
It allows you to access active channel value from outside the class, providing a controlled way to obtain private information.
Setter (set):

The set canalAtivo(canal) method is a setter for the private attribute _canalAtivo.
It provides a way to modify the active channel value, but may include additional logic or security checks before making the change.

Heritage Pillar
Inheritance is a fundamental pillar of object-oriented programming that allows you to create a new class, called a derived class or subclass, based on an existing class, called a base class or superclass. Inheritance facilitates code reuse by promoting the creation of a class hierarchy.

Code example - heritage:

Pillar of polymorphism
Polymorphism is a fundamental concept in object-oriented programming that refers to the ability of objects of different classes to respond uniformly to method calls with the same name. It allows the same method to be overwritten in the child object, providing flexibility and simplicity in the code.

example of overriding the voo() method: