Índice

1. Introdução
   1. O que é ReactJS?
   2. Componentes
   3. Tecnologias para utilizar o React JS
   4. Extensões
   5. Inicializando projeto React JS
   6. Vantagens de SPAs
   7. State
2. Projeto

Introdução

O que é React JS?

• O React é uma biblioteca usada para criar interfaces de usuários interativas.
• Utilizado para várias interações do usuário.
• O conceito do React são os componentes. Componentes são funções javascript, pequenos blocos de código e através dele montamos grandes aplicações.

Componentes

• No React, dividimos a aplicação em pequenos componentes.
• Vários componentes quando combinados, formam grandes estruturas.
• Pense em componentes, como se fossem peças de LEGO.
• Usamos JSX para escrevê-los.
• Componentes sempre são renderizados com a primeira letra MAIÚSCULA.
• Apenas podem retornar um elemento (div).

Tecnologias para utilizar o React JS

• Node Latest
• NPM

Extensões

• Tailwind CSS IntelliSense
• Prettier

Inicializando projeto React JS

• Rode o comando:

  npm create vite@5.5.2 .
  

• Escolha o framework que irá utilizar, nesse projeto vamos escolher React JS.
• Escolha a linguagem, que será Javascript.
• Rode o comando:

  npm install
  npm run dev
  

Vantagens de SPAs (Single Page Application)

• Velocidade: navegação entre páginas é muito mais rápida, pois não exige chamadas para um servidor.
• Experiência do usuário: SPAs são altamente interativas e perfomáticas.
• Conteúdo inserido por meio de Javascript (React).

State

• O estado (state) de um componente React tem uma função muito simples e específica. Ele é uma propriedade do componente onde colocamos dados que, quando mudados, devem causar uma nova renderização. Simples assim. Se deve causar mudança, fica no estado; se não, não fica.
• Utilizado quando há interação do usuário e reagir à interação do usuário com alguma informação.

Projeto

Mongodb - IP9NfUjaZv37jUQ5

mongodb+srv://suhailahmoraesdev:<db_password>@taskmanager.tn4d3.mongodb.net/?retryWrites=true&w=majority&appName=TaskManager