Please enable JavaScript.
Coggle requires JavaScript to display documents.
REACT, WEBPACK - Coggle Diagram
REACT
NEXT.JS
Utilizada em Homes, catálogos, etc. para facilitar interação com mecanismos de busca
-
Cookies
Dados armazenados em cookies, pois pode ser acessada pelo front, back, e intermediário, diferentemente do local storage
-
-
Cookies.set( 'atributo',valorAtributo )
Server Side Rendering
Faz chamadas a APIs antes de mandar a página pro front-end, ja entregando ela pronta para mecanismos de busca, que não esperariam ela carregar informações
-
const Element = (props) => {JSX,etc}
Mais pesada, usar apenas quando o conteúdo estiver em mudança frequente, pois ela faz o request à API a cada render
-
enviroment variables
-
guarda informações sensíveis, só ficam disponíveis do lado do SERVIDOR
-
-
-
Router
import { BrowserRouter, Routes, Route } from "react-router-dom"
-
<Routes> envolve todas as rotas, excluindo o que está presente por padrão
-
-
JSX
style = {objeto}
{{backgroundColor = constcolor, color = ''colorname''}}
-
sem hífen, apenas camelCase
-
React.useRef
referencia elementos, substituindo queryselector, etc
-
-
-
-
-
-
React.UseState
[estado,setEstado] = React.UseState(estado inicial)
-
-
React.useEffect
-
React.useEffect( ( )=> {Function},[dependências])
-
Custom Hooks
-
useCustom= ()=>{ return [X,setX] }
const {value,setValue} = useCustom()
Context
Criar
-
Function ContextData({ children }){ return<ContextX.Provider value = {obj}>children</ContextX.Provider>}
Colocar hooks, infos,etc dentro dessa função antes do return
-
React.memo
Em elementos que não são reativos, não dependem de nenhum estado
-
Renderizar elementos
ReactDom.render(<Elemento/>, Local)
-
-