Fundamentos do React

Com os componentes permite você dividir a interface (UI) em partes independentes, e reutilizar as partes isoladamente. Conceitualmente, os componentes são funções javascript, nas quais aceitam entradas arbitrarias (chamadas "props") que retornam os elementos React o que deve aparecer em tela, mais pra frente neste artigo irei explicar o que são as "props".

Um exemplo que podemos utilizar é a timeline do Twitter, você rola a barra de rolagem que pode conter 100 posts e até em muitas das vezes 500 posts em tela e assim você resolve adicionar um comentário ao post de nº 165, agora podemos imaginar a complexidade que o DOM (Document Object Model) do seu navegador possui e entender que um único elemento no meio de tantos foi atualizado e enviar esta informação em tempo real para outros usuários do Facebook.

Separando os posts em componentes, cada item controla suas proprias informações e assim quando um desses posts sofre alteração, seja um comentario novo ou até mesmo uma reação, de fato o é que ela enxerga a si mesma de modo que não precisa varrer toda DOM procurando pelo item correto.

Exemplo de interface separada por componentes

Para que possamos entender melhor de maneira simples, é definindo uma função javascript:

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

Essa função é um componente React válido porque aceita um único argumento de objeto, nos quais chamamos de "componentes de função".

Você tambêm pode utilizar uma classe do ES6 para definir um componente, que ficaria dessa forma:

class Welcome extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

Os dois componentes acima são equivalentes do ponto de vista do React.

Conceito de Props no React.

Como no HTML, podemos passar uma propriedade em nossos componentes e acessá-las de forma muito rápida. abaixo eu coloquei um trecho de código na qual vamos repassar um título para cada post através de um componente Lista:

// components/Lista.jsx

import React from 'react'
import Post from 'Post'

class Lista extends React.Component {
	render() {
		return (
			<Post />
			<Post />
			<Post />
		);
	}
}

// components/Lista.jsx

import React from 'react'
import Post from 'Post'

class Lista extends React.Component {
	render() {
		return (
		<Post title="Build The Future" />
		<Post title="Never Stop Learning" />
		<Post title="E bora codar" />
		)
	}
}

// componenets/Post.jsx

import React from 'react'

class Post extends React.Component
	render() {
		return (
			<h1>{this.props.title}</h1>;
		)
	}

Conceito Estado.

Diferente das propriedade, os estados não são repassado ao componente e sim é configurado dentro do próprio componente. Pense o estado como sendo as propriedades de nossa classe que devem ser armazenadas para renderização do componente.

Abaixo vou declarar uma variável de state, na qual vamos chamar de "count".

const [count, setcount] = useState();

import React, { useState } from 'react';

function App() {
	const [count, setCount] = useState();
	return (
		<div>
			<p>Você clicou {count} vezes</p>
			<button
				onClick={() => setCount(count + 1)}
			>Clique aqui</button>
		</div>
	);
}

Conceito useEffect .

O Hook de Effect te permite a executar efeitos colaterais em componentes funcionais:

useEffect((qual funçao eu quero executar) ⇒ {quando eu quero executar função}, [quais as dependencias do useEffect])

const [repositories, setRepositories] = useState();

useEffect(() ⇒ {

fetch('<https://api.github.com/users/aleksanderpalamar/repos>')
	.then(response ⇒ response.json())
	.then(data => setRepositories(data))
}, [])

Este trecho de código acima tem a funcionalidade de mostrar uma listagem de repositorios do meu usuário do github, consumindo a API do GitHub.

carregando em tela as listagens de repositorios: