A linguagem de programação JavaScript é a porta de entrada de muitos desenvolvedores web. Isso não acontece à toa: essa linguagem é muito popular, tem alta compatibilidade, é versátil e é mais leve e rápida do que outras linguagens de programação. As features mais modernas são aplicáveis em muitos tipos de projetos e o React (biblioteca de JavaScript) é eficiente e flexível para deixar a interface de seus projetos ainda mais interessante e com uma resposta excelente para adicionar comandos.

Mas, antes de partir para o uso do React, você precisa ter conhecimentos mais sólidos em JavaScript, o que vai facilitar a criação das suas aplicações, já que esta biblioteca oferece a possibilidade de renderizar componentes mais complexos e possui testabilidade simplificada, duas grandes vantagens.

Por isso, confira esse artigo completo que preparamos sobre o tema!

Como o React funciona?

Criada pelo Facebook em 2011 e disponibilizada para a comunidade, em 2013, como uma ferramenta de JavaScript em código aberto, o React é a biblioteca mais popular entre os desenvolvedores para essa linguagem de programação. É utilizada para incrementar o trabalho de front-end e para construir a interface de usuário (IU).

Ele oferece benefícios como a facilidade de escrever, a reutilização de componentes desenvolvidos em outras aplicações e a possibilidade de combinar HTML com JavaScript.

Numa aplicação em React, os elementos são quebrados em componentes menores e a ferramenta usa na maior parte uma extensão JSX, ao invés de utilizar apenas o padrão JS de escrita no JavaScript. O React utiliza className, com tags JSX, com nome de tag, filhos e atributos. As aspas nos atributos JSX representam as strings (linhas). Esse elemento é similar ao JavaScript.

Você também pode se interessar por - React Native: o que é, quais as funcionalidades e as vantagens desse framework

Funções de JavaScript importantes para React

Muitos desenvolvedores, ao partir para o React, encontram dificuldade não em entender a biblioteca em si, mas em entender a sintaxe de versões mais modernas de JavaScript, como o ES6.

Por isso, separamos algumas funções de JavaScript muito conhecidas, que podem ser usadas em projetos com React e que você precisa dominar antes de começar a trabalhar com a biblioteca.

Classes no React e JavaScript

Alguns programadores podem não estar familiarizados com as Classes no ES6, que são utilizadas em React também. Essas classes funcionam como uma sintaxe simplificada para o prototype, antes utilizado em versões menos modernas de JavaScript.

Uma classe pode ou não conter uma função constructor, usada como método para definir propriedades dos objetos. Estes, quando criados dentro de uma mesma classe, herdam as propriedades definidas anteriormente.

Os objetos da classe são representados pela palavra-chave this.

Abaixo um exemplo desse tipo de aplicação:

class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname
    this.lastname = lastname
  }
  getName() {
    return `${this.firstname} ${this.lastname}`
  }
}

Template Literals

Se antes era padrão utilizar o sinal de + para concatenar as strings, agora, com o ES6, é possível utilizar os template literals com uso de aspas invertidas e texto de variáveis no formato ${variável}.

Forma antiga:

getName() {
  return this.firstname + ' ' + this.lastname;
}
Nova forma
getName() {
  return `${this.firstname} ${this.lastname}`;
}

Block Scopes e uso de var/let/const

Um Block Scope deve ser criado utilizando chaves e é utilizado toda vez que você desejar verificar uma condição, executar uma repetição ou criar uma função, nesse caso é mais conveniente chamar de Function Scope.

{
  // Block Scope
}
if (true) {
  // Block Scope
}
for (var i = 1; i <= 10; i++) {
  // Block Scope
}
function doSomething() {
  // Function Scope
}

Ao declarar uma variável (var) no corpo de uma função, a mesma é movida para o topo ou para o escopo global.  Já o let chega na linguagem JavaScript ES6, mais moderna, como um substituto do var e funciona definindo a variável no local onde ela foi declarada. Utilizando o let para definir essas variáveis, você deixa de ter o problema de acesso que acontece em algumas vezes com o var, em que uma variável declarada em um for loop acaba vazando o seu valor.

Veja como usar o let no exemplo abaixo:

let foo = true;
if  (foo) {
    let bar = 'baz';
    console.log(bar); // outputs 'baz'
}
try {
    console.log(bar);
} catch (e) {
    console.log("bar doesn't exist");
}

Você também pode utilizar como substituto para criar variáveis a palavra-chave const — na verdade, ela é recomendável para a maioria dos casos, já que assim você instrui o sistema a não abrir um espaço na memória e também a nunca mudar esse trecho do código.

Resumindo, sempre utilize const para definir variáveis, let quando for necessário e abandone o uso de var.

Arrow Functions

O uso de Arrow Functions é bem-vindo quando o objetivo é criar funções que não sejam métodos. Uma expressão Arrow Function possui uma sintaxe mais curta quando comparada a uma expressão de Function Expression, e elas não podem ser usadas como funções construtoras.

O tipo de função Arrow é provavelmente um dos mais utilizados na programação em JavaScript mais moderno. Dois fatores influenciaram a introdução das arrow functions: necessidade de funções mais curtas e a inexistência da palavra-chave this.

Em alguns momentos, as chaves são necessárias, em outros, a palavra-chave return é necessária (em métodos mais longos) e em alguns casos ambos podem ser omitidos, o que ainda causa algumas dúvidas em quem trabalha há pouco tempo com o React. Abaixo um exemplo de como essa função pode ser aplicada:

const doSomething = () => {
 // Function Scope
};

Expressões em JSX para React

Para que você consiga utilizar React é preciso antes estar familiarizado com algumas expressões em JSX. Essa é a extensão de sintaxe para JavaScript e que produz “elementos” do React.

O uso de JSX não é obrigatório para React, mas muitos desenvolvedores usam essa extensão por ser mais prática, mais funcional para mostrar mensagens de erro e operar como um guia mais visual para criar uma UI dentro do código em JavaScript.

Você pode inserir qualquer expressão JavaScript válida dentro das chaves em JSX. No exemplo, resultado da chamada de uma função JavaScript, formatName(user), foi incorporado dentro de um elemento < h1 >.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
const element = (
   Hello, {formatName(user)}!
);
ReactDOM.render(
  element,
  document.getElementById('root')
);

Nesta documentação de React você pode conferir outras expressões úteis em JSX para explorar.

É claro que essas são apenas algumas das inúmeras funções e possibilidades para escrever em React e desenvolver interfaces de usuário que garantam melhor performance e melhores aplicações.

Preparado para começar a explorar o React? 😉