Daily Taks .- Exploring Styles in React Native: A Simple Example

 Introduction:

Welcome to my blog! In this post, we will dive into the world of styles in React Native and explore how they play a crucial role in designing visually appealing and consistent mobile applications. We'll also provide a simple example to demonstrate how styles can be applied in React Native.

Understanding Styles in React Native:

Styles in React Native allow developers to define the visual appearance of components, including colors, sizes, margins, paddings, fonts, and more. By leveraging styles, we can create beautiful and consistent user interfaces across different devices.

Let's dive into a simple example:

Example:

Suppose we want to create a basic login screen with two input fields for username and password. We'll use styles to enhance the look and feel of our components.

1.- Import the necessary components and styles from the React Native library:

import React from 'react';

import { View, TextInput, StyleSheet } from 'react-native';

2. Define the component and its associated styles:

const LoginScreen = () => {

  return (

    <View style={styles.container}>

      <TextInput

        style={styles.input}

        placeholder="Username"

      />

      <TextInput

        style={styles.input}

        placeholder="Password"

        secureTextEntry

      />

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    padding: 16,

    backgroundColor: '#F5FCFF',

  },

  input: {

    width: '100%',

    height: 40,

    borderColor: 'gray',

    borderWidth: 1,

    borderRadius: 4,

    marginTop: 12,

    paddingHorizontal: 8,

  },

});

Explanation:

In the above code, we create a functional component called LoginScreen which renders a View containing two TextInput components.

The styles object is created using StyleSheet.create(), which allows us to define various style properties.

The container style defines the overall layout of the screen, including centering the content, setting padding, and applying a background color.

The input style sets the width, height, border color, border width, border radius, margin, and padding for the input fields.

Conclusion:

Styles in React Native provide a powerful way to customize the visual aspects of your mobile applications. By using styles, you can create visually appealing and consistent UIs across different screens and devices. In this post, we explored a simple example of applying styles to a login screen. I hope this example helps you understand the basics of styling in React Native.

Stay tuned for more React Native tips and tutorials in future blog posts. Happy coding!

Remember, the possibilities with styles in React Native are endless, so feel free to experiment and create stunning user interfaces.

Daily Tasks .- Exploring the Power of FlatList in React Native: A Simple Example

 Introduction:

FlatList is a fundamental component in React Native that provides an efficient and performant way to render lists of data. Whether you're building a simple to-do app or a complex news feed, FlatList can greatly enhance the user experience by efficiently rendering large data sets and optimizing memory usage. In this blog post, we'll explore the features of FlatList and walk through a simple example to demonstrate its usage.

Understanding FlatList:

FlatList is a highly flexible component that efficiently renders large lists of data by only rendering the items that are currently visible on the screen. It achieves this through the concept of virtualization, which means that only a subset of the list is rendered at any given time. As the user scrolls through the list, FlatList dynamically renders and unrenders items to ensure optimal performance.

Simple Example:

Let's dive into a simple example to illustrate how FlatList works. Suppose we want to create a basic shopping list app that displays a list of items. We'll start by setting up our project and importing the necessary dependencies:

import React from 'react';

import { View, FlatList, Text } from 'react-native';

const ShoppingList = () => {

  // Sample data

  const data = [

    { id: '1', name: 'Apples' },

    { id: '2', name: 'Bananas' },

    { id: '3', name: 'Oranges' },

    { id: '4', name: 'Grapes' },

    { id: '5', name: 'Strawberries' },

  ];

  return (

    <View>

      <FlatList

        data={data}

        keyExtractor={(item) => item.id}

        renderItem={({ item }) => <Text>{item.name}</Text>}

      />

    </View>

  );

};

export default ShoppingList;

In this example, we define a functional component called ShoppingList. Inside the component, we have an array of sample data representing our shopping items. We then use the FlatList component to render the list. We provide the data prop with our data array, and specify a keyExtractor function to extract a unique key for each item. Lastly, the renderItem prop defines how each item in the list should be rendered.

Conclusion:

FlatList is a powerful component in React Native that allows you to efficiently render large lists of data. It offers optimal performance by rendering only the visible items on the screen, making it ideal for applications that deal with extensive data sets. In this blog post, we explored the basics of FlatList and walked through a simple example to showcase its usage. With FlatList, you can enhance the performance and user experience of your React Native apps when dealing with lists of any size.

Daily tasks .- Handling Errors in JavaScript with try...catch

 JavaScript is a powerful programming language used by web developers to create dynamic and interactive web pages. However, like any programming language, JavaScript can encounter errors during runtime that can crash our program. Luckily, JavaScript provides us with the try...catch statement to handle these errors gracefully and prevent our program from crashing.

