Front End Conceitos Junior

Nível Júnior

1. Pergunta: O que é o DOM? Resposta: O DOM (Document Object Model) é uma interface de programação que representa a estrutura de um documento HTML ou XML. Ele permite que scripts e programas acessem e atualizem o conteúdo, a estrutura e o estilo do documento. O DOM é uma representação em árvore do documento, onde cada nó é um objeto que representa uma parte do documento.

Exemplo:

   <div id="myDiv">
       <h1>Olá, Mundo!</h1>
   </div>

   const myDiv = document.getElementById("myDiv");
   console.log(myDiv.innerHTML); // "Olá, Mundo!"

1. Pergunta: O que é o modelo de caixa (box model) em CSS? Resposta: O modelo de caixa é um conceito que descreve como os elementos HTML são representados como caixas retangulares. Cada caixa tem margens, bordas, preenchimento e conteúdo. O modelo de caixa é fundamental para entender como o layout de uma página é construído.

Exemplo:

   .box {
       margin: 10px; /* Espaço fora da borda */
       border: 1px solid black; /* Borda */
       padding: 20px; /* Espaço dentro da borda */
       width: 100px; /* Largura do conteúdo */
   }

1. Pergunta: O que é uma função anônima? Resposta: Uma função anônima é uma função que não possui um nome. Ela é frequentemente usada como um argumento para outras funções ou como uma função de callback. Funções anônimas são úteis quando você não precisa reutilizar a função em outro lugar.

Exemplo:

   setTimeout(function() {
       console.log("Executado após 1 segundo");
   }, 1000);

1. Pergunta: O que são seletores CSS? Resposta: Seletores CSS são padrões usados para selecionar os elementos que você deseja estilizar. Existem vários tipos de seletores, como seletores de classe, ID e tipo. Eles permitem que você aplique estilos específicos a elementos HTML.

Exemplo:

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. Pergunta: O que é o "localStorage" em JavaScript? Resposta: localStorage é uma API que permite armazenar dados no navegador do usuário de forma persistente. Os dados armazenados no localStorage não expiram e permanecem mesmo após o fechamento do navegador. É útil para armazenar informações que você deseja manter entre sessões.

Exemplo:

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. Pergunta: O que é o evento "DOMContentLoaded"? Resposta: O evento DOMContentLoaded é disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar. É útil para executar scripts assim que o DOM estiver pronto.

Exemplo:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Pergunta: O que é o "this" em JavaScript? Resposta: O this em JavaScript refere-se ao contexto de execução atual. O valor de this pode mudar dependendo de como uma função é chamada. Em métodos de objetos, this refere-se ao objeto que está chamando o método.

Exemplo:

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. Pergunta: O que é o "event bubbling"? Resposta: O "event bubbling" é um mecanismo de propagação de eventos em que um evento começa no elemento mais interno e se propaga para os elementos externos. Isso significa que, se um evento ocorrer em um elemento filho, ele também será capturado pelos elementos pai.

Exemplo:

   <div id="parent">
       <button id="child">Clique em mim</button>
   </div>

   <script>
       document.getElementById("parent").addEventListener("click", function() {
           console.log("Div pai clicada");
       });

       document.getElementById("child").addEventListener("click", function() {
           console.log("Botão filho clicado");
       });
   </script>

Ao clicar no botão, a saída será:

   Botão filho clicado
   Div pai clicada

1. Pergunta: O que é uma "callback function"? Resposta: Uma "callback function" é uma função passada como argumento para outra função, que pode ser chamada em um momento posterior. Isso é comum em operações assíncronas, como requisições de rede.

Exemplo:

   function fetchData(callback) {
       // Simulação de operação assíncrona
       setTimeout(() => {
           callback("Dados recebidos");
       }, 1000);
   }

   fetchData(data => console.log(data)); // "Dados recebidos"

1. Pergunta: O que é o "responsive design"?
   
   Resposta: O "responsive design" é uma abordagem de design web que visa criar páginas que se adaptam a diferentes tamanhos de tela e dispositivos. Isso é frequentemente alcançado usando media queries em CSS.

   Exemplo:
   

   @media (max-width: 600px) {
       body {
           background-color: lightblue;
       }
   }
   

Nível Pleno

1. Pergunta: O que é o Flexbox e como ele funciona?
   
   Resposta: Flexbox é um modelo de layout em CSS que permite distribuir espaço entre itens em um contêiner, mesmo quando seu tamanho é desconhecido. Ele facilita o alinhamento e a distribuição de espaço.

   Exemplo:
   

   .container {
       display: flex;
       justify-content: space-between; /* Espaço entre os itens */
   }
   

2. Pergunta: O que são Promises em JavaScript?
   
   Resposta: Promises são objetos que representam a eventual conclusão (ou falha) de uma operação assíncrona. Elas permitem que você escreva código assíncrono de forma mais legível.

   Exemplo:
   

   const myPromise = new Promise((resolve, reject) => {
       // Simulação de operação assíncrona
       setTimeout(() => {
           resolve("Operação concluída!");
       }, 1000);
   });
   
   myPromise.then(result => console.log(result)); // "Operação concluída!"
   

