DEV Community

Cover image for Front End Conceitos
Henrique Vital
Henrique Vital

Posted on

Front End Conceitos

1. Padrões de Design

Pergunta: O que são padrões de design em desenvolvimento front-end?

Resposta: Padrões de design são soluções reutilizáveis para problemas comuns que surgem durante o desenvolvimento de software. Eles ajudam a criar uma base sólida e consistente para a construção de aplicações. Por exemplo, o padrão "Singleton" garante que uma classe tenha apenas uma instância e fornece um ponto de acesso global a ela. Em aplicações front-end, padrões como "Módulo" e "Observer" são frequentemente utilizados para organizar o código e gerenciar eventos.


2. Diferença entre JavaScript, JSX e HTML

Pergunta: Qual é a diferença entre JavaScript, JSX e HTML?

Resposta:

  • JavaScript é uma linguagem de programação que permite adicionar interatividade às páginas web. Por exemplo, você pode usar JavaScript para validar formulários ou criar animações.
  • JSX é uma extensão de sintaxe para JavaScript, usada principalmente com React. Ele permite que você escreva HTML dentro do JavaScript. Por exemplo:
  const element = <h1>Hello, world!</h1>;
Enter fullscreen mode Exit fullscreen mode
  • HTML (HyperText Markup Language) é a linguagem de marcação que estrutura o conteúdo da web. Por exemplo:
  <h1>Hello, world!</h1>
Enter fullscreen mode Exit fullscreen mode

3. Client Side vs Server Side Components

Pergunta: O que são componentes client-side e server-side?

Resposta:

  • Componentes client-side são renderizados no navegador do usuário. Eles podem ser interativos e respondem a eventos do usuário sem a necessidade de recarregar a página. Por exemplo, um botão que exibe um modal quando clicado.
  • Componentes server-side são renderizados no servidor e enviados ao cliente como HTML. Isso pode melhorar o desempenho e a SEO, pois o conteúdo é carregado mais rapidamente. Um exemplo é uma página de blog que é gerada no servidor e enviada ao navegador.

4. Hosting

Pergunta: O que é hosting em JavaScript?

Resposta: Hosting é um comportamento do JavaScript onde as declarações de variáveis e funções são movidas para o topo do seu contexto de execução durante a fase de compilação. Por exemplo:

console.log(x); // undefined
var x = 5;
console.log(x); // 5
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, a declaração var x é "hospedada" no topo, mas a atribuição x = 5 não é.


5. Immediately Invoked Function Expression (IIFE)

Pergunta: O que é uma IIFE?

Resposta: Uma IIFE (Immediately Invoked Function Expression) é uma função que é definida e executada imediatamente. Isso ajuda a criar um escopo local e evitar a poluição do escopo global. Por exemplo:

(function() {
    var message = "Hello, world!";
    console.log(message);
})(); // "Hello, world!"
Enter fullscreen mode Exit fullscreen mode

Aqui, message não está acessível fora da IIFE.


6. High Order Functions

Pergunta: O que são funções de alta ordem?

Resposta: Funções de alta ordem são funções que podem receber outras funções como argumentos ou retornar funções como resultado. Por exemplo:

function greet(name) {
    return function() {
        console.log("Hello, " + name);
    };
}

const greetJohn = greet("John");
greetJohn(); // "Hello, John"
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, greet retorna uma nova função que usa o nome passado.


7. High Order Components

Pergunta: O que são High Order Components (HOCs) em React?

Resposta: HOCs são funções que recebem um componente e retornam um novo componente, permitindo reutilização de lógica e comportamento. Por exemplo:

function withLogging(WrappedComponent) {
    return function(props) {
        console.log("Rendering", WrappedComponent.name);
        return <WrappedComponent {...props} />;
    };
}

const EnhancedComponent = withLogging(MyComponent);
Enter fullscreen mode Exit fullscreen mode

Aqui, withLogging é um HOC que registra quando MyComponent é renderizado.


8. Micro Frontends

Pergunta: O que são micro frontends?

Resposta: Micro frontends são uma abordagem arquitetural que divide uma aplicação front-end em partes menores e independentes, permitindo que equipes diferentes trabalhem em diferentes partes da aplicação. Por exemplo, uma aplicação de e-commerce pode ter um micro frontend para o carrinho de compras, outro para a lista de produtos e outro para o checkout, cada um desenvolvido e implantado separadamente.


9. Redux

Pergunta: O que é Redux e como ele funciona?

