DEV Community: vIctorAlexandre2005

Ligando componentes com functions and props. 22/05/23

vIctorAlexandre2005 — Mon, 22 May 2023 22:57:38 +0000

Hoje aprendi a ligar os componentes que não tem como importá-los.

A comunicação entre os componentes que não podem ser exportados é por meio de propriedades. Como assim?
O componente pai pode ter os seguintes dados:

// Componente pai
function paiComponent( ) {
  const data = "Dados do pai";
  return <ChildComponent data={data} />;
}

// Componente filho
function filhoComponent(props) {
  return <div>{props.data}</div>;
}

E aqui no componente filho, pegamos as propriedades do componente pai, e podemos retornar o conteudo do componente pai. Nisso, ligamos os Componentes pai e filho pelas propriedades. Simples, não?

Mas no que isso pode ser útil? Minha experiência:

Meu projeto no curso é sobre o feed de uma rede social, logo tem os posts com comentários. Usando o useStates podemos adicionar novos comentários, mas também podemos nos arrepender do que escrevemos... E aí vem a função de excluir o comentário.

Porém, não é possível aplicar a função de excluir o comentário sem puxar as propriedades do componente pai (que é o post em geral, incluindo o componente de comentario) para o componente filho (que é o componente que possui os comentários). Fazendo esse processo, você já tem a estrutura pronta para aplicar a exclusão de comentários.

Dia 18/05/2023- Artigo

vIctorAlexandre2005 — Thu, 18 May 2023 21:49:51 +0000

Hoje foi um dia de muitos aprendizados. Aprendi a:
usar o "useState"
Colocar uma data relativa de hoje do post que foi criado usando bibliotecas do React.
Usar o ".map" para criar as funcionalidades de comentários do post.
Diferença entre um forEach e um .map.
A "percorrer um array".
Aprendi sobre imutabilidades.

useState:
Pelo o que eu aprendi, o useState é uma função que existe na biblioteca React. Essa função retornam basicamente 2 valores: valor do estado atual e o valor da nova função quando atualizado. (Lembrando que o primeiro valor é sempre o valor atual e o segundo é sempre o valor atualizado.).

Olha esse exemplo:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

Nesse exemplo, o estado atual é definido como 0. A função useState retorna um array com dois elementos: count e setCount. O count é o valor atual do estado e setCount é uma função que permite atualizar esse valor. O botão "Incrementar" chama a função setCount para incrementar o valor do estado.

Cada vez que o estado é atualizado usando setCount, o React atualiza o componente para refletir a mudança no estado. Dessa forma, o componente funcional pode ter um estado interno que pode ser atualizado e renderizado de forma reativa.

Percorrer arrays:

Percorrer array significa dar uma funcionalidade para cada elemento array dali. Seria mais ou menos assim (usando o método forEach):

const array = [1, 2, 3, 4, 5];

array.forEach(element => {
  console.log(element);
});

Ali ele está percorrendo cada elemento.

Qual a diferença de um forEach e de um .map?

o forEach executa uma função para cada elemento mas não retorna um novo array.Única coisa que ele faz é iterar sobre os elementos que já estão ali e aplicar funcionalidade, sem fazer nada com o array original.

Já o .map multiplica cada elemento do array por 2 e retorna um novo array com os resultados. o .map é usado para criar um novo array com base nos elementos do array original.

O que seria imutabilidade?

De forma simples, a imutabilidade no JavaScript seria uma string, number ou object que não podem ser alterados. Veja esse exemplo que achei:

let x = 5;
let y = x; // y recebe o valor de x (5)

x = 10; // x é atribuído como 10

console.log(x); // 10
console.log(y); // 5 (o valor de y não foi alterado)

Nesse exemplo, quando atribuímos x a y, o valor atual de x (5) é copiado para y. Mesmo que x seja alterado posteriormente, y mantém seu valor original.

Dia 16/05/2023- Artigo diário.

vIctorAlexandre2005 — Tue, 16 May 2023 23:22:57 +0000

Hoje passei o dia aprendendo e aplicando layouts na tela de um site no meu projeto pessoal. Tive problemas naturais como centralizar algumas coisas e usar o espaçamento correto.

Como funciona os layouts? A melhor maneira de deixar a tela de um site organizada, principalmente se for tela principal, é usando grades(ou "grids").

Aprendi bastante a usar columns, grid, displays, outlines, overflow.

Tudo isso em ReactJS, componentizando cada parte específica do site, ajudando na organização.

No curso, avancei nas funcionalidades do Feed de rede social, onde damos a data e hora em que o Post foi publicado, usando publishadAt, consts, array's e por aí vai.

Artigo diário: 15/05/23

vIctorAlexandre2005 — Mon, 15 May 2023 22:51:54 +0000

Hoje, dia 15/05/23 estudei bastante. Dei prosseguimento em 2 projetos: Um do curso e um pessoal.

