JayCesar / generation-bootcamp

[💻 Bootcamp ] Um programa de estudos de 3 meses da Generation Brasil, sendo cada qual destinado a diferentes tecnologias.
4 stars 0 forks source link

React #24

Open JayCesar opened 1 year ago

JayCesar commented 1 year ago

Framework tem uma estrutura que deve ser obrigatoriametne seguida! Se não fizer, não vai funcionar.

Bibliotecas podem ser unidas aos frameworks e também bitliotecas que cresceram tanto que elas sozinhas cuidam do problema!

Vídeo explicativo: https://www.youtube.com/watch?v=dp0zB4n3MUs


SPA (Single Page Application)

2023-07-21_09h00_13

Virtual DOM

2023-07-21_09h08_17

Ficaria assim:

2023-07-21_09h10_38

No React podemos utilizar dois tipos de extensões: JST ou TSX.
TypeScript é o JS com tipagem fixa! Ou seja, eu preciso definir antes. JavaScript tem uma tipagem que eu não preciso ficar definindo tanto.


Utilizar esse comando no lugar da parte 3 no md:
yarn create vite blog-pessoal --template react-ts

O Yarn é o "Maven" do bloco 2 (Npm E Yarn são que nem o Mavem do Bloco II) O "Vite" é a ferramenta de cosntrução inicial. (É o arquiteto)

O arquivo faz a ponte entre os arquivos HTML e os Arquivos do React!.

No react, todo componente é uma função!

As funções dentro do React só retornar somente um componente!

"Hackzinho"

function App() {
 return (
  <>
    <h1>Hello World</h1>
    <h2>Hello World</h2>
  </>
 )

}
export default App;
// Fazendo isso, eu digo para o react 'confiar' que essa componente está dentro de algo (Fragment);
JayCesar commented 1 year ago

Rotas

React-router-dom: é uma biblioteca que deve ser instalada!

O </ BrowserRoucer> é o elemento que vai conter todas as outras páginas!

O indica as págians que irão mudar;

As demais páginas que eu devem ser fixaxas, eu deixo fora do

O componente é responsável por renderizar o que foi pedido! Ou seja, o verifica se existe e o carrega

O primeiro elemento da propriedade path é a barra: / e depois element::

<Route path=´/´ element={ <Login />}`>

O compnente é o nosso GPS, pois ele ovserva o endereço que procuramos!

Eu preciso utilizar a tak caso eu queira manter a ideia de SPA