try { // Code that may throw an error } catch (error) { // Code to handle the error }

The try...catch statement is used to catch errors that occur during the execution of a program. The basic syntax of a try...catch statement is as follows:

In this example, the try block contains the code that may throw an error. If an error occurs during the execution of this block, JavaScript will immediately jump to the catch block. The catch block contains code to handle the error.

Let's take a look at a practical example of how to use try...catch in JavaScript:

function divide(a, b) { try { if (b === 0) { throw new Error("Cannot divide by zero"); } return a / b; } catch (error) { console.error(error.message); } } console.log(divide(10, 0)); // "Cannot divide by zero" console.log(divide(10, 2)); // 5 

5

In this example, we've defined a divide function that attempts to divide a by b. Before performing the division, we've wrapped the code that may throw an error in a try block. If an error is thrown, the program immediately jumps to the catch block, where we log the error message to the console using console.error().

We've called the divide function twice, once with b set to zero and once with b set to 2. The first call will throw an error, and the error message "Cannot divide by zero" will be logged to the console. The second call will return the result of the division, which is 5.

In conclusion, the try...catch statement is an important part of error handling in JavaScript. It allows us to gracefully handle errors and prevent our program from crashing. By using try...catch, we can write more robust and reliable JavaScript code.

Node js .- Importar Clases.

Node.js es un entorno de programación en JavaScript que se utiliza para construir aplicaciones de servidor. Una de las características más importantes de Node.js es su capacidad para utilizar módulos de JavaScript y paquetes externos. En este artículo, hablaremos sobre cómo se pueden importar clases en Node.js y cómo utilizarlas con un ejemplo de películas.

En Node.js, se pueden importar clases utilizando la palabra clave import. La sintaxis es similar a la utilizada en otros lenguajes de programación modernos. Aquí hay un ejemplo de cómo importar una clase en Node.js:

javascript
import { MyClass } from './my-class.js';

En este ejemplo, MyClass es el nombre de la clase que se está importando desde el archivo my-class.js. La sintaxis { MyClass } indica que solo se está importando la clase MyClass y no cualquier otro valor que pueda estar definido en el archivo.

Ahora que sabemos cómo importar una clase en Node.js, vamos a utilizar un ejemplo de películas para mostrar cómo se puede utilizar una clase importada. Aquí hay una clase Movie que representa una película:

javascript
export class Movie {
  constructor(title, director, language = 'English') {
    this.title = title;
    this.director = director;
    this.language = language;
    this.isPlaying = false;
  }
  play() {
    this.isPlaying = true;
    console.log(`Playing ${this.title}...`);
  }
  pause() {
    this.isPlaying = false;
    console.log(`Paused ${this.title}.`);
  }
  changeLanguage(language) {
    this.language = language;
    console.log(`Changed language to ${language}.`);
  }
  getDetails() {
    return `${this.title} - directed by ${this.director} - ${this.language}`;
  }
}

En este ejemplo, la clase Movie tiene un constructor que toma un título, un director y un idioma como parámetros. También tiene tres métodos nuevos: play(), pause() y changeLanguage(), que permiten reproducir, pausar y cambiar el idioma de la película, respectivamente.

El método play() establece la propiedad isPlaying en true y muestra un mensaje indicando que la película se está reproduciendo. El método pause() establece la propiedad isPlaying en false y muestra un mensaje indicando que la película se ha pausado. El método changeLanguage() actualiza la propiedad language de la película y muestra un mensaje indicando el nuevo idioma seleccionado.

Para utilizar la clase Movie, primero necesitamos importarla en nuestro archivo JavaScript. Aquí hay un ejemplo de cómo se puede hacer esto:

javascript

import { Movie } from './movie.js';
const movie1 = new Movie('The Shawshank Redemption', 'Frank Darabont');
console.log(movie1.getDetails());
movie1.play();
movie1.pause();
movie1.changeLanguage('Spanish');
console.log(movie1.getDetails());

En este ejemplo, estamos importando la clase Movie desde el archivo movie.js. Luego, creamos una instancia de la clase Movie y le pasamos el título, el director y el idioma como parámetros. Finalmente, llamamos a los nuevos métodos play(), pause() y changeLanguage() en la instancia movie1. También imprimimos los detalles actualizados de la película en la consola utilizando el método getDetails().

JavaScript.- Objetos I (Explicación básica)

 

                               

Recordemos el uso de una variable , por ejemplo .

let persona = "Erik" ; 

Acabamos de Escribir una variable que guarda un tipo de dato (en este caso texto)

Pero , los objetos los usamos para guardar mas de un dato , sin importar que sean de distintos tipos.

Ejemplo

let persona = {nombre:"Erik", Edad:27, sexo:"Masculino"};

Sintaxis

1) se usan {} cuando trabajamos con objetos 

