React.js, desenvolvido e mantido pelo Facebook, tornou-se uma das bibliotecas JavaScript mais populares para a construção de interfaces de usuário, especialmente aplicativos de página única (SPAs). Conhecido por sua flexibilidade, eficiência e facilidade de uso, o React possui uma grande comunidade e uma riqueza de recursos para desenvolvedores de todos os níveis. Quer você seja um desenvolvedor iniciante ou experiente procurando adicionar React ao seu conjunto de habilidades, este tutorial irá guiá-lo através dos fundamentos do React.js.

1. O que é React.js?

React.js é uma biblioteca JavaScript de código aberto usada para construir interfaces de usuário, especialmente para aplicativos de página única onde você deseja uma experiência de usuário rápida e interativa. O React permite que os desenvolvedores criem grandes aplicativos da web que podem ser atualizados e renderizados com eficiência em resposta a alterações de dados. É baseado em componentes, o que significa que a IU é dividida em pequenas peças reutilizáveis ​​chamadas componentes.

2. Configurando seu ambiente React

Antes de começar a codificar, você precisará configurar seu ambiente de desenvolvimento. Siga estas etapas:

Etapa 1: Instale Node.js e npm

• Node.js: React requer Node.js para suas ferramentas de construção.
• npm: Node Package Manager (npm) é usado para instalar bibliotecas e pacotes.

Você pode baixar e instalar o Node.js no site oficial. npm vem junto com Node.js.

Etapa 2: Instalar Criar aplicativo React

O Facebook criou uma ferramenta chamada Create React App que ajuda você a configurar um novo projeto React de forma rápida e eficiente. Execute o seguinte comando em seu terminal:

npx create-react-app my-app

Este comando cria um novo diretório chamado my-app com todos os arquivos e dependências necessários para iniciar um projeto React.

Etapa 3: iniciar o servidor de desenvolvimento

Navegue até o diretório do seu projeto e inicie o servidor de desenvolvimento:

cd my-app
npm start

Seu novo aplicativo React agora deve estar rodando em http://localhost:3000.

3. Compreendendo os componentes do React

React tem tudo a ver com componentes. Um componente no React é um módulo independente que renderiza alguma saída, normalmente HTML. Os componentes podem ser definidos como componentes funcionais ou componentes de classe.

Componentes funcionais

Um componente funcional é uma função JavaScript simples que retorna HTML (usando JSX).

Exemplo:

function Welcome(props) {
  return 
Hello, {props.name}
;
}

Componentes da classe

Um componente de classe é uma maneira mais poderosa de definir componentes e permite gerenciar métodos locais de estado e ciclo de vida.

Exemplo:

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

4. JSX – Javascript XML

JSX é uma extensão de sintaxe para JavaScript semelhante ao HTML. Ele permite que você escreva HTML diretamente em JavaScript, que o React irá então transformar em elementos DOM reais.

Exemplo:

const element = 
Hello, world!
;

JSX torna mais fácil escrever e visualizar a estrutura de sua UI. No entanto, nos bastidores, JSX é convertido em chamadas React.createElement().

5. Estado e adereços

Adereços

Props (abreviação de "propriedades") são usados ​​para passar dados de um componente para outro. Eles são imutáveis, o que significa que não podem ser modificados pelo componente receptor.

Exemplo:

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

Estado

State é semelhante aos adereços, mas é gerenciado dentro do componente e pode mudar com o tempo. O estado é frequentemente usado para dados que um componente precisa acompanhar, como a entrada do usuário.

Exemplo:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count   1 });
  }

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

6. Tratamento de eventos

O tratamento de eventos no React é semelhante ao tratamento de eventos em elementos DOM. No entanto, existem algumas diferenças sintáticas:

• Os eventos do React são nomeados usando camelCase, em vez de letras minúsculas.
• Com JSX, você passa uma função como manipulador de eventos, em vez de uma string.

Exemplo:

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    
      Click me
    
  );
}

7. Métodos de ciclo de vida

Os componentes de classe no React possuem métodos de ciclo de vida especiais que permitem executar código em momentos específicos durante a vida do componente. Estes incluem:

• componentDidMount: Chamado após a montagem do componente.
• componentDidUpdate: chamado após as atualizações do componente.
• componentWillUnmount: chamado antes do componente ser desmontado.

Exemplo:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      

        
{this.state.date.toLocaleTimeString()}
      
    );
  }
}

8. Renderização Condicional

No React, você pode criar visualizações diferentes dependendo do estado do seu componente.

Exemplo:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return 
Welcome back!
;
  }
  return 
Please sign up.
;
}

9. Listas e chaves

Quando você precisa exibir uma lista de dados, o React pode renderizar cada item como um componente. É importante dar a cada item uma "chave" exclusiva para ajudar o React a identificar quais itens foram alterados.

Exemplo:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    

{listItems}

10. Ganchos de reação

React Hooks permitem que você use estado e outros recursos do React em componentes funcionais. Alguns dos ganchos mais comumente usados ​​incluem:

• useState: Permite adicionar estado a um componente funcional.
• useEffect: permite executar efeitos colaterais em seus componentes de função.
• useContext: Fornece uma maneira de passar dados pela árvore de componentes sem ter que passar acessórios manualmente em todos os níveis.

Exemplo de estado de uso:

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

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

11. Construindo e implantando aplicativos React

Quando seu aplicativo estiver pronto, você poderá construí-lo para produção. Use o seguinte comando:

npm run build

Isso criará uma versão de produção otimizada de seu aplicativo React na pasta de construção. Você pode então implantá-lo em qualquer servidor web.

Conclusão

React.js é uma ferramenta poderosa para construir aplicativos web modernos. Ao compreender componentes, gerenciamento de estado, manipulação de eventos e ganchos, você pode criar interfaces de usuário dinâmicas e interativas. Este tutorial cobre o básico, mas o ecossistema do React oferece muito mais, incluindo gerenciamento avançado de estado com Redux, roteamento com React Router e renderização do lado do servidor com Next.js.

Ao continuar sua jornada com o React, lembre-se de aproveitar a riqueza de recursos online, incluindo a documentação oficial do React, fóruns da comunidade e tutoriais. Boa codificação!