No curso, aprendi mais sobre algumas manhas do ReactJS, sobre algumas funcionalidades JavaScript sendo aplicado num projeto de Feed de rede social. Avancei bastante com componentes, Iterações, estilizações bem feitas... Hoje foi bom.

No projeto pessoal, comecei hoje. O projeto é uma página principal simples de alguns produtos, ja apliquei e estilizei o Header e o Body até agora, usando o ReactJS, aplicando o que vi no curso.

CSS: Coisas que todo desenvolvedor, principalmente WEB, não pode esquecer:

vIctorAlexandre2005 — Thu, 11 May 2023 22:45:50 +0000

PSEUDOCLASS-
:hover- Usado normalmente em botões, ele tem a função de mudar a cor, fonte, tamanho ou qualquer outra coisa quando o usuário passar o ponteiro do mouse em cima.
::focus- Usado normalmente em inputs, o focus muda de visual quando CLICAMOS. Meio parecido com o hover, mas o focus só funciona quando clicamos em algum campo, botão... etc. Incrível.
(Obsevações: sempre que for usar o focus, retirar o outline do input ou outra tag que esteja sendo estilizada pelo focus. Só ssim para mostrar os resultados em tela.

CHILD-

Aqui você seleciona o que vai ser estilizado, exemplo:

texto 01
texto 02
texto 03
texto 04

Suponhamos que o texto 011 tenha que ser azul, o 2 tenha que ser roxo, o 3 tenha que ser ciano e o 4 tenha que ser vermelho.

No css, puxamos a ul, depois a li e adicionamos o :nth-child(posição do li) {
estilizações
}

Assim:
ul li:nth-child(1){
color: blue;
} texto 1 azul

ul li:nth-child(4){
color: red;
} texto 4 vermelho

ul li:nth-child(3) {
color: aqua;
} texto 3 ciano

ul li:nth-child(2) {
color: blueviolet;
} texto 2 roxo

FÁCIL.

DISPLAYS-

Display-block:
Algumas tags já possuem, por padrão, a display-block. Eles são: div, section, p, h1, h2, ul, article. Essa display block, por padrão, ela joga os elementos pra debaixo dela. Ou seja, qualquer tag padronizada display-block ou tag estilizada com a display-block, ocupa 100% da linha que ela está e automaticamente joga a outra tag para baixo dela. (A menos que na estilização você defina o máximo de largura que tenha que ocupar).

Display-inline:
Alinha as divs um ao lado do outro. Não é recomendável usar o display-inline em div´s, pois o display inline deixa somente um ao lado do outro mas fica "bloqueado", não é possível estilizar com margin, height... etc. Serve somente para alinhar as divs, mais nenhuma estilização.

Display: inline-block:
Como já diz o nome, a inline-block é a função de inline com block. Como assim? A display-block ocupa todo o espaço na linha e joga todas as outras div´s para baixo, porém, é possível estilizá-las com margin, height... etc, certo? Já o display inline alinha todas as div´s na mesma linha, porém não pode ser estilizada, ela fica limitada, certo? Com a fusão dos dois, com a inline block nós simplesmente conseguimos alinhar as div´s na mesma linha e estilizá-las com margin, height, e outras propriedades. Recomenda-se usar, pelo menos para div´s, sempre o inline-block.

POSITION-

Position-static:
Essa propriedade é padrão do navegador. Se você aplicar um position-static em algo, ele ficará parado, seja com margin, bottom, left, right, top... etc. Não mudará nada. E, importante lembrar que o static é PADRAO, mesmo que seja só o Position sozinho, as outras propriedades não vão fazer diferença.

Position-fixed:
Com a fixed podemos estilizar a position e, o mais legal, é que com o fixed, quando você descer o scroll na página, aquela position fixed faz com que o elemento desça junto. Se não tivesse o fixed, ficaria lá em cima.

Position-sticky:
Muito parecido com o fixed, a diferença é que com o sticky aplicado, o elemento só fica fixo na sua viewport quando você descer o scroll até ele, então ele só começa a te seguir a partir daí. Já o fixed te segue desde o início. Aplicamos o sticky quando queremos deixar algo fixo a partir de uma determinada área do nosso site.

Exercitando no hackerRank: Simple Array Sum.

vIctorAlexandre2005 — Thu, 11 May 2023 22:37:02 +0000

Hoje veremos como resolver um probleminha simples, nada complexo. Precisamos fazer algumas somas para dar, no total, o número inteiro 31 no resultado final. Faremos isso da forma mais simplificada possível. Vem comigo!

Primeiramente criamos uma function simpleArraySum() { }.

Feito isso, dentro dela, atribuimos as somas de número inteiro que chegam até o resultado 31, assim:

 let integger =  29;
  let number = 2;
  let total = 29 + 2;

Feito isso, como podemos fazer o terminal somar e dar 31? Simples, damos um return total, que é a soma de 29 + 2. Assim:

return total

O código fica assim:

function simpleArraySum() {
  let integger =  29;
  let number = 2;
  let total = 29 + 2;

  return total

}