ReactJs
React.JS
JSX & DataFlow
States
1function App() {
2const [counter, setCounter] = useState(0);
3 return (
4 <>
5 <p>{counter}</p>
6 <button onClick={() => setCounter(counter + 1)}>Click Me</button>
7 </>
8 );
9}Event Loop
Virtual DOM
Garbage Collector
Vantagens
Stack T3
Instalação
1npm create t3-app@latestNextJs
Next.Js
Server-side Rendering
Divisão Automática de Código
Components
1<Link href="/" className="flex w-full items-center gap-6 p-2 md:w-auto">
2 <Image src={images.itsector} width={32} height={32} alt="itsector_logo" />
3 <span className="text-2xl font-bold text-white">{resources.title}</span>
4</Link>Geração de Site Estático
API Routes
Routing
Suporte Integrado para CSS
Configuração Zero
Configuração de um projeto Next
1// Criação de um novo projeto
2npx create-next-app my-nextjs-app
3
4// Navegar para o diretório
5cd my-nextjs-app
6
7// Start Development server
8npm run devCriação de uma página Web
1// pages/index.js
2import Link from 'next/link'
3
4function Home(){
5 return (
6 <div>
7 <h1>Welcome to Next.js</h1>
8 <Link href="/about">
9 <a>About</a>
10 </Link>
11 </div>
12 )
13}Typescript
Typescript
1//Javascript 👎
2randomObj.random()
3
4IDE -> ✅
5RUN -> ⛔️ Uncaught ReferenceError: randomObj is not defined at X:2:1
6
7//Typescript 👍
8randomObj.random()
9
10IDE -> ⛔️ Cannot find name "randomObj". ts(2304)
11RUN -> ⛔️ Cannot find name "randomObj". ts(2304)Configuração
1//Explicit Type
2let name: string;
3
4//Implicit Type
5let surname = "Gonçalves"Utilização do Typescript
1import {ComponentProps} from "react"
2
3type ButtonProps = {
4 name:string // example
5} & ComponentProps<'button'>
6
7export const ButtonWithProps = ({name, children, ...props}:ButtonProps) => {
8 return <button data-name={name} {...props}>{children ?? "Button with props"}</button>
9}
10
11export const ButtonWithoutProps = () => {
12 return <button>Button without props</button>
13}TailwindCSS
TailwindCSS
Classes Utilitárias
1<h2 className="bg-gradient-to-r from-white to-lightgrey bg-clip-text text-4xl font-bold text-transparent">
2Classes Utilitárias
3</h2>Responsividade
1<div className="flex items-center gap-10 until-md:flex-col">{...children}</div>Plugins
Bibliotecas de Componentes
Configuração
1import { type Config } from "tailwindcss";
2
3export default {
4 content: ["./src/**/*.{js,ts,jsx,tsx}"],
5 theme: {
6 extend: {
7 colors: {
8 blue: "#4165FF",
9 purple: "#7241FF",
10 darkblue: "#182542",
11 },},},
12
13 plugins: [
14 // eslint-disable-next-line
15 require("tailwindcss-accent")({
16 colors: ["violet", "blue", "orange"],
17 root: "violet",
18 }),],}
19 satisfies Config;Prisma
Prisma
Type-Safe Queries
Database Agnostic
Migrações de Base de Dados
Relações e Modelos
Queries e Mutações
Segurança
Integração com Frameworks
Ecossistema
NextAuth
NextAuthJs
Instalação
1npm i next-auth
2# or
3yarn add next-authConfiguração
1import NextAuth from "next-auth"
2import Providers from "next-auth/providers"
3
4export default NextAuth({
5 providers: [
6 Providers.Google({
7 clientId: process.env.GOOGLE_CLIENT_ID,
8 clientSecret: process.env.GOOGLE_CLIENT_SECRET,
9 }),
10 // Additional authentication providers if needed
11 ],
12 // Other Configuration options
13})Custom Provider
1import { CustomProvider } from "next-auth/providers"
2
3const options = {
4 credentials: {
5 username: { label: "Username", type: "text" },
6 password: { label: "Password", type : "password" }
7 },
8 async authorize(credentials) {
9 // Add your authentication logic here
10 const user = { id: 1, name: "Humberto" }
11 user ? Promise.resolve(user) : Promise.resolve(null)
12 }
13}
14
15export default CustomProvider(options)Proteção de Rotas
1import { getSession } from "next-auth/react"
2
3export default async (req, res) => {
4 const session = await getSession({ req })
5
6 if(session){
7 // User is authenticated
8 } else {
9 // User is not authenticated
10 }
11}Informação do User
1import { getSession } from "next-auth/react"
2
3function MyPage() {
4 const { data: session } = useSession()
5
6 return (
7 <div>
8 {session ? (
9 <p>Welcome, {session.user.name}</p>
10 ): (
11 <p>You are not logged in</p>
12 )}
13 </div>
14 )
15}
16