Resposta: Redux é uma biblioteca para gerenciamento de estado em aplicações JavaScript. Ele utiliza um único store para manter o estado da aplicação e permite ações para modificar esse estado. Por exemplo:

const initialState = { count: 0 };

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        default:
            return state;
    }
}
Enter fullscreen mode Exit fullscreen mode

Aqui, reducer define como o estado deve mudar em resposta a ações.


10. useEffect

Pergunta: O que é o hook useEffect e como ele funciona?

Resposta: O useEffect é um hook do React que permite realizar efeitos colaterais em componentes funcionais, como chamadas de API ou manipulação de DOM. Por exemplo:

useEffect(() => {
    fetchData();
}, []); // Executa apenas uma vez após a montagem do componente
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, fetchData é chamado uma vez quando o componente é montado.


11. CSS e Pré-processadores

Pergunta: O que são pré-processadores CSS e como eles funcionam?

Resposta: Pré-processadores CSS, como SASS e LESS, permitem escrever CSS de forma mais dinâmica e organizada, utilizando variáveis, aninhamento e funções. Por exemplo, em SASS:

$primary-color: blue;

.button {
    background-color: $primary-color;
    &:hover {
        background-color: darken($primary-color, 10%);
    }
}
Enter fullscreen mode Exit fullscreen mode

Aqui, $primary-color é uma variável que pode ser reutilizada.


12. Custom Hooks

Pergunta: O que são Custom Hooks em React?

Resposta: Custom Hooks são funções que permitem reutilizar lógica de estado e efeitos em componentes funcionais. Por exemplo:

function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);
    const increment = () => setCount(count + 1);
    return [count, increment];
}
Enter fullscreen mode Exit fullscreen mode

Aqui, useCounter é um Custom Hook que encapsula a lógica de contagem.


13. Semântica e Acessibilidade

Pergunta: Como garantir semântica e acessibilidade em um site?

Resposta: Utilizando tags HTML semânticas (como <header>, <footer>, <article>) e atributos ARIA para melhorar a acessibilidade. Por exemplo:

<article>
    <h1>Title</h1>
    <p>This is an article.</p>
</article>
Enter fullscreen mode Exit fullscreen mode

Aqui, o uso de <article> ajuda a definir a estrutura do conteúdo.


14. SEO

Pergunta: O que é SEO e como aplicá-lo em um projeto?

Resposta: SEO (Search Engine Optimization) é o processo de otimizar um site para melhorar sua visibilidade nos motores de busca. Isso inclui o uso de palavras-chave relevantes, meta tags e conteúdo de qualidade. Por exemplo:

<meta name="description" content="This is a description of the page.">
Enter fullscreen mode Exit fullscreen mode

Aqui, a meta tag description ajuda os motores de busca a entender o conteúdo da página.


15. Sincronicidade no JavaScript

Pergunta: Como funciona a sincronicidade no JavaScript?

Resposta: JavaScript é uma linguagem de programação assíncrona que utiliza um modelo de execução baseado em eventos. Isso permite que operações assíncronas sejam realizadas sem bloquear a execução do código. Por exemplo:

console.log("Start");
setTimeout(() => {
    console.log("Timeout");
}, 1000);
console.log("End");
// Saída: Start, End, Timeout
Enter fullscreen mode Exit fullscreen mode

Aqui, setTimeout é assíncrono e não bloqueia a execução.


16. Composição vs Herança

Pergunta: Qual é a diferença entre composição e herança em JavaScript?

Resposta: Composição é a prática de construir objetos a partir de outros objetos, enquanto herança é um mecanismo que permite que um objeto herde propriedades e métodos de outro. Por exemplo:

// Composição
const car = {
    drive() {
        console.log("Driving");
    }
};

const sportsCar = {
    ...car,
    turbo() {
        console.log("Turbo mode");
    }
};

// Herança
class Animal {
    speak() {
        console.log("Animal speaks");
    }
}

class Dog extends Animal {
    bark() {
        console.log("Woof");
    }
}
Enter fullscreen mode Exit fullscreen mode

Aqui, sportsCar usa composição, enquanto Dog usa herança.


17. Call, Apply, Bind

Pergunta: O que são os métodos call, apply e bind em JavaScript?

Resposta: Esses métodos são usados para definir o contexto de execução de uma função. call e apply invocam a função imediatamente, enquanto bind retorna uma nova função com o contexto definido. Por exemplo:

function greet() {
    console.log("Hello, " + this.name);
}

const person = { name: "John" };