3. Pergunta: O que é o conceito de "hoisting" em JavaScript?
   
   Resposta: Hoisting é 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. Isso significa que você pode usar variáveis e funções antes de declará-las.

   Exemplo:
   

   console.log(x); // undefined
   var x = 5;
   

4. Pergunta: O que é o "virtual DOM" em React?
   
   Resposta: O "virtual DOM" é uma representação leve do DOM real. O React usa o virtual DOM para otimizar a atualização do DOM, permitindo que ele faça alterações de forma mais eficiente, comparando o virtual DOM com o DOM real e aplicando apenas as mudanças necessárias.

   Exemplo:
   

   const element = <h1>Hello, world!</h1>;
   ReactDOM.render(element, document.getElementById('root'));
   

5. Pergunta: O que são "props" em React?
   
   Resposta: "Props" (propriedades) são um mecanismo de passagem de dados entre componentes em React. Elas permitem que você passe dados de um componente pai para um componente filho.

   Exemplo:
   

   function Greeting(props) {
       return <h1>Hello, {props.name}!</h1>;
   }
   
   <Greeting name="John" /> // "Hello, John!"
   

6. Pergunta: O que é o "state" em React?
   
   Resposta: O "state" é um objeto que representa a parte da aplicação que pode mudar. Ele é usado para armazenar dados que afetam a renderização do componente.

   Exemplo:
   

   class Counter extends React.Component {
       constructor(props) {
           super(props);
           this.state = { count: 0 };
       }
   
       increment = () => {
           this.setState({ count: this.state.count + 1 });
       };
   
       render() {
           return (
               <div>
                   <p>{this.state.count}</p>
                   <button onClick={this.increment}>Increment</button>
               </div>
           );
       }
   }
   

7. Pergunta: O que é o "React Router"?
   
   Resposta: O React Router é uma biblioteca que permite a navegação entre diferentes componentes em uma aplicação React, facilitando a criação de aplicações de página única (SPA). Ele permite definir rotas e renderizar componentes com base na URL.

   Exemplo:
   

   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   
   function App() {
       return (
           <Router>
               <Switch>
                   <Route path="/about" component={About} />
                   <Route path="/" component={Home} />
               </Switch>
           </Router>
       );
   }
   

8. Pergunta: O que são "hooks" em React?
   
   Resposta: Hooks são funções que permitem que você use o estado e outros recursos do React em componentes funcionais. O useState e o useEffect são exemplos de hooks.

   Exemplo:
   

   import React, { useState, useEffect } from 'react';
   
   function Example() {
       const [count, setCount] = useState(0);
   
       useEffect(() => {
           document.title = `Você clicou ${count} vezes`;
       });
   
       return (
           <div>
               <p>Você clicou {count} vezes</p>
               <button onClick={() => setCount(count + 1)}>Clique aqui</button>
           </div>
       );
   }
   

9. Pergunta: O que é o "Webpack"?
   
   Resposta: Webpack é um empacotador de módulos para aplicações JavaScript. Ele permite que você agrupe arquivos JavaScript, CSS e outros recursos em um único arquivo ou em vários arquivos otimizados para produção.

   Exemplo:
   

   // webpack.config.js
   module.exports = {
       entry: './src/index.js',
       output: {
           filename: 'bundle.js',
           path: __dirname + '/dist'
       }
   };
   

10. Pergunta: O que é o "Babel"?
    
    Resposta: Babel é um transpilador que permite que você escreva código JavaScript moderno (ES6+) e o converta em uma versão compatível com navegadores mais antigos. Ele é frequentemente usado em conjunto com o Webpack.

    Exemplo:
    

    // .babelrc
    {
        "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
    

Bibliografia

As informações apresentadas foram extraídas e adaptadas de várias fontes confiáveis, incluindo:

1. Glassdoor - Um site onde pessoas compartilham suas experiências de entrevistas e perguntas comuns.

   • Glassdoor

2. MDN Web Docs - Documentação abrangente sobre HTML, CSS e JavaScript.

   • MDN Web Docs

3. JavaScript.info - Um guia moderno para JavaScript, cobrindo desde os fundamentos até tópicos avançados.

   • JavaScript.info

4. React Documentation - A documentação oficial do React, que fornece informações detalhadas sobre a biblioteca.

   • React Documentation

5. CSS-Tricks - Um site com dicas e tutoriais sobre CSS e desenvolvimento front-end.

   • CSS-Tricks

Essas fontes são amplamente reconhecidas na comunidade de desenvolvimento web e são ótimos recursos para aprofundar o conhecimento em front-end. Se precisar de mais informações ou exemplos, sinta-se à vontade para perguntar!