rocketseat-education / nlw-06-reactjs Goto Github PK

View Code? Open in Web Editor NEW

676.0 676.0 335.0 344 KB

Projeto desenvolvido na missão ReactJS no NLW #06

License: MIT License

HTML 2.20% TypeScript 71.96% SCSS 25.84%

nlw-06

nlw-06-reactjs's Introduction

🧪 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

🚀 Como executar

Clone o projeto e acesse a pasta do mesmo.

$ git clone https://github.com/rocketseat-education/nlw-06-reactjs
$ cd nlw-06-reactjs

Para iniciá-lo, siga os passos abaixo:

# Instalar as dependências
$ yarn

# Iniciar o projeto
$ yarn start

O app estará disponível no seu browser pelo endereço http://localhost:3000.

Lembrando que será necessário criar uma conta no Firebase e um projeto para disponibilizar um Realtime Database.

💻 Projeto

Letmeask é perfeito para criadores de conteúdos poderem criar salas de Q&A com o seu público, de uma forma muito organizada e democrática.

Este é um projeto desenvolvido durante a Next Level Week Together, apresentada dos dias 20 a 27 de Junho de 2021.

🔖 Layout

Você pode visualizar o layout do projeto através do link abaixo:

Layout Web

Lembrando que você precisa ter uma conta no Figma.

📝 License

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Feito com 💜 by Rocketseat 👋🏻 Participe da nossa comunidade

nlw-06-reactjs's People

Contributors

Stargazers

Watchers

Forkers

jzsondama jorgeavila11 denislevy76 leandropalmeida luanlsr skynii fergod14nova italomilagres aasim-syed c-tos1wa alexz96 franciscodara helderam joelysondavid pavanin92 thiagomwd robsonmobile memberakatsuki liscamarini germanolira kelwinv drtcortes kellyreis natantavares atimilson angelis-reis torresandre cesarneo danilok vitormalencar leitekleyton camilaffonseca baranhuk celsojunio11 marcelocpessoa chuckproject ylyra braulley marcelosbarroso walacefex andersonssoares baianodeve israellohuan goatluidy thanielalves a2tec optydeviocourses jp2435 isaacfreitas yarlleysilva deivisutp cleversonffaria brunofrossi deborahcarvalho leandrotorresbs msa-codes thiagoac86 guiathayde longlong2012 stefano020 matheusgrigoletto developer9762 mssdev2 aguiarwesley caioanderson felipegfsouza fernandamaresi 00332275 felipevash pablo-hd natansc-dev jonatan966 sidnei-junior 01juan elisaachaves leonardonozaki rafifos andregm gabr13dev kedinha chinavolvocars raimundojsoares brunodplima alisson98sb holandah clebersandbox ricardoprotheus gabrielluiz-tec kevin-ghisi kaduufr joaoribeiro2 vitorformiga greicecastilho jairpro samuellima99 ed1nh0 joseallef pablo-oliveira paulodanielcarneiro lucas340

nlw-06-reactjs's Issues

React Router V5 vs V6 - diferenças nas declarações de: BrowserRouter, Switch, useHistory, exact entre outras

Na aula 02 encontrei um problema com a versão do react-router-dom e como tratar as rotas. Abri um request #7 e lá enviei a solução.
Porem, por conta dessa nova versão outras diferenças de como fazer as declarações mudaram também, então segue aqui.

`<Switch>` tornou: `<Routes>`

// v5
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/profile" component={Profile} />
</Switch>


// v6
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/profile" element={<Profile />} />
</Routes>

Na v6, você não precisa mais usar um exact

`useHistory` tornou: `useNavigate`

// v5
import { useHistory } from 'react-router-dom';

function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};


// v6
import { useNavigate } from 'react-router-dom';

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

Na v6 não se faz necessário o uso do .push ou do .replace

// v5
history.push('/home');
history.replace('/home');

// v6
navigate('/home');
navigate('/home', {replace: true});

Essas foram as soluções que encontrei em dezembro/2021.
fontes: https://ichi.pro/pt/o-que-ha-de-novo-no-roteador-react-v6-54507686506060 e https://dev.to/arunavamodak/react-router-v5-vs-v6-dp0

<RoomCode code={roomId} />

Olá pessoal,
Estava dando uma olhada em alguns NLW passados e resolvi revê-los para fixar os conhecimentos. Porém, na aula 03, em pages/Room.tsx, ao inserir o componente RoomCode, retorna um erro dizendo que o tipo 'string | undefined', não foi setado para 'string'. Se no componente RoomCode, eu coloco na tipagem que o code é do tipo string | undefined, o erro na página Room.tsx é corrigido, mas ocorre um erro no componente RoomCode no navigator.clipboard. Alguém pode dar uma luz?

https://gist.github.com/walterjaworski/ea7bd2ca88fb02406041c61caddea5c2

firebase.auth(); e firebase.database(); não está funcionando

De acordo com a imagem, o erro que aparece é este:

Ajuda plz!

a

auth.esm.js:60 A boolean is being passed as a fourth parameter to window.open. This is not used and may cause an exception in a future release.

Ao tentar criar uma sala, o popup de autenticação aparece, depois fecha sozinho, e no log de erro aparece:

auth.esm.js:60 A boolean is being passed as a fourth parameter to window.open. This is not used and may cause an exception in a future release.

Criei também função a seguir no AuthContext.tsx

  async function signOut() {
    await auth.signOut()

    setUser(undefined)
  }

Chamei esta função em page/Rooms.tsx num botão para fazer o signOut() e incluí uma chamada ao signIn()

Depois de desconectar, eu tento logar novamente e ocorre o erro também.

Erro com o Sass - aula 02: node sass does not yet support your current environment

Estou tentando instalar o Sass versão 5, que foi o indicado na aula.
Meu nodeJS é 16 e tá dando erro no ambiente.

Na comunidade do discord vi um problema que apresentaram instalar o windows-build-tools mas também não consegui. (não completa a instalação)

Também não estou achando como faz o downgrade do Node (se é que é possível)

abaixo o package.json onde nem tem o sass na dependência, so a partir da versão 7 aparece. Mas o React app pede pra ser a versão >= 5

{
  "name": "letmeask",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "firebase": "^9.6.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}