Configuração

useState com objeto useRef

ou exportação de nomes...
Componentes CSS Default Props Para passar argumentos podemos usar um arrow function Executando algo quando o componente é desmontado

TypeScript com React‎ export function Greeting(){

V ia propriedade Component.defaultProps const clickHandler = (message) => alert(message)

const DisplayTitle = () => {

const [person, setPerson] = useState({ name: 'Mike', age: 29 })

Ese você quiser executar código cada vez que o componente

desmonte (onUnmount)?

useRef é usado principalmente para acessar um elemento DOM.

Mas também pode ser usado para manter/preservar um valor mutável

return <h1>Olá mundo</h2>
(src/App.css)
function App(){
const handleClick = () => setPerson({ ...person, age: 35 })

} const Person = ({ name, age }) => {

entre cada renderização. useRef não aciona uma re-renderização

Pré-requisitos‎
return (
return <>
Para executar o código somente quando um componente estiver
h1 {
return <h1>Name: {name} Age: {age}</h1>
<h2>{title}</h2>
(como um useState).
‎1. Boa compreensão de ‎React
 <>
desmontando/destruindo, você precisa retornar uma função que será
(Acesse https://reactjs.org/‎ )

ste componente pode então ser importado color: red;

}
<button type="button" className="btn" onClick={handleClick}>

E
} ​
<h1>Bem-vindo ao meu app</h1>
no seu hook de useEffect
<button onClick={() => clickHandler('Olá mundo')}>Diga olá</button>

Change Age
const UseRefBasics = () => {

2. Familiaridade com ‎TypeScript Types‎‎

Person.defaultProps = {
</button>

(‎O guia 2ality é‎útil. Se você é um iniciante absoluto no import { Greeting } from './Gretting' name: 'Pedro’,
</>
const refContainer = useRef(null)

REACT
</>

TypeScript, confira ‎o tutorial do chibicode‎.)‎

(src/App.js)
age: 30,
)
useEffect(() => {
const handleSubmit = (e) => {

};
Com importe de arquivo CSS } } const timer = window.setInterval(() => {
e.preventDefault()

3. Ter lido ‎a seção TypeScript nos Convenção de Nomeação BEM setCount(count => count + 1)
console.log(refContainer.current.value)

documentos oficiais react docs‎.‎

e para acessar os argumentos do event de um handler Criando um novo state usando callback como valor }, 1000)
}

import './App.css'
// essa função será executada no unmount
​

<div className="app">
​

Ou diratamente via default parâmetros

return () => clearInterval(timer)
useEffect(() => {

Cheat sheet
4. Ter lido ‎a seção React do novo <h1 className="app_title">Bem-vindo ao meu app: {appTitle}</h1>
function App(){
const clickHandler = (ev) => console.log(ev.target)

function Counter() {

}, []) refContainer.current.focus()

playground TypeScript‎

<div className="product">
return <h1>Olá mundo</h1>
const Person = ({ name = ’Pedro’, age = 30 }) => {
const [count, setCount] = useState(0)
}, [])

<h1 className="product__name--large">Nome do produto: {product.name}</h1>

} return <h1>Name: {name} Age: {age}</h1>
function App(){
// Aqui você consegue recuperar através da função o valor antigo do estado
​

‎ ste guia sempre assumirá que você está começando

E <h1 className="product__name--small">Nick name: {product.nickName}</h1>

} return (
const increase = () => setCount((oldState) => oldState + 1)
O código 'clearInterval(timer)' só será executado antes que o
com a versão mais recente do TypeScript. return (

<p className="product__description">
<>
const decrease = () => setCount((oldState) => oldState - 1)

componente seja removido da interface do usuário (desmonte)

Inline CSS <div>

Descrição do produto: {product.description}

<h1>Bem-vindo ao meu app</h1>

<form className="form" onSubmit={handleSubmit}>

</p>
Lista <button onClick={clickHandler}>Diga olá</button>
return (

Renderização Condicional
<div>

Criando um app </div>

</div>;
function App(){

}
return <h1 style={{ color: 'red' }}>Hello World</h1>

const people = [

</>
<>

<h1>Counter</h1>

<input ref={refContainer} type="text" />

<button type="submit">Submit</button>

} <p>{count}</p>

{id: 1, name: 'Mike', age: 29},

</div>

<button onClick={increase} className='btn'> + </button>

{id: 2, name: 'Peter', age: 24},

</form>

// Criar um novo app

npx create-react-app my-app-name

Regras JSX Javascript dentro do JSX

{id: 3, name: 'John', age: 39},

Passando uma função via prop de um componente pai para

<button onClick={decrease} className='btn'> - </button>

</>

function DisplayGreeting() {

const [name, setName] = useState('Pedro')

</div>

um componente filho )

Uso {} para inserir expressões JS dentro do JSX };

// Abrir app criado
} if (name === 'Pedro') {

Retornar um único elemento (apenas um elemento pai) function App() {

cd my-app-name
return <h1>Olá admin {name}</h1>

yarn start

return people.map(person => (

function Todo({ item, onDelete }) {

function App(){
}

<Person name={person.name} age={person.age}/>

// http://localhost:3000
//
return <h1>Olá mundo</h1><h2>Oi!</h2>

const name = 'Pedro'

return (
}
)

return (

<div>
useEffect return <h1>Olá usuário {name}</h1>
Portais
{item}
}
<>
Inline If-Else
// (usando fragment)
<button onClick={() => onDelete(item)}>delete</button>

<h1>Olá {name}</h1>
m React, você pode querer executar o código após eventos do ciclo
return (
</div>

E
Usando ReactDOM.createPortal:
<p>{name === 'Pedro' ? '(admin)': '(user)'}</p>
de vida ou efeitos colaterais.

<>
);
return (

Quando você usar uma lista no JSX, é necessário

Componente funcional <h1>Olá mundo</h1>

<h2>Oi!</h2>

</>

passar um key para cada

}

Pelo uso padrão, a função useEffect é executada após cada

<div>

The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.

const modalRoot = document.getElementById("modal-root");

</>

} componente function Todos() {

// assumindo que seu html tem uma div#modal-root

renderização. Em seguida, você pode executar o código sempre que </div>

Não há mais necessidade de fazer ”import React );

const handleDelete = (todo) => {
);
​

from ’react’” para usar o Pragm // Importante colocar o parênteses no retorno da função const newTodos = todos.filter((item) => item !== todo);
a atualização do componente ocorrer } const Modal = () => {

function App() {
useEffect(() => {

Deve ter primeira letra maiúscula Passando propriedades para componentes return people.map(person => (
setTodos(() => newTodos);

Deve retornar JSX };

const el = document.createElement("div");

Use className em vez de classe também, todos os <Person key={person.id} name={person.name} age={person.age}/>
import React, { useEffect } from 'react';
modalRoot.appendChild(el);

​
Inline Logical && Operator.

nomes de atributo precisam ser camelCase function App()

)
​
return () => modalRoot.removeChild(el);

(src/App.js) return <Person name='Pedro' age={29} />

} return todos.map((todo) => <Todo item={todo} onDelete={handleDelete} />);

xibir somente se a primeira expressão for verdadeiro

}

function ChangeTitle() {
E }, []);

}
const [value, setValue] = useState(0)

};

​
// React componente
// ​
​

function App(){
const Person = (props) => {
useEffect(() => {
function DisplayUserInfo({active}) {

return (
return (

return <h1>Olá mundo</h1>

return <h1>Name: {props.name}, Age: {props.age}</h1>
document.title = `New value: ${value}`

<div class="title">
<div>

Destructuring Properties no JSX

}

useState Hook }, [])

Olá mundo
{active && <h1>User is active</h1>}

​
​
ocê pode passar um objeto inteiro via destructuring para um
</div>
V
</div>

export default App; )

// or props object deconstructing

componente, que recebera sua propriedades como return <button onClick={() => setValue(value + 1)}>Increase</button>

const Person = ({name, age}) => {

}
);

​
propriedades de componente O objetivo do useState é lidar com dados reativos, qualquer dado }
return <h1>Name: {name} Age: {age}</h1>

Como esse componente obtem

// que mude no aplicativo é chamado de estado. E quando o estado
}
renderização para o navegador?

return (
muda, você quer reagir para atualizar a interface do usuário.

<div className="title" />

function App() {
useEffect condicional
Inline If-Else
O arquivo principal do projeto é src/index.js e nesse ) return people.map(person => <Person key={person.id} {...person} />)

ocê pode usar uma condicional para efetuar alguma ação dentro do
arquivo há instruções para renderizar o componente
Component Children's }
Algumas convenç e õ
V

​
callback do useEffect <span className={count === 0 && 'text-gray-500' || count > 0 &&

ooks sempre começam com prefixo 'use'

'text-green-500' || count < 0 && 'text-red-500'}>{count}</span>
H

function App()
const Person = ({ name, age }) => {

ReactDOM.render(<App />, document.getElementById('root')) Feche cada elemento return <h1>Name: {name}, Age: {age}</h1>
Deve ser invocado apenas em um componente/função React
return (
useEffect(() => {

} Deve ser chamado no nível superior de um component

<Person name='Pedro' age={29}>
if (value > 0) {

Formulários
return (
Olá, essa é uma mensagem de boas vindas
A declaração não pode ser chamada condicionalmente document.title = `New value: ${value}`

O componente <App/> será então renderizado dentro

<img src="http:example.com/image.jpg" />
</Person>

do public/index.html na div#root }

<input type="text" name="first_name" />

}, [])
)
)
Clique em Evento import React, {useState} from 'react';

​
​
const UserForm = () => {

Componente de importação
const handleClick = () => alert('Olá mundo')

const DisplayTitle = () => {

const Person = (props) => {

Lista de dependências para execução do useEffect const [userName, setUserName] = useState("");

Componentes Aninhados return (

<h1>Name: {props.name}, Age: {props.age}</h1>

function App(){

return (

const [title, setTitle] = useState('This is the Title')

const handleClick = () => setTitle('New Title')

return <>

‎ se você quiser executar o código apenas na primeira renderização ou somente

E
​

const handleSubmit = (e) => {

O componente será criado em arquivos separados. Cada <p>{props.children}</p>

<>
quando um determinado valor mudar? Você pode usar a função useEffect e e.preventDefault();

)
<h2>{title}</h2>
console.log(userName);

componente precisa ser exportado e, em seguida, importado <h1>Bem-vindo ao meu app</h1>

enviar uma série de dependências como parâmetro.
‎
// Arrow function shorthand component
<button type="button" className="btn" onClick={handleClick}>
};

<button onClick={handleClick}>Diga olá</button>

const Person = () => <h1>Pedro Nauck</h1>

​
Change Title

</>
</button>

function Greeting(){
​
// or props object deconstructing
‎ useEffect será executado somente se o valor que estiver na lista de
O return (

)
</>

return <h1>Olá mundo</h2>

// Arrow function component
const Person = ({name, age, children}) => {
dependências mudar. ‎ Se a lista estiver vazia [] o efeito de uso só será executado <>

}
}
const Message = () => {
return (
};
<form onSubmit={handleSubmit}>

na renderização inicial‎(onMount)
export default Greeting return <h1>Olá</h1>
<h1>Name: {name} Age: {age}</h1>
​
<input

}
<p>{children}</p>
ou inline... export default DisplayTitle; value={userName}

​
)
useEffect(() => {
onChange={(e) => setUserName(e.target.value)}

Este componente pode então ser importado document.title = `New value: ${value}`
type="text"

// Function component
} function App(){

function Olá mundo(){

return (
}, [])
id="userName"

import Greeting from './Gretting'

return (
<>
// Note esse array vazio. useEffect será executado apenas uma vez na renderização inicial
name="userName"

​
<>
<h1>Bem-vindo ao meu app</h1>
​
/>

function App(){
<Message />
<button onClick={() => alert('Olá mundo')}>Diga olá</button>
useEffect(() => {
<button type="submit">Submit</button>

return <Greeting />

<Person />
</>
document.title = `New value: ${value}`
</form>

} </>
)
}, [value])
</>

)
} // Será executado cada vez que o valor 'value' mudar. );

} };

export default UserForm