greet.call(person); // "Hello, John"
greet.apply(person); // "Hello, John"

const greetJohn = greet.bind(person);
greetJohn(); // "Hello, John"
Enter fullscreen mode Exit fullscreen mode

Aqui, call e apply executam a função imediatamente, enquanto bind cria uma nova função.


18. Prototype Chain

Pergunta: O que é a cadeia de protótipos em JavaScript?

Resposta: A cadeia de protótipos é um mecanismo que permite que objetos herdem propriedades e métodos de outros objetos. Por exemplo:

const animal = {
    speak() {
        console.log("Animal speaks");
    }
};

const dog = Object.create(animal);
dog.bark = function() {
    console.log("Woof");
};

dog.speak(); // "Animal speaks"
dog.bark(); // "Woof"
Enter fullscreen mode Exit fullscreen mode

Aqui, dog herda o método speak de animal.


19. Modules

Pergunta: Como funcionam os módulos em JavaScript?

Resposta: Módulos permitem dividir o código em arquivos separados, facilitando a organização e reutilização. O ECMAScript introduziu a sintaxe import e export para trabalhar com módulos. Por exemplo:

// module.js
export const greet = () => {
    console.log("Hello");
};

// main.js
import { greet } from './module.js';
greet(); // "Hello"
Enter fullscreen mode Exit fullscreen mode

Aqui, greet é exportado de module.js e importado em main.js.


20. Error Handling

Pergunta: Como fazer tratamento de erros em JavaScript?

Resposta: O tratamento de erros em JavaScript pode ser feito utilizando try, catch e finally, permitindo capturar e lidar com exceções de forma controlada. Por exemplo:

try {
    throw new Error("Something went wrong");
} catch (error) {
    console.log(error.message); // "Something went wrong"
} finally {
    console.log("Cleanup code here");
}
Enter fullscreen mode Exit fullscreen mode

Aqui, o bloco finally é executado independentemente de um erro ter ocorrido.


21. Type Coercion

Pergunta: O que é type coercion em JavaScript?

Resposta: Type coercion é o processo automático de conversão de um tipo de dado em outro durante a avaliação de uma expressão. Por exemplo:

console.log("5" + 5); // "55" (string)
console.log("5" - 5); // 0 (number)
Enter fullscreen mode Exit fullscreen mode

Aqui, a string "5" é convertida em número na segunda operação, mas não na primeira.


22. Git

Pergunta: Como resolver conflitos no Git?

Resposta: Conflitos no Git ocorrem quando duas alterações diferentes são feitas na mesma linha de um arquivo. Para resolver, é necessário editar o arquivo manualmente, escolher as alterações desejadas e, em seguida, fazer um commit. Por exemplo:

  1. Após um git merge, você pode ver um conflito em um arquivo.
  2. Edite o arquivo para resolver o conflito.
  3. Adicione o arquivo resolvido com git add.
  4. Finalize o merge com git commit.

23. Frameworks

Pergunta: Quais frameworks você usa para trabalhar com React?

Resposta: Os frameworks mais comuns para trabalhar com React incluem Create React App (CRA), Next.js e Gatsby. Cada um tem suas características:

  • Create React App (CRA): Ferramenta para configurar rapidamente um novo projeto React.
  • Next.js: Framework para aplicações React que permite renderização do lado do servidor e geração de sites estáticos.
  • Gatsby: Framework para criar sites estáticos com React, focado em desempenho e SEO.

24. Preparação para Entrevistas

Pergunta: Como se preparar para entrevistas de emprego em desenvolvimento front-end?

Resposta: A preparação envolve revisar conceitos fundamentais, praticar perguntas comuns de entrevistas e estar atualizado sobre as tecnologias e frameworks relevantes. Algumas dicas incluem:

  • Praticar algoritmos e estruturas de dados.
  • Revisar conceitos de JavaScript, CSS e HTML.
  • Fazer mock interviews com amigos ou plataformas online.

25. Recursos e Materiais de Estudo

Pergunta: Quais são os melhores recursos para estudar JavaScript e React?

Resposta: Existem muitos recursos online, incluindo cursos, tutoriais e documentação oficial. Algumas sugestões incluem:

  • Documentação do React: A documentação oficial é um ótimo ponto de partida.
  • freeCodeCamp: Oferece cursos gratuitos sobre JavaScript e desenvolvimento web.
  • Codecademy: Oferece cursos interativos sobre várias tecnologias, incluindo JavaScript e React.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay