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>;

• HTML (HyperText Markup Language) é a linguagem de marcação que estrutura o conteúdo da web. Por exemplo:

  <h1>Hello, world!</h1>

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

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!"

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"

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);

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;
    }
}

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

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%);
    }
}

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];
}

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>

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.">

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

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");
    }
}

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"

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"

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"

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");
}

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)

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.