+
class: center, middle, inverse, small-images
# React
## After you learn it, there is no way back
-![](./img/ni_logo.png)
+![](./img/ni_logo.png "")
---
@@ -86,7 +88,6 @@ function App() {
### Por exemplo
- `onclick` fica `onClick`
.flex-columns-center[
-
```html
@@ -129,9 +129,8 @@ function PersonDisplay({
---
# Mais um pormenor sobre props
-- Por default, existe um argumento chamado `children` , que é automaticamente preenchido pelo React.
+- Por default, existe um argumento chamado `children` , que é automaticamente preenchido pelo React.
.flex-columns[
-
```js
function Box({ children }) {
return
@@ -158,7 +157,7 @@ function PersonDisplay({
# Quando é que os componentes são renderizados?
- Quando a página é carregada.
-- Quando uma variável de estado (com `useState` ) é atualizada.
+- Quando uma variável de estado (com `useState` ) é atualizada.
- Quando um pai é re-renderizado.
```js
function App() {
@@ -173,7 +172,6 @@ function App() {
# Renderização de componentes - Nota adicional
- Isto **não** funciona! O componente não vai ser re-renderizado e por isso o texto do `
` não vai ser alterado. O `useState` contém código que força a re-renderização do componente.
.flex-columns-center[
-
```js
function Counter() => {
const counter = 0;
@@ -193,7 +191,7 @@ function Counter() => {
# Nota sobre funcionamento de browsers
.flex-columns-center[
-![](./img/browser-workings.png)
+![](./img/browser-workings.png "")
]
@@ -203,7 +201,6 @@ function Counter() => {
- Os browsers constroem uma àrvore chamada **DOM** (Document Object Model) que representa as relações hierárquicas
dos elementos.
.flex-columns[
-
```html
@@ -229,7 +226,6 @@ dos elementos.
# Keys
- Em vez de re-renderizar a lista toda quando ela muda, com as `keys` , o react permite identificar cada elemento individualmente.
.flex-columns-center[
-
```javascript
function App() {
const requests = fetchRequests();
@@ -250,9 +246,8 @@ function App() {
# Hooks - O que são?
- **Hooks** são **funções especiais** que são alocadas na memória RAM num local onde quando
-retornam um valor continuam em memória com todas as variáveis dentro dela intactas. **Começam sempre com um **`**use[A-Z]**` .
+retornam um valor continuam em memória com todas as variáveis dentro dela intactas. **Começam sempre com um **`**use[A-Z]**` .
.flex-columns[
-
```js
function counter() {
const counter = 10;
@@ -272,7 +267,7 @@ useCounter();
---
# Mas para o que é que isto seria útil?
-- Lembram-se do `useState()` ?
+- Lembram-se do `useState()` ?
```js
import { useState } from 'react';
function Counter() {
@@ -294,7 +289,7 @@ function Counter() {
circunstâncias onde muitos componentes precisam de aceder a uma mesma variável.
- Se por exemplo se tivessemos um componente `Account` que dentro dele tinha um `Profile` e dentro dele tinha um `UserBasicInfo`
a renderizar informações sobre o utilizador (nome, email, etc).
-- Para `Account` , `Profile` e `UserBasicInfo` terem acesso ao utilizador, neste caso, teríamos de passar o estado da seguinte forma: `Account` -> `Profile` -> `UserBasicInfo` .
+- Para `Account` , `Profile` e `UserBasicInfo` terem acesso ao utilizador, neste caso, teríamos de passar o estado da seguinte forma: `Account` -> `Profile` -> `UserBasicInfo` .
---
# useContext - Motivação (2/2)
@@ -397,21 +392,20 @@ function Counter() {
```
```js
function useLocalStorage(storageItem, defaultValue) {
- const [value, setValue] = useState(localStorage.getItem("counter") ?? 0);
+const [value, setValue] = useState(localStorage.getItem("counter") ?? 0);
- useEffect(() => {
- localStorage.setItem("counter", value);
- }, [value]);
-
- return [value, setValue];
+useEffect(() => {
+ localStorage.setItem("counter", value);
+}, [value]);
+return [value, setValue];
```
---
# NextJS
-Se não sabes React, não devias estar aqui...
+Se não sabes React, nem devias estar aqui...
-Este é um workshop de Nextjs versão 13 para cima!
+Este é um workshop de Next.js **versão 13** para cima!
---
@@ -419,19 +413,13 @@ Nextjs é uma **framework**.
É uma tecnologia que fornece uma estrutura para o desenvolvimento de websites com bastantes benificios como **SSR** - Server Side Rendering.
-Mas não só, até é possível criar uma simples Rest API sem necessidade de envolver frontend.
-
-NextJS é construido em cima de React e utiliza as suas funções para mexer com tudo o que é relacionadao a visualização de conteudo.
-
+Mas não só, até é possível criar uma simples Rest API sem necessidade de envolver _frontend_.
+Next.js é construido em cima de React e utiliza as suas funções para mexer com tudo o que é relacionado com a visualização de conteúdo.
---
-
-
-(Imagem para mostrar a cena global e onde encaixa o react e next, a que já existe no outro workshop)
-
-
+(n1)
---
@@ -441,140 +429,317 @@ O conteudo é renderizado no servidor no momento em que o utilizador faz o _requ
### Vantagens
- É muito fácil fornecer **informação personalizada** com base no utilizador, como por exemplo dashboards e perfil.
- Acesso a informações do _request_ como _Cookies_ e _URL Search Params_ no momento.
-- Websites mais rápidos pois as páginas podem ser guardadas em **_cache_** e globalmente distribuidas.
+- Websites mais rápidos pois as páginas podem ser guardadas em _**cache**_ e globalmente distribuidas.
- O **Server Load é reduzido** dado que o conteudo é guardado em cache e não necessita de ser gerado novamente caso as informações não sejam modificadas.
- **SEO** - Os crawlers indexam muito melhor os websites que carregam a informação no momento em que a página acontece. Isto leva a melhores rankings de pesquisa.
+---
+
+# Estrutura de Ficheiros
+## Routing - App Router
+Esta é uma das grandes mudanças na versão 13.
+
+> Tenham sempre cuidado a ver a documentação e se estão a ver a versão correta
+
+(n2)
+`.ts = .js + TypeScript `
+
+`.tsx = .jsx + TypeScript`
---
-# Estrutura de Ficheiros
## Routing - App Router
-Esta é uma das grande mudanças na versão 13.
+- page.tsx e _nesting_ de folders
+- layout.tsx
+(n4)
-> Tenham sempre cuidado a ver a documentação e se estão a ver a versão correta
+> Um dos benefícios de usar layout é que ao mudar de página, os componentes do layout não voltam a ser renderizados.
-![Screenshot 2024-10-20 at 10.19.13.png](/.eraser/B7xLmMUdQ2FRxOmRFJsp___kOVinmzsnGWDFGKVC6pjNOZQvzm1___UkglmhBhclLKjM8jUItM7.png "Screenshot 2024-10-20 at 10.19.13.png")
+- loading.jsx
+- not-found.jsx
+- error.jsx
+---
+## Routing - App Router
+### Dynamic Routing
+(n5)
+```
+export default function Page({ params }: { params: { slug: string } }) {
+ return