Frameworks de Front-End: qual é o melhor? Como escolher?

Frameworks de Front-End: qual é o melhor? Como escolher? | Alura Cursos Online

  <div id="app">
    <p id="contador">0</p>
    <button id="botaoIncrementar">Incrementar</button>
  </div>
  <script>
    let contagem = 0;
    const elementoContador = document.getElementById('contador');
    const botao = document.getElementById('botaoIncrementar');
    botao.addEventListener('click', () => {
      contagem++;
      elementoContador.textContent = contagem;
    });
  </script>

function Aplicacao() {
  const [contagem, setContagem] = useState(0);
  return (
    <div>
      <p>{contagem}</p>
      <button onClick={() => setContagem(contagem + 1)}>Incrementar</button>
    </div>
  );
}

import { Component } from '@angular/core';
// Define um componente Angular.
@Component({
  // Nome da tag HTML para o componente
  selector: 'app-botao',
  // Define o componente como independente, ou seja, não precisa de módulo
  standalone: true,
  // Define as dependências do componente
  imports: [],
  // Caminho para o HTML
  templateUrl: './botao.component.html',
  // Caminho para o CSS
  styleUrls: ['./botao.component.css'] 
})
export class BotaoComponent {
//Exibe um alerta quando o botão for clicado
  onClick(): void {
    alert('Botão clicado!');
  }
}

import "./Botao.css"
export default function Botao() {
  //Mostra um alerta na tela
  const aoClicar = () => {
    alert('Botão clicado!');
  };
  //Retorna uma tag botão
  return (
    <button onClick={aoClicar}>Clique aqui!</button>
  );
}

<script>
 //Lógica do botão
  function aoClicar() {
    alert('Botão clicado!');
  }
</script>
<style>
  /*Cria os estilos*/
  button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
  }
</style>
<!--Estrutura do botão-->
<button on:click={aoClicar}>Clique aqui!</button>

<!--Estrutura do botão-->
<template>
    <button @click="mostrarAlerta">Clique aqui!</button>
</template>
<!--Lógica do componente-->
<script>
export default {
    methods: {
        mostrarAlerta() {
            alert('Botão clicado!');
        }
    }
}
</script>
<!--Aplicação de estilos-->
<style>
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
}
</style>

<div>
      <h2>Cadastro</h2>
      <form>
            <label for="nome">Nome:</label>
            <input type="text" id="nome" name="nome">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email">

        &lt;button type=&quot;submit&quot;&gt;Enviar&lt;/button&gt;
  &lt;/form&gt;


</div>

import Botao from "../Botao/Botao";
import Titulo from "../Titulo/Titulo";
export default function Formulario() {
    return (
        <form>
            <Titulo>Preencha os dados abaixo</Titulo>
            <label htmlFor="nome">Nome:</label>
            <input type="text" id="nome" name="nome" required />
            <label htmlFor="email">Email:</label>
            <input type="email" id="email" name="email" required />
            <Botao>Enviar</Botao>
        </form>
    )
}

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Frameworks de Front-End: qual é o melhor? Como escolher?

RODRIGO SILVA HARDER

O que é um framework?

Explore por tópico

Qual é a diferença entre framework e biblioteca

Como utilizar um framework

Alguns frameworks de front-end e uma biblioteca

Angular

React

Next.js

Svelte

Vue

Outros frameworks e bibliotecas

Quais os benefícios em usar um framework?

Como escolher um framework para o seu projeto front-end?

Conclusão

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

RODRIGO SILVA HARDER

Inscreva-se em nossa Newsletter

O que é um framework?

Explore por tópico

Qual é a diferença entre framework e biblioteca

Como utilizar um framework

Alguns frameworks de front-end e uma biblioteca

Angular

React

Next.js

Svelte

Vue

Outros frameworks e bibliotecas

Quais os benefícios em usar um framework?

Como escolher um framework para o seu projeto front-end?

Conclusão

Leia também