Guia ReactJS 18 para iniciantes

React JS é uma biblioteca JavaScript popular que permite a criação de interfaces de usuário interativas e dinâmicas. Ele é usado por milhares de desenvolvedores em todo o mundo para construir aplicativos web escaláveis e eficientes. Se você é um iniciante em React JS 18, este guia é para você.

Introdução ao React JS

React JS é uma biblioteca JavaScript para construir interfaces de usuário. Ele foi desenvolvido pelo Facebook e é mantido por uma comunidade ativa de desenvolvedores. O React JS é baseado em componentes, que são blocos de construção reutilizáveis que podem ser usados para construir interfaces de usuário.

O React JS é uma das bibliotecas JavaScript mais populares e é usada por empresas como Netflix, Airbnb, Instagram, Uber e muitas outras. Ele é conhecido por sua eficiência e escalabilidade, o que o torna uma escolha popular para aplicativos web de grande escala.

Configuração do ambiente

Antes de começar a trabalhar com React JS, você precisa configurar o ambiente de desenvolvimento. Isso envolve a instalação de Node.js e do React CLI. O Node.js é uma plataforma para executar JavaScript fora do navegador, enquanto o React CLI é uma ferramenta de linha de comando para criar e gerenciar projetos React.

Criando um projeto React

OBS: é necessário instalar o Node.js, vá para o site oficial e baixe a versão mais recente. Para criar um novo projeto React, digite o seguinte comando no terminal:

Componentes em React JS

Os componentes são a base da construção de interfaces em React JS. Eles são como pequenos blocos de construção que podem ser combinados para criar interfaces mais complexas. Cada componente tem seu próprio estado e propriedades, que podem ser atualizados para refletir as mudanças na interface.

Para criar um componente em React JS, você pode usar uma função com o paradigma funcional. A função recebe as propriedades como argumentos e retorna o que será renderizado na interface.

type myComponentProps = {
	title: string;
	description: string;
};

export const MyComponent = ({ title, description }: myComponentProps) => {
	return (
		<div>
			<h1>{title}</h1>
			<p>{description}</p>
		</div>
	);
};

Estado no ReactJS

O gerenciamento de estado é uma parte importante do desenvolvimento de aplicativos em React JS. O estado é um objeto que representa o estado atual da interface. Ele pode ser atualizado para refletir as mudanças na interface.

React JS tem uma abordagem única para gerenciamento de estado. Em vez de modificar o estado diretamente, você deve usar o método useState(). O useState() é usado para atualizar o estado e notificar o React JS para re-renderizar a interface.

import { useState } from "react";

type myComponentProps = {
	title: string;
	description: string;
};

export const MyComponent = ({ title, description }: myComponentProps) => {
	const [count, setCount] = useState(0);

	function handleClick() {
		setCount(prevState => prevState + 1);
	}

	return (
		<div>
			<h1>{title}</h1>
			<p>{description}</p>

			<button onClick={handleClick}>Click Here</button>
		</div>
	);
};

Gerenciamento de estados com Context API

O gerenciamento de estados é um aspecto fundamental no desenvolvimento de aplicações ReactJS. A ContextAPI é uma ferramenta poderosa que oferece uma maneira eficiente de compartilhar estados entre componentes sem a necessidade de passar props manualmente.

Para utilizar a ContextAPI, é necessário criar um Contexto, que armazena o estado e fornece métodos para atualizá-lo. Em seguida, deve-se envolver os componentes que precisam acessar esse estado com o provedor do contexto. Veja o exemplo:

import { createContext, useState } from 'react';


export const MyContext = createContext({});


const MyProvider = ({ children }) => {
  const [myState, setMyState] = useState("gbdx");

  return (
    <MyContext.Provider value={{ myState, setMyState }}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;

• Este é um exemplo básico de como criar um contexto com o Context API do React. O MyProvider é o componente que irá envolver os componentes que terão acesso ao contexto. Ele define um estado inicial e disponibiliza através do MyContext.Provider.

Para utilizar o valor do contexto em um componente, basta importar o MyContext e utilizar o useContext, como no exemplo abaixo:

import { MyContext } from './MyProvider';

import React, { useContext } from 'react';


const MyComponent = () => {
  const { myState, setMyState } = useContext(MyContext);

  return (
    <div>
      <p>{myState}</p>
      <button onClick={() => setMyState('new value')}>
        CLick to Update
      </button>
    </div>
  );
};

export default MyComponent;

• Ao fazer isso, esses componentes podem acessar o estado e atualizá-lo quando necessário. Além disso, a ContextAPI permite que utilizar com base no escopo/necessidade de acesso as propriedades do contexto na nossa aplicação.

Podemos utilizar o provider do Context API no _app.js, dessa forma o contexto será fornecido para todos os componentes da sua aplicação que são renderizados por ele. Isso pode ser útil se você quiser compartilhar o mesmo contexto entre vários componentes ou páginas. Por exemplo, se você tiver um tema que gostaria que fosse aplicado em toda a sua aplicação, você pode definir o provedor do Context API no _app.js para fornecer o tema para todos os componentes.

Por outro lado, se você definir o provedor do Context API em um componente específico, ele será fornecido apenas para esse componente e seus filhos. Isso é útil se você tiver um componente que precise de um contexto específico e que não seja relevante para o restante da aplicação.

import { MyProvider } from './hooks/MyProvider';

function MyApp({ Component, pageProps }) {
  return (
    <MyProvider>
      <Component {...pageProps} />
    </MyProvider>
  );
}

export default MyApp;

• No entanto, é importante lembrar que o uso excessivo da ContextAPI pode tornar a aplicação mais complexa e dificultar a manutenção do código. Por isso, é essencial avaliar cuidadosamente a necessidade de utilizar essa ferramenta em cada caso.

Práticas recomendadas

Aqui estão algumas práticas recomendadas para trabalhar com React JS:

• Separação de preocupações

Separe o código em componentes menores e mais reutilizáveis. Cada componente deve ter apenas uma responsabilidade. Isso torna o código mais fácil de entender e manter.

• Gerenciamento de dependências

Use o gerenciador de pacotes npm para gerenciar as dependências do seu projeto. Isso torna mais fácil instalar e atualizar as dependências do seu projeto.

• Testes

Escreva testes para garantir que seu código esteja funcionando corretamente. Use ferramentas como Jest e Enzyme para testar componentes React. Isso ajuda a garantir que seu código esteja funcionando corretamente e ajuda a reduzir bugs e problemas de regressão.

Conclusão

React JS é uma biblioteca poderosa para construir interfaces de usuário. Com este guia, você deve ter uma compreensão básica para criar aplicativos web incríveis. E caso você queira se aprofundar, foi criado recentemente uma nova documentação oficial do React JS incrível!