2) : para separar propiedad:valor 

3) cada par propiedad:valor se separa por coma 

Vamos a imprimir el ejemplo en consola.

let persona = {nombre:"Erik", Edad:27, sexo:"Masculino"};

console.log(persona)

Hemos logrado guardar en una sola variable varios tipos de datos, ahora se llaman objetos

¿Por qué se llaman Objetos?

Con esta forma de guardar información buscamos una analogía con los objetos de la vida real 

por ejemplo ; 

Un carro , tiene múltiples propiedades como ;  una marca , un color , un tamaño , etc,etc,etc

Entonces , al crear nuestro objeto persona , podemos agregarle las múltiples propiedades y valores para definir de la mejor manera un objeto persona en la vida real.

Esta forma de ver la programación se denomina Programacion Orientada a Objetos

pero , eso lo veremos mas a profundidad despues , mejor vamos a hacer unos arreglos simples al código ya escrito.

1)En lugar de let al declarar objetos por lo general preferimos usar const

2)Separaremos por un salto de linea cada propiedad:valor. 

const persona = {

   nombre:"Erik",

    Edad:27,

     sexo:"Masculino"

   };

console.log(persona)

Aunque el resultado al imprimir en pantalla es el mismo , hemos acomodado el código para identificar 2 cosas , Propiedades y sus valores.

Propiedad	Valor
nombre	Erik
Edad	27
sexo	Masculino

Necesitamos tener esto muy claro para poder acceder a sus propiedades.

Acceder a propiedades del objeto

Por ejemplo , si queremos acceder a la propiedad Edad de nuestro objeto simplemente escribiremos "objeto.propiedad"

const persona = {

   nombre:"Erik",

    Edad:27,

     sexo:"Masculino"

   };

console.log(persona.Edad) //objeto.propiedad

practica accediendo a las otras 2 propiedades del ejemplo 

Funciones dentro de un objeto

Un objeto no solo puede contener datos , si no funciones , por ejemplo; una función de una persona, seria poder saludar , asi que , escribamos dentro de nuestro objeto una funcion para saludar utilizando los datos de nuestro objeto.

const persona_Obj = {

   nombre:"Erik",

    Edad:27,

     sexo:"Masculino",

     Saludar: function(){

        return "Hola soy " + persona_Obj.nombre + " y tengo " + persona_Obj.Edad;

     }

   };

console.log(persona_Obj.Saludar()) // objeto.funcion() 

Logramos imprimir en pantalla la función saludar de nuestro objeto , pero  hagamos una pequeña modificación, dentro de la función podemos acceder a las propiedades de nuestro objeto con la palabra reservada this , en lugar de nombrar el objeto.

 nuestro código quedaría así.

const persona_Obj = {

   nombre:"Erik",

    Edad:27,

     sexo:"Masculino",

     Saludar: function(){

        return "Hola soy " + this.nombre + " y tengo " + this.Edad;

     }

   };

console.log(persona_Obj.Saludar()) // objeto.funcion() 

Conclusión

En este articulo , hemos aprendido lo básico sobre objetos y su uso , mas adelante entraremos en profundidad , pero te sugerimos hacer unos ejemplos y practicar , visualizando objetos que hay en tu casa y tratarlos de describirlos en codigo.

Despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso.

JavaScript.- Funciones.

 ¿Que es una función?

Iniciemos con 2 primicias básicas.

-Nos sirven para empaquetar código.

-Nos permiten utilizar este código donde y las veces que lo necesitemos.

Sintaxis básica y ejemplo

-Utilizamos la palabra reservada function

-le ponemos un nombre 

-Paréntesis ().- los cuales pueden recibir parámetros

-Corchete {} Código que guardara nuestra función  

function Nombre_Funcion (){

    console.log("Instruccion guardada")

}

Vamos a notar que al recargar nuestra pagina , la instrucción (console.log) no se ejecuta.

Recordemos ; Una función guarda código , mas no la ejecuta.

Invocar/Ejecutar una Función

Para ejecutar nuestra función ,simplemente debemos escribir su nombre ,seguido de paréntesis ()

Nombre_Funcion();

Código completo

function Nombre_Funcion (){

    console.log("Instruccion guardada")

}

Nombre_Funcion();

Bien hasta el momento , Probemos 2 cosas mas 

1) Escribiremos mas instrucciones en nuestro empaquetado

function Nombre_Funcion (){

    console.log("Instruccion guardada")

    console.log("podemos escribir")

    console.log("la cantidad de instrucciones")

    console.log("que queramos")

}

Nombre_Funcion();

2) Voy a invocar 2 veces nuestra función.

function Nombre_Funcion (){

    console.log("Instruccion guardada")

    console.log("podemos escribir")

    console.log("la cantidad de instrucciones")

    console.log("que queramos")

}

Nombre_Funcion(); 

Nombre_Funcion(); 

Todo bien hasta este momento

Recapitulemos 

Las funciones nos permiten empaquetar codigo/Instrucciones , que podemos invocar donde queramos, y las veces que queramos con tan solo escribir su nombre()

lo cual nos da un código mas legible , fácil de ordenar y reutilizable, lo que significa un código mas simplificado.

Funciones con parámetros

Un parámetro es una variable de tipo local (Que solo funciona dentro de la función). la cual recibe su valor en la invocación , vayamos al ejemplo.

function Nombre_Funcion (parametro_1){

    console.log(`Buena dia ${parametro_1}`)

    

}

Nombre_Funcion("carlos"); 

Recordatorio ; No se pueden usar los parámetros definidos fuera de la función (tienen un alcance solo local) 

function Nombre_Funcion (parametro_1){

    console.log(`Buena dia ${parametro_1}`)

    

}

Nombre_Funcion("carlos"); 

console.log(parametro_1) //Error

Escribir mas de 1 parámetro.

Podemos escribir tantos parámetros que necesitemos, tan solo en la construcción de la función, hay que separarlos por comas , y al invocarla sus valores también separarlas por comas , estas recibirán sus valores en el orden escrito

Ejemplo

function Nombre_Funcion (par_1,par_2,par_3){

console.log(`Soy ${par_1} tengo ${par_2} monedas de a ${par_3}`)

    

}

Nombre_Funcion("carlos", 3 , peso); 

  

Ejemplo 2

function Nombre_Funcion (parametro_1,parametro_2,parametro_3){

    console.log(`Soy ${parametro_1} tengo ${parametro_2} monedas de a ${parametro_3} ` )

    

}

Nombre_Funcion("carlos", 3 , "peso"); 

Nombre_Funcion("Erik", 2 , "dolar"); 

Nombre_Funcion("Juan", 4 , "franco"); 

Poco a poco nos damos cuenta la utilidad de las funciones para automatizar código.

Hemos echo una maquina donde construimos la estructura para solo mandarle datos y recibirlos ya procesados , un ejemplo de esto en la vida real es una calculadora.

hagamos una estructura simple de una calculador que suma 2 números. 

function Calc_Suma (num_1,num_2){

    let suma = num_1 + num_2

    console.log(suma)

}

Calc_Suma(3,4); // 7 

Calc_Suma(1,2); // 3

Calc_Suma(3,2); // 5

Funciona perfectamente , pero.. si no queremos imprimirlo en consola dentro de la función , y si queremos guardar el resultado para usarla mas adelante , y por mas adelante nos referimos a fuera de la función.

Tal como esta , la variable suma no puede usarse ya que su alcance es local 

function Calc_Suma (num_1,num_2){

    let suma = num_1 + num_2

}

Calc_Suma(3,4); // 7 

console.log(suma) // 7

Return

Esta funcionalidad lo que hará será pasar el valor que le escribamos proveniente dentro de nuestra función a nuestra invocación.

function Calc_Suma (num_1,num_2){

   return num_1 + num_2 //Envia valor

}

 Calc_Suma(3,4); //Recibe valor

Procedemos a guardarla en una variable , para poder manipular mas a gusto y en este caso la imprimiremos en consola.

function Calc_Suma (num_1,num_2){

   return num_1 + num_2 // 7

}

 let suma_1 = Calc_Suma(3,4); // 7 

 console.log(suma_1)

Listo , aprendimos a manipular el resultado de nuestra función fuera de esta.

Haremos un ejemplo; crearemos una función para calcular restas e imprimiremos varias

TRATA DE HACERLO SIN VER EL CODIGO...

function Calc_Resta (num_1,num_2){

   return num_1 - num_2 

 

}

 let Resta_1 = Calc_Resta(8,1);  

 let Resta_2 = Calc_Resta(7,2);  

 let Resta_3 = Calc_Resta(9,5);  

 let Resta_4 = Calc_Resta(6,2);  

 console.log(Resta_1)

 console.log(Resta_2)

 console.log(Resta_3)

 console.log(Resta_4)

Conclusión

En este articulo , hemos aprendido lo básico para escribir funciones ,suficiente para seguir avanzando en el curso , iniciar tus primeras practicas e incluso escribir tus primeras aplicaciones web .

A pesar de ser solo lo principal , tienes mucho material de donde practicar y experimentar.

